NuxtJS 项目部署如何部署到nginx

NuxtJS 项目完成之后，如何部署到nginx？

总流程：Nuxtjs打包----》服务器上部署运行----》nginx监听----》PM2进程守护

 

提示：安装nginx （我目前使用的系统是win7）

官网下载地址：　https://nginx.org/en/download.html  

可参考：https://blog.csdn.net/u012878818/article/details/98487651

一：NuxtJS打包部署

npm run build 打包应用，打包完成后，我们将：

.nuxt
nuxt.config.js
package.json

传到服务器空间里，然后在服务器上部署运行：

npm install #运行npm install安装package里的依赖
npm start #运行npm start就可以运行起来nuxt的服务渲染了

在浏览器地址栏：http://127.0.0.1:3000/  即可访问。

二：配置nginx代理监听3000端口，package打包时端口3000（默认 可修改）

1、找到host（C:\Windows\System32\drivers\etc）文件

新增：

127.0.0.1 test.ssr.net #域名可自定义

2、找到nginx配置文件：nginx.conf

server {
        listen       80;
		server_name  test.ssr.net;
        root D:/nginx/html;
        location / {
            proxy_pass http://127.0.0.1:3000 ;
            proxy_set_header Host $host;
            proxy_set_header X-Forwarded-For $remote_addr;
        }
    }

3、启动nginx

start nginx  #启动nginx

输入域名：http://test.ssr.net 即可访问：

三：pm2开启进程守护

1、全局安装pm2

npm install -g pm2

2、进入到对应的目录执行：

pm2 start npm --name "SSR-service" -- run start  #SSR-service的名称是我们在package中的项目名称

执行完pm2的启动命令后，我们用 pm2 list 查看一下进程列表，我截一下我个人服务器的pm2列表：

简单的介绍一下pm2的命令：

pm2 start app.js              # 启动app.js应用程序
pm2 start app.js -i 4         # cluster mode 模式启动4个app.js的应用实例
                              # 4个应用程序会自动进行负载均衡
pm2 start app.js --name="api" # 启动应用程序并命名为 "api"
pm2 start app.js --watch      # 当文件变化时自动重启应用
pm2 start script.sh           # 启动 bash 脚本
pm2 list                      # 列表 PM2 启动的所有的应用程序
pm2 monit                     # 显示每个应用程序的CPU和内存占用情况
pm2 show [app-name]           # 显示应用程序的所有信息
pm2 logs                      # 显示所有应用程序的日志
pm2 logs [app-name]           # 显示指定应用程序的日志
pm2 flush                     # 清空所有日志文件
pm2 stop all                  # 停止所有的应用程序
pm2 stop 0                    # 停止 id为 0的指定应用程序
pm2 restart all               # 重启所有应用
pm2 reload all                # 重启 cluster mode下的所有应用
pm2 gracefulReload all        # Graceful reload all apps in cluster mode
pm2 delete all                # 关闭并删除所有应用
pm2 delete 0                  # 删除指定应用 id 0

pm2 scale api 10              # 把名字叫api的应用扩展到10个实例
pm2 reset [app-name]          # 重置重启数量
pm2 startup                   # 创建开机自启动命令
pm2 save                      # 保存当前应用列表
pm2 resurrect                 # 重新加载保存的应用列表
pm2 update                    # Save processes, kill PM2 and restore processes
pm2 generate                  # Generate a sample json configuration file

最后提供一下demo：https://github.com/hwq888/SSR-service