Nuxt3 全栈项目服务器部署全网最全最细保姆级教程解决各种小坑时光小灶

博主：时光小灶
发布时间：2023 年 03 月 20 日
2825 次浏览
5 条评论
2371字数
分类：网站部署 Nuxt

> 服务器：Nginx
> 面板：宝塔面板
> 个人博客：[https://timebk.cn/](https://timebk.cn/)
> 原文地址：[原文](https://timebk.cn/index.php/2023/03/20/96.html)

# 项目打包

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

```
npm run build
```

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

# 上传服务器

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

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

# PM2管理器安装

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

* 咱们点击宝塔面板的 `软件商店` ，搜索 `PM2`，点击安装（若是非面板，访问 [PM2官网](https://pm2.io/) ，自行按照文档在终端进行安装）
* 打开 `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` 的端口号即可，现在你可以通过该域名访问项目了

# 项目文件更新

部署项目后，也许我们在本地开发了新功能或新页面需要重新部署到服务器

* 在本地开发好后，使用 `npm run build` 打包，然后将 `.output` 文件夹里的所有文件压缩成压缩包(.rar)
* 推荐先将服务器上面之前上传的项目文件全部删除，哦对了，保留 ` ecosystem.config.js` ，因为这个我们一般不用再改了
* 删除后，将新的压缩包上传到项目文件夹根目录里，解压
* 打开 `PM2管理器` ，点击该项目集群其中一个的 `编辑` ，注意，这里咱们不能点重启，因为我发现直接点重启会项目直接停止运行，且再点击启动也没用
* 打开 `编辑` 后，启动文件重新选择成 `ecosystem.config.js` ，提交，现在，你的项目就正常更新了

# 后言

因为系统环境不同，Nuxt3项目部署服务器问题千千万，如果你有遇到其它没提到的情况，留言一起探讨吧~

最后修改：2023 年 03 月 21 日

分享不易，请老板打赏。

5 条评论

1
August 9th, 2023 at 08:43 pm

555

回复
1 1
August 9th, 2023 at 06:46 pm

1

回复
1. 1 1
  August 9th, 2023 at 06:56 pm
  
  @1
  
  1
  
  回复
1
August 9th, 2023 at 06:46 pm

1

回复
1
August 9th, 2023 at 04:47 pm

1

回复

发表评论取消回复

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

Nuxt3 全栈项目服务器部署全网最全最细保姆级教程解决各种小坑时光小灶

时光小灶 • 2023 年 03 月 20 日

> 服务器：Nginx
> 面板：宝塔面板
> 个人博客：[https://timebk.cn/](https://timebk.cn/)
> 原文地址：[原文](https://timebk.cn/index.php/2023/03/20/96.html)

# 项目打包

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

```
npm run build
```

# 上传服务器

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

# PM2管理器安装

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

# 配置ecosystem.config.js

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

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

# 运行项目

# 映射，绑定域名

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

# 修改项目端口

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

# 项目文件更新

部署项目后，也许我们在本地开发了新功能或新页面需要重新部署到服务器

# 后言

因为系统环境不同，Nuxt3项目部署服务器问题千千万，如果你有遇到其它没提到的情况，留言一起探讨吧~

Nuxt3 全栈项目服务器部署全网最全最细保姆级教程解决各种小坑时光小灶

5 条评论

发表评论取消回复

超星/学习通网页版破解人脸识别代码

【原创】最新29刷网课平台系统TOC模板源码+带教程更新1.1.0

PC游戏实时自动翻译软件【团子翻译器】

【原创】【使用文档】29刷网课平台系统TOC模板

我的个人项目地址&开源链接&技术博客地址

【全网最全】FusionApp的小技巧

比较三个数的大小并排序 JavaScript

Nuxt3 学习笔记记录开发流程、bug解决、小坑优化通俗易懂，持续更新时光小灶

随机获取数组里的数据 JavaScript

Nuxt3 全栈项目服务器部署全网最全最细保姆级教程解决各种小坑时光小灶

Nuxt3 全栈项目服务器部署全网最全最细保姆级教程解决各种小坑时光小灶

5 条评论

发表评论 取消回复

Nuxt3 全栈 项目服务器部署 全网最全最细保姆级教程 解决各种小坑 时光小灶

发表评论取消回复

Nuxt3 全栈项目服务器部署全网最全最细保姆级教程解决各种小坑时光小灶