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

一、简述

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

二、过程

1. 打包后文件上传到服务器，文件名为“.output”
2. 服务器安装pm2工具
3. 准备项目的配置文件，手动创建一个文件，如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; 
        }
}

三、总结

本文仅做记录，供大家参考

原文地址：https://blog.csdn.net/weixin_44071524/article/details/142961624

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！