Vue SSR同构服务部署

在package.json修改启动端口号,再打包,避免和服务器的其他端口号冲突

"start": "nuxt start --port 3302"  //这个端口号，不要在服务器上有启动过

 

一：搭建nginx+node+npm+pm2环境

注意

我的ginx版本是 1.12以上

node版本是需要保持最新版本，

npm版本是5.6.0

pm2版本是2.10.2

 

二:在nginx的 vhost里新建一个主机绑定

upstream nodenuxt {
    server 127.0.0.1:3302; #nuxt项目 监听端口 需要跟之前在package.内配置的端口号一致
    keepalive 64;
}
 
server {
    listen 9900; #106.13.190.39:9900即可访问 新启一个端口，不要和上面的一致
    server_name 106.13.190.39;
    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; #反向代理
    }
}

 

三：项目在本地完成后，npm run build 打包应用

.nuxt
static
nuxt.config.js
package.json

将这几个文件夹拖入服务器内，可以xshell等工具，然后执行npm i  下载依赖，

注意.nuxt拉进去后可能会被隐藏掉，但是文件实际是拉进去了，如果你介意，可以在项目里重新配置他的名称

下载完毕后 运行npm start 就可以运行起来nuxt的服务渲染了

四：pm2开启进程守护

进入对应的应用目录，执行以下命令

pm2 start npm --name "you-nuxt-name" -- run start

 

其中 you-nuxt-name的名称是我们在package中的项目名称。

执行完pm2的启动命令后，我们用 pm2 list 查看一下进程列表,是否有名称一样的进程了