由于seo的需要,最近将项目移植道nuxt.js下采用ssr渲染
移植完成后,一路顺畅,但是到了要部署到服务器端上时候,还是个头疼的问题,但最终还是顺利完成。
现在记录一下部署中的过程。
注:部署时候过程中,参考了下:https://segmentfault.com/a/1190000012774650
搭建nginx+node+npm+pm2环境
我们的nginx版本是 1.12
node版本是v8.11.1
npm版本是5.6.0
pm2版本是2.10.2
具体环境安装,网上都有教程,就不在叙述,直接进入正文。
一:配置nginx代理监听3000端口,package打包时端口3000
在nuxt.js的项目下package.json里设置
在nginx的 vhost里新建一个主机绑定
upstream nodenuxt {
server 127.0.0.1:3000; #nuxt项目 监听端口
keepalive 64;
}
server {
#listen 80;
server_name liuhai.work www.liuhai.work;
# 配置https
listen 443 ssl;
ssl_certificate /usr/local/nginx/conf/cert/liuhai_work/www.liuhai.work.pem; # pem文件的路径
ssl_certificate_key /usr/local/nginx/conf/cert/liuhai_work/www.liuhai.work.key; # key文件的路径
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
# 配置https结束
location / {
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_set_header X-Nginx-Proxy true;
proxy_cache_bypass $http_upgrade;
proxy_pass http://nodenuxt; #反向代理
}
}
server {
listen 80;
server_name liuhai.work www.liuhai.work;
rewrite ^(.*) https://$host$1 permanent;
}
二:项目在本地完成后,npm run build 打包应用
打包完成后,我们将
.nuxt
static
nuxt.config.js
package.json
传到服务器空间里, 需要上传文件如下
三:在服务器上部署运行
- 运行
npm install
安装package里的依赖 - 运行
npm run start
就可以运行起来nuxt的服务渲染了
此时我们就可以在浏览器上输入 mysite.com 访问了。服务端渲染瞬间出来了,但这并不理想,进程稳定性能否常驻后台?
四:pm2开启进程守护
进入对应的应用目录,执行以下命令
pm2 start npm --name "my-nuxt" -- run start
其中 my-nuxt
的名称是 我们在 package中的项目名称。
# package.json
"name": "my-nuxt",
执行完pm2的启动命令后,我们用 pm2 list 查看一下进程列表,我截一下我个人服务器的pm2列表:
正确的步骤是:
npm install
安装依赖npm run start
运行nuxt- 开另一个窗口执行
pm2 start npm --name "my-nuxt" -- run start
- 另一个窗口正运行的
nuxt
项目可以直接关掉了,因为pm2
已经监听到了3000
窗口
五:直接关掉 npm run dev
提前是你已经把pm2
开启了。你npm run dev
能通过域名或ip+端口访问的话,可以直接关掉哈。我就是没有关掉,每次页面都是之前的…
大功完成,今晚吃鸡去。
六、可能遇到的问题
1、重复绑定服务器名字了
# 重复绑定服务器名字了
nginx: [warn] conflicting server name "localhost" on 0.0.0.0:80, ignored
2、打包建议
如果没有安装什么东西,只需要传 .nuxt 文件就可以了
3、项目运行起来的完整目录
4、你的node和npm版本一定要跟win上开发的版本一致,如果npm不一致:
// 填写你win上的npm版本
npm install npm@6.14.10 -g
5、清除npm缓存
npm cache verify
或者
npm cache clean --force
6、由于vue3的出现导致nuxt安装依赖错误,如果你是nuxt2的项目,必须安装vue2
npm list vue
npm install vue@2.7.14 --save
💬 COMMENT