当前位置：首页 > article >正文

2024-10-15 Nuxt3打包部署到Nginx流程

article 2024/10/20 18:55:30

一、简述

记录一下部署Nuxt3项目到Nginx的流程，使用pm2工具进行项目的启动

二、过程

打包后文件上传到服务器，文件名为“.output”
服务器安装pm2工具
准备项目的配置文件，手动创建一个文件，如ecosystem.config.js，文件名可自定义，本次部署文件内容如下
```
module.exports = {
  apps: [
    {
      //应用名
      name: 'root',

      //应用运行端口
      port: '3001',

      //指定脚本位置，此路径按照自己的文件位置进行修改
      script: './.output/server/index.mjs'
    }
  ]
}
```
4.根据以上配置文件，将启动脚本与项目包放到同一目录下，使用pm2命令启动项目，命令如下

启动

pm2 start "ecosystem.config.js"

暂停

pm2 stop xxx

帮助文档

pm2 --help

启动成功后显示

5.配置Nginx反向代理

以监听443端口为例，此处不赘述Nginx配置文件块的作用，主要配置如下：

server {
        listen       443 ssl;
        server_name  xxx;

        #ssl配置
        ssl_certificate      x.pem;
        ssl_certificate_key  x.key;
        ssl_session_cache    shared:SSL:1m;
        ssl_session_timeout  5m;
        ssl_ciphers  HIGH:!aNULL:!MD5;
        ssl_prefer_server_ciphers  on;

        #解决刷新404
        #try_files $uri $uri/ /index.html;
        
        #此处指定项目包路径
        root  /home/shenghong/cloud/client/.output;
         
        # 配置 _nuxt 静态文件目录
        location /_nuxt/ {
            #此处路径按照自己包的位置进行修改
            alias /xxx/.output/public/_nuxt/;
            try_files $uri $uri/ =404;
        }
         
        #配置nuxt项目的运行端口代理
        location / { 
          proxy_set_header Host $http_host;
          proxy_set_header X-Real-lP $remote_addr;
          proxy_set_header REMOTE-HOST $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          
          index index.html;
          #此处配置项目在服务器上运行的ip和端口号，此端口号即为上述配置文件的端口
          proxy_pass http://xxx.xxx.xxx.xxx:3001; 
        }
}