腾讯云 部署Nuxt4项目详细指南

发布时间:9/11/2025
更新时间:9/17/2025
展示:465

登录云服务器

进入 腾讯云控制后台 > 轻量云服务器 > 服务器, 点击登录, 验证后进入界面会看到:

[root@VM-16-11-opencloudos ~]#

这里是是 Linux 系统的命令行提示符, 各部分拆解的含义内容如下

  • root:当前登录的用户名(这里是超级管理员)
  • @VM-16-11-opencloudos:主机名,云服务商自动命名的虚拟机
  • ~:当前所在目录(~ 表示用户的目录,这里是 /root)
  • #:权限标识符(# 表示 root 权限,普通用户显示 $)

整体连接起来就是: 你现在是以最高权限用户(root)登录到一个运行 OpenCloudOS(一种国产 Linux 发行版)的云服务器。系统等待你输入命令(光标会闪烁在 # 符号后)。

下面开始在云服务器上部署项目

安装 Nodejs

Nuxt4 需要运行在 Node.js 20.x 或更高版本, 我选择的是 v20.19.4, 其他版本可以访问 nodejs 官方版本 下载

1. 先下载 Nodejs 安装包

wget https://nodejs.org/dist/v20.11.1/node-v20.19.4-linux-x64.tar.xz

2. 解压安装包到当前目录

tar xf node-v16.14.0-linux-x64.tar.xz

3. 将解压的文件移动到 /usr/local/node 目录下

mv node-v20.19.4-linux-x64 /usr/local/node

4. 配置环境变量

# 编辑配置文件
vim /etc/profile

然后会出来文件的详细内容,移动到文件的末尾, 按下 i 进入编辑模式, 添加如下内容

export NODEJS=/usr/local/node
export PATH=$NODEJS/bin:$PATH

按下 Esc 键退出编辑模式, 然后输入 :wq 保存并退出。

5. 保存后重新加载配置文件

source /etc/profile

6. 检查 nodejs 是否配置成功

node -v
# v20.19.4

7. 配置淘宝镜像并查看是否成功

npm config set registry https://registry.npmmirror.com
npm config get registry
# https://registry.npmmirror.com/

安装 mysql

如果项目是静态网站,或者项目中没有用到mysql, 那么就不需要安装 mysql, 可以跳过这一步

介绍一下 dnf, 为什么要用它

dnf 是一个包管理工具, 相当于 Node 的 npm, 相比于 wget, dnf 有依赖解析, 并且能够方便的进行包的移除(remove)和更新(update). 还有就是 wget 手动安装 mysql 太麻烦了, 要进行好多配置, 不太适合小白, 我是浪费了一个下午, 最后还是选择用 dnf.

这里要提一点: 不同发行版的 Linux 包管理工具不同, 常见的有 dnf, yum, apt 等, 我的轻量云服务器是 OpenCloudOS9+, 基于 RHEL/CentOS 9, 内置了 dnf 包管理工具. 感兴趣的可以看看这篇文章 Linux 下载 wget 和包管理工具 apt、yum、dnf 的对比

1. 使用 dnf 安装 mysql 服务

dnf install mysql-server

在安装过程中,系统可能会提示你确认安装。输入 y 然后按回车继续。

2. 启动 MySQL 服务并设置系统启动时自动启动

systemctl start mysqld
systemctl enable mysqld

3. 查找临时密码登录

/var/log/mysql/mysqld.log 中找到临时密码,mysqld.log 也可能在 /var/log/mysqld.log

grep 'password' /var/log/mysql/mysqld.log

回车后可能提示你: root@localhost is created with an empty password ! 这是不用密码登录

4. 登录 mysql

# 如果有临时密码, 输入命令回车后输入临时密码登录
mysql -u root -p

# 不用密码登录
mysql -u root

5. 修改 mysql 密码

mysql> ALTER USER 'root'@'localhost' IDENTIFIED BY '新密码';

6. 开启 root 账号远程登陆权限

mysql> use mysql;
mysql> select user,host from user;

+------------------+-----------+
| user             | host      |
+------------------+-----------+
| mysql.infoschema | localhost |
| mysql.session    | localhost |
| mysql.sys        | localhost |
| root             | localhost |
+------------------+-----------+
# localhost 代表只能本地访问 %代表所有人都可以访问

# 设置所有人都可以访问
mysql> update user set host='%' where user='root';

7. 刷新配置

# 刷新服务配置项
mysql> FLUSH PRIVILEGES;

8. 授权 root 用户进行远程登录并设置登录密码

mysql> ALTER USER 'root'@'%' IDENTIFIED WITH mysql_native_password BY 'root_pwd';
## 授权root远程登录 后面的root_pwd代表登录密码

9. 添加防火墙规则

服务器详情>防火墙 中点击添加规则, 设置 MySQL 服务(3306)为允许

image
image

image

10. 使用 navicat 连接数据库

ip 地址可以从服务器详情中获取, 一般选择公网 ip

image

安装 PM2

PM2 是一个 Node.js 进程管理器,用于管理和守护 Node.js 应用程序,使其在后台稳定运行。PM2 的主要功能:

  • 进程守护
    如果 Node.js 应用崩溃,PM2 会自动重启它,确保服务持续运行。
  • 集群模式(负载均衡)
    可以启动多个实例(利用多核 CPU),提高应用的并发性能。
    命令:pm2 start app.js -i 4(启动 4 个实例)。
  • 日志管理
    自动收集应用的 console.log,并支持日志分割和查看。
    命令:pm2 logs(查看日志)。
  • 监控与性能查看
    pm2 monit 可以实时监控应用的 CPU、内存占用情况。

为了防止应用崩溃导致服务中断,以及更好的管理应用,我们需要 PM2。

1. 获取 PM2

npm install pm2 -g

2. 在 Nuxt 项目执行打包命令,得到.output目录

npm run build

3. 在打包好的.output目录下, 新建一个ecosystem.config.cjs 文件, 用于启动项目

module.exports = {
  apps: [
    // 是一个数组,可以定义多个应用(每个应用一个对象)。
    {
      //应用名称
      name: "ProjectName",
      port: "3000",
      // 进程模式:'fork'(默认):单进程运行  'cluster':多进程集群模式(利用多核 CPU)
      exec_mode: "cluster",
      // 集群模式下的进程数量:  'max':自动使用所有可用的 CPU 核心数。 还可以是数字,例如4,手动指定进程数量
      instances: "max",
      // 应用的入口文件路径:
      script: "./server/index.mjs",
    },
  ],
};

4. 将.output目录上传到服务器 root 目录下

在腾讯云 OrcaTerm 平台 虚拟机名称下有个文件管理平台按钮, 点击可以上传文件到指定目录

image

输入命令查看目录中是否有.output 目录, 有的话就上传成功了

ls -a

5. 进入.output 目录

cd .output

6. 启动项目

pm2 start ecosystem.config.cjs

#启动成功后可以使用下边的命令看一下启动的服务列表 online就表示成功了
pm2 list

项目运行在 3000 端口, 可以使用命令查看 3000 端口是否在运行

netstat -tunlp | grep 3000
tcp6    0    0 :::3000       :::*    LISTEN    861089/PM2 v6.0.8:

7. 设置自动重启,当服务器故障或者重启的时候,pm2 会自动重启

pm2 startup

8. 如何访问

现在项目部署成功, 可以使用服务器公网 ip:3000 访问

如果访问不了, 可能是防火墙问题, 进入云服务器详情>防火墙, 点击添加规则, 允许 3000 端口访问

9. 问题

部署项目后老是提示 Cannot find module 'semver'

巨巨巨无语, 上传.ouput 目录的时候 node_modules 中的 semver 目录没有上传到服务器, 本地打包的依赖是有 semver 这个目录的, 不知道是屏蔽了还是怎么了, 单独上传 semver 目录就可以了.

.env 环境变量问题

以下内容是亲测!

新建了 .env.production , .env.development 文件, 但是运行起来是访问不了的, 这样才行:

"build": "nuxt build --dotenv .env.production",
"dev": "nuxt dev --dotenv .env.development",

development 环境下可以直接通过process.env获取到环境变量, 但是 production 环境下通过process.env是获取不到, 得加在runtimeConfig里面:

export default defineNuxtConfig({
  runtimeConfig: {
    mysqlConfig: {
      host: process.env.NUXT_MYSQL_HOST,
      port: process.env.NUXT_MYSQL_PORT,
      user: process.env.NUXT_MYSQL_USER,
      password: process.env.NUXT_MYSQL_PASSWORD,
      database: process.env.NUXT_MYSQL_DATABASE,
    },
  },
});

安装 Nginx

前面部署了项目, 通过 ip+3000 端口就可以访问网站, 但是正常的网站应该是输入域名访问网站.

在这里需要知道 http 协议如果没有指定端口那么默认就是走 80 端口, https 协议如果没有指定端口默认就是走 443 端口, 所以我们可以利用 Nginx 反向代理, 将 80 端口和 443 端口都代理到 3000 端口.

这样访问 ip 时就能直接访问域名, 再将 ip 解析到域名, 就可以通过域名访问网站了.

1. 安装 Nginx

dnf install nginx

nginx 的配置文件有主配置文件和额外配置文件

  • 主配置文件路径: /etc/nginx/nginx.conf
  • 额外配置文件路径: /etc/nginx/conf.d/
    主配置文件中包含了一些全局配置, 额外配置文件中包含了一些站点配置.

2. 切换到额外配置文件目录

cd /etc/nginx/conf.d

3. 新建一个配置文件

在额外配置文件目录下新建一个配置文件,可以以你的站点名命名, 所例如 gearbox.conf

touch gearbox.conf

4. 编辑配置文件

配置 Nginx 将 80 端口代理到 3000 端口

打开前面创建的配置文件

vim gearbox.conf

i 进入编辑模式, 复制下面的配置, ctrl+shift+v 粘贴到 gearbox.conf 中,这里的 example.com 要填自己的域名

server {
  listen 80;
  listen [::]:80;
  server_name example.com www.example.com;

  location / {
    proxy_pass http://localhost:3000;
  }
}

Esc 退出编辑模式, 输入 :wq 保存并退出

5. 启动 Nginx

systemctl start nginx

# 设置开机自启动
systemctl enable nginx

这个时候输入域名就可以访问了, 域名没有备案的话要先备案才能访问

目录
  • 登录云服务器
  • 安装 Nodejs
    • 1. 先下载 Nodejs 安装包
    • 2. 解压安装包到当前目录
    • 3. 将解压的文件移动到 /usr/local/node 目录下
    • 4. 配置环境变量
    • 5. 保存后重新加载配置文件
    • 6. 检查 nodejs 是否配置成功
    • 7. 配置淘宝镜像并查看是否成功
  • 安装 mysql
    • 1. 使用 dnf 安装 mysql 服务
    • 2. 启动 MySQL 服务并设置系统启动时自动启动
    • 3. 查找临时密码登录
    • 4. 登录 mysql
    • 5. 修改 mysql 密码
    • 6. 开启 root 账号远程登陆权限
    • 7. 刷新配置
    • 8. 授权 root 用户进行远程登录并设置登录密码
    • 9. 添加防火墙规则
    • 10. 使用 navicat 连接数据库
  • 安装 PM2
    • 1. 获取 PM2
    • 2. 在 Nuxt 项目执行打包命令,得到<code>.output</code>目录
    • 3. 在打包好的<code>.output</code>目录下, 新建一个<code>ecosystem.config.cjs</code> 文件, 用于启动项目
    • 4. 将<code>.output</code>目录上传到服务器 root 目录下
    • 5. 进入.output 目录
    • 6. 启动项目
    • 7. 设置自动重启,当服务器故障或者重启的时候,pm2 会自动重启
    • 8. 如何访问
    • 9. 问题
  • 安装 Nginx
    • 1. 安装 Nginx
    • 2. 切换到额外配置文件目录
    • 3. 新建一个配置文件
    • 4. 编辑配置文件
    • 5. 启动 Nginx