Nuxt3项目宝塔部署教程 - 文章

theme: vuepress

本站使用nuxt3开发，并且已经开源，那么现在来写一篇部署教程。

准备工作

需要准备

一台服务器
一个域名，并且解析到这个服务器

环境服务器需要安装宝塔面板，主要是方便nginx反向代理。

配置环境

宝塔我们一定要安装nginx。

还要安装：PM2管理器

开始部署

首先我们克隆一下我们的源代码：https://github.com/ZN-GG/ZNGG-Nuxt3

在终端中输入命令：

git clone https://github.com/ZN-GG/ZNGG-Nuxt3.git

项目下载完成之后进入项目文件夹，我们首先下载依赖，随后打包。

yarn install
yarn build

这个时候会多出来一个目录：.output,这个就是我们要部署的全部文件了，打包一下，我直接打包成了.output.zip。

开始部署

在宝塔中新建一个静态网站，然后进入到网站目录下，将我们的.output.zip压缩包上传并解压，会得到一个.output文件夹。

接下来我们在.output同级目录下新建一个ecosystem.config.js文件，内容为:

module.exports = {
  apps: [
    {
      name: 'ZNGG',
      exec_mode: 'cluster',
      instances: 'max',
      script: './.output/server/index.mjs'
    }
  ]
}

上面说到，在宝塔中下载一个pm2管理器，所以这里直接在终端中输入命令:

pm2 start ecosystem.config.js

项目就跑起来了。

这个时候我们在宝塔的安全里面开一下3000端口，浏览器输入ip:3000端口，应该就可以访问了。可以访问以后我们就需要让域名可以访问，所以需要使用nginx的反向代理。

点击宝塔内的网站的设置，会有反向代理，代理名称随便写一个，然后目标url设置为：http://0.0.0.0:3000 即可。

WX20220612-144146@2x.png

点击保存，我们输入域名就可以访问了。

运维

如果要更新网站应该怎么办？首先我们将新的.output.zip压缩包上传，上传完毕以后，我们在命令行输入：

// 这里根据ecosystem.config.js内的名称来停止服务
pm2 stop ZNGG

然后解压压缩包，再输入命令：

pm2 start ZNGG

这样我们更新完成了。