nuxt项目部署到linux上

深碍√TFBOYSˉ_ 2022-12-28 08:09 70阅读 0赞

###### 1 安装nginx ######

https://blog.csdn.net/lh155136/article/details/111292396

###### 2 安装nodejs ######

https://blog.csdn.net/lh155136/article/details/111194424

###### 3 本地前端npm run build打包后将以下4个文件放到shop文件夹，再将shop文件夹压缩一个名为shop的压缩包 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoMTU1MTM2_size_16_color_FFFFFF_t_70]

自行建立路径/app/data/  
cd /app/data/  
上传压缩包rz -y选择刚才压缩好的shop压缩包  
解压  
unzip shop.zip  
显示-bash: unzip: command not found  
执行yum -y install unzip zip

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoMTU1MTM2_size_16_color_FFFFFF_t_70 1]

###### 4 解压后进入shop目录，安装需要的包npm install ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoMTU1MTM2_size_16_color_FFFFFF_t_70 2]

###### 5 启动nuxt ######

npm run start

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoMTU1MTM2_size_16_color_FFFFFF_t_70 3]  
在说一下遇到的坑  
图片是之前截的路径略有不同，这个问题是前端解决的，大概意思是一些依赖找不到，所以又加了一个文件tsconfig.json，这个不是必须的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoMTU1MTM2_size_16_color_FFFFFF_t_70 4]

这里解释一下端口8000是后来改的，因为3000强行杀死后还是一直被占用  
在nuxt.config.js中修改  
![在这里插入图片描述][20201216110106985.png]

此时如果ctrl+c退出就意味着nuxt关闭  
所以需要pm2进程守护

###### 6 安装pm2 ######

cd /usr/local/node/bin/  
npm install pm2 -g

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoMTU1MTM2_size_16_color_FFFFFF_t_70 5]

如有兴趣可以到官网自行学习  
pm2官网  
https://pm2.keymetrics.io/  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoMTU1MTM2_size_16_color_FFFFFF_t_70 6]

###### 7 启动 ######

去shop目录：cd /app/data/shop  
查看进程：pm2 list  
启动nuxt项目（在此目录执行）：pm2 start npm --name “gangganghao” – run start  
删除进程：pm2 delete gangganghao  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoMTU1MTM2_size_16_color_FFFFFF_t_70 7]  
–name 后面的是package.json里面的name  
![在这里插入图片描述][20201216103022287.png]

###### 8 配置nginx代理 ######

vi /etc/nginx/nginx.conf

server里面加上

listen       80;
       server_name	192.0.0.1;
       location / {
       		proxy_pass http://127.0.0.1:8000;# nuxt项目url
       }

nginx -s reload

查看某个端口是否有进程（用来查看nuxt项目是否启动）  
netstat -anp |grep 8000

###### 9 页面访问服务名字192.0.0.1（已脱敏） ######

server\_name 192.0.0.1;  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoMTU1MTM2_size_16_color_FFFFFF_t_70 8]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoMTU1MTM2_size_16_color_FFFFFF_t_70]: /images/20221120/930d775202d84e0c9479cf4286eed304.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoMTU1MTM2_size_16_color_FFFFFF_t_70 1]: /images/20221120/68d079d9e4e94792b4add3a3f7202f04.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoMTU1MTM2_size_16_color_FFFFFF_t_70 2]: /images/20221120/0f5ac47fcfbd4492a45e606f3b344497.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoMTU1MTM2_size_16_color_FFFFFF_t_70 3]: /images/20221120/402c6231a6a645a19ea0618bab82da4d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoMTU1MTM2_size_16_color_FFFFFF_t_70 4]: /images/20221120/8f0c03ef48604f2f9e760f3f4cb3e14d.png
[20201216110106985.png]: /images/20221120/27b352ba8f674da58b0677a5aec13fae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoMTU1MTM2_size_16_color_FFFFFF_t_70 5]: /images/20221120/de5a06cfbab14d70b8d1f0f9ff719499.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoMTU1MTM2_size_16_color_FFFFFF_t_70 6]: /images/20221120/904be465b1194261b67e6550abc96060.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoMTU1MTM2_size_16_color_FFFFFF_t_70 7]: /images/20221120/2755f3454ed64b7a8b7bd6d407927406.png
[20201216103022287.png]: /images/20221120/47c2e925e54e479e876c5c4f7fb5750e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xoMTU1MTM2_size_16_color_FFFFFF_t_70 8]: /images/20221120/9d22b7339ff84a6a9013b66a4e55d7c0.png