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

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

news 2025/6/27 0:32:06

一、简述

记录一下部署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; }
}