nuxt3 nginx nuxt3 nginx部署

转载

mob64ca13f83523 2024-05-07 08:27:09

文章标签 nuxt3 nginx 服务器前端 node.js vue.js 文章分类 运维

服务器：Nginx
面板：宝塔面板

项目打包

第一步肯定是打包咯，前提是项目已开发好了以及没有啥Bug了哈

npm run build

打包好后，你会在项目根目录下发现多了个 .output 文件夹
打开这个文件夹，将里面的所有文件压缩成压缩包
压缩包格式推荐 .rar ，其它格式尤其是.zip格式可能会造成有中文名的文件的名称乱码，从而会导致项目无法正常访问

上传服务器

前提是你要有个云服务器，推荐安装宝塔面板！

在服务器 wwwroot 文件夹下新建一个文件夹，文件夹名称随意(推荐改成你之后要绑定的域名)，这个文件夹将作为项目文件夹
打开该文件夹，将我们的压缩包上传到其根目录，解压

PM2管理器安装

这是一个Node守护进程管理器

咱们点击宝塔面板的 软件商店 ，搜索 PM2，点击安装（若是非面板，访问 PM2官网，自行按照文档在终端进行安装）
打开 PM2管理器 ，先点击 Node版本，选择合适的Node版本（注意，宝塔的这个PM2管理器是全局的，可能影响你之前运行的项目）

配置ecosystem.config.js

回到刚刚我们的创建项目文件夹根目录，新建一个 ecosystem.config.js 文件

// ecosystem.config.js
module.exports = {
  apps: [
    {
      name: 'guanwang',// 进程名称
      port: '3001',// 启动端口
      script: './server/index.mjs'// 执行文件
      exec_mode: 'cluster',// 开启集群模式，多线程模式
      instances: 'max',// 集群实例数
      autorestart: true // 程序崩溃后自动重启
    }
  ]

注意，设置的端口port你需要在服务器提供商和服务器安全配置里开放此端口

运行项目

进入 PM2管理器 的 项目列表 ，点击 添加项目
启动文件 选择 ecosystem.config.js ，运行目录 选择 ecosystem.config.js 所在的目录(一般会自动生成)，点击 提交
注意，提交后你可能会看到项目列表生成了多个相同名称的集群，不用担心，后续的设置端口监听和删除项目和映射和重启等都只需要点其中一个集群的就可以了
现在，你可以通过 ip + 设置的端口 访问项目了

映射，绑定域名

实际应用中，为了考虑IP保护和方便推广，我们需要为项目绑定域名

进入 PM2管理器 ，点击该项目的其中一个集群的 设置端口 ，输入我们在 ecosystem.config.js 里填写的port，点击提交
点击 映射 ，填写我们解析好后的主域名或二级域名或多个域名，点击提交
现在，我们移步到 网站管理 的 PHP项目 ，可以看到多了一个我们所绑定的域名的项目，它的PHP版本是 静态
接下来你就可以进入这个项目的设置，为它增加SSL了(推荐)，当然，你现在可以通过该域名访问当前项目啦

修改项目端口

我们有的时候需要给该项目重新定义一个端口

首先，我们要在 ecosystem.config.js 文件里设置新的 port(端口)
然后，进入 PM2管理器 ，删除该项目 ，对没错，先删除它，若你直接点击重启或者设置端口，很大概率会出现新端口不生效或者项目崩溃！！！
删除后，重新点击 添加项目 ，重做一次【运行项目】和【映射，绑定域名】步骤即可，现在你可以通过 ip + 新的端口号 访问项目了
上方的步骤完成后，请移步到 网站管理 的 PHP项目 ，点击该项目绑定的域名的 设置 的 反向代理，修改 目标URL 的端口号即可，现在你可以通过该域名访问项目了