Nuxt2+SpringBoot项目服务器部署教程 – Centos9配置Node/MySQL/JDK/Nginx | 幽络源

概述

本章教程包括如下，一套完整的从打包到部署流程

1、nuxt2项目的构建与测试

2、centos9服务器安装并配置如下环境

（幽络源这里使用的服务器为雨云香港centos9=> https://www.rainyun.com/ODUxNDQy_ ）

• node 18.12.1
• mysql8
• JDK8
• Nginx

3、导入数据库并打包部署后端项目

4、上传部署Nuxt项目+配置Nginx

5、访问项目

阶段一：本地构建并测试Nuxt项目

0、前置确认

请确保你的 nuxt.confg.js 中配置的mode和ssr为如下，因为这里幽络源所教学的是SSR渲染部署

mode: 'universal',  // 必须是 universal 才能 SSR
ssr: true,          // 启用 SSR

如图

1、打包Nuxt2项目

在Nuxt2项目根目录的终端下执行如下命令打包

npm run build

打包后，项目的 .nuxt/dist下会生成两个目录，一个server，一个client，如图

2、安装express

执行如下命令

# 如果还没装 express
npm install express

如图

3、创建启动脚本

在项目根目录下新建server目录，创建一个 index.js 文件，内容如下

// server/index.js
const { Nuxt, Builder } = require('nuxt')
const express = require('express')
const app = express()

// 引入 Nuxt 配置
const config = require('../nuxt.config.js')
config.dev = false // 生产环境

async function start() {
  // 创建 Nuxt 实例
  const nuxt = new Nuxt(config)
  await nuxt.ready()

  // 只在开发环境重新构建
  if (config.dev) {
    const builder = new Builder(nuxt)
    await builder.build()
  }

  // 所有请求交给 Nuxt 处理（自动使用 .nuxt/dist/server/ 的 bundle）
  app.use(nuxt.render)

  // 监听端口
  const port = process.env.PORT || 3000
  app.listen(port, '0.0.0.0', () => {
    console.log(`🚀 Nuxt SSR 服务启动: http://localhost:${port}`)
  })
}

start().catch(err => {
  console.error('启动失败:', err)
  process.exit(1)
})

如图

4、准备部署项目目录（重点）

我们创建一个 名为 deploy 的空目录，然后将 .nuxt 、server、static、nuxt.config.js、package.json 复制到 deploy目录去，后面我们就用此包上传到服务器部署，如图

如上文件复制到 deploy 目录后，还需要一个步骤，将deploy目录下的 nuxt.config.js 中的 export default 修改为 module.exports = 因为后续我们使用node启动项目的，而node是无法直接解析 ES Module 的 export default的

如下图

5、本地测试nuxt项目

现在，我们用自己构建好的 deploy项目目录 来进行部署，如下图，很简单，只需要在deploy目录终端执行命令

node server/index.js

 即可启动了

然后确保后端也启动了，我们访问浏览器，如图能访问，说明我们的nuxt打包部署方式是正确的

阶段二：centos9服务器安装并配置相关部署环境

2.1、node v18.12.1 的安装

之所以这里指定下载 18.12.1 版本，是为了和我们开发环境的node版本一直，避免兼容问题。

通过远程链接工具mobaxterm链接购买的雨云服务器

我们进入到临时目录下载 Node.js 18.12.1 二进制包，先后执行如下命令

cd /tmp
curl -O https://nodejs.org/dist/v18.12.1/node-v18.12.1-linux-x64.tar.xz

如图，执行后，node就会被下载到tmp目录

然后我们要解压这个tar包，先安装tar工具，执行如下命令即可

sudo dnf install -y tar

如图

再执行如下命令将node二进制包解压到 /usr/local下

sudo tar -xf node-v18.12.1-linux-x64.tar.xz -C /usr/local --strip-components=1

然后执行 node -v 即可查看到系统中安装的node 版本了，如图

2.2、MySQL8的安装与配置

先后执行如下5条命令

# 1. 添加 MySQL 官方 Yum 仓库
sudo dnf install -y https://dev.mysql.com/get/mysql80-community-release-el9-5.noarch.rpm

# 2. 安装 MySQL 服务器
sudo dnf install -y mysql-server

# 3. 启动并启用开机自启
sudo systemctl start mysqld
sudo systemctl enable mysqld

# 4. 查看临时密码（首次启动后生成）
sudo grep 'temporary password' /var/log/mysqld.log

# 5. 运行安全配置向导
sudo mysql_secure_installation

当我执行 最后一条命令后，便是一连串的回答是和否了，幽络源这里为如下

上图中，在回答y或n的地方，除了那个是否禁止远程登录回答n，其他都回复y即可

除此之外，还需配置下MySQL使其能远程连接

首先通过如下命令查看MySQL加载的配置文件以及顺序

mysql --help | grep "Default options" -A 1

如图可以看到加载了 /etc/my.cnf /etc/mysql/my.cnf 等

那我们直接修改 /etc/my.cnf 文件，只需加入如下这行

bind-address = 0.0.0.0

 如图

然后执行如下命令重启mysql使配置生效

sudo systemctl restart mysqld

创建一个专用于远程连接的用户

先通过 mysql -u root -p 在服务连接MySQL，然后依次执行下方命令

-- 创建远程管理员用户remote_root
CREATE USER 'remote_root'@'%' IDENTIFIED BY '这里填写自己的密码';

-- 授予全部权限（等同于 root）
GRANT ALL PRIVILEGES ON *.* TO 'remote_root'@'%' WITH GRANT OPTION;

-- 刷新权限
FLUSH PRIVILEGES;

如图

最后通过Navicat或者DBaver这样的数据库连接工具可以连接测试下，如图

【提示下：如果你是用的阿里、腾讯的服务器，可能还需在防火墙开放3306端口，雨云服务器默认是黑名单模式，无需额外开放端口】

2.3、JDK8的安装

我这里项目是JDK8，在centos9上面安装openJDK8即可，依次执行如下命令

# 1. 安装 OpenJDK 8
sudo dnf install -y java-1.8.0-openjdk java-1.8.0-openjdk-devel

# 2. 验证安装
java -version
javac -version

如图，不得不说雨云服务器的下载速度保真，8M拉满了

2.4 Nginx安装配置

安装 EPEL 仓库（如果尚未安装）

sudo dnf install -y epel-release

安装 Nginx

sudo dnf install -y nginx

启动并启用 Nginx并设置开机自启Nginx

# 启动 Nginx 服务
sudo systemctl start nginx

# 设置开机自启
sudo systemctl enable nginx

# 查看状态（确认是否运行）
sudo systemctl status nginx

【提示下：和MySQL一样，若为其他云服务器，可能额外需要开启防火墙80、443端口】

阶段三：导入数据库并打包部署后端项目

幽络源这里是通过Navicat工具连接雨云后，创建数据库并导入数据的，这个比较简单，不再赘述

打包前，确认下项目中的图片路径以及数据库配置以及Maven插件是否配置正确，然后直接通过Maven的package打包，如图

这里顺便提供下Maven插件的代码，注意修改为自己的主类

<build>
    <plugins>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
            <version>2.4.5</version>
            <executions>
                <execution>
                    <phase>package</phase>
                    <goals>
                        <goal>repackage</goal>
                    </goals>
                </execution>
            </executions>

            <configuration>
                <includeSystemScope>true</includeSystemScope>
                <mainClass>com.back.BackApplication</mainClass>
            </configuration>
        </plugin>
    </plugins>
</build>

在服务器中，我自己新建了空目录，如图将jar包上传

然后幽络源这里创建了一个启动脚本和停止脚本，代码如下

start.sh

#!/bin/bash
JAR="back-1.jar"
LOG="back-1.log"

nohup java -jar $JAR > $LOG 2>&1 &
echo $! > back-1.pid
echo "Started PID=$(cat back-1.pid)"

stop.sh

#!/bin/bash
JAR="back-1.jar"
PID=$(cat back-1.pid 2>/dev/null)

if [ -z "$PID" ] || ! kill -0 $PID > /dev/null; then
  echo "Not running"
  exit 0
fi

kill $PID
sleep 2

if kill -0 $PID > /dev/null; then
  kill -9 $PID
  echo "Killed $PID"
else
  echo "Stopped $PID"
fi

rm -f back-1.pid

然后启动脚本，并查看日志，如图后端启动成功

阶段四：上传部署Nuxt项目+配置Nginx

在阶段一，幽络源将nuxt项目进行了构建并整理为了一个deploy目录，将其压缩为zip，然后上传到服务器，如图

安装unzip，然后解压压缩包

#安装unzip
sudo dnf install -y unzip

#解压压缩包到当前目录
unzip deploy.zip

进入deploy目录，执行如下命令下载依赖

# 安装生产依赖（不需要 devDependencies）
npm install --production

如图

【注意：这里再次提醒确保deploy目录下的 nuxt.config.js 中的 export default 修改为了 module.exports =】

然后，便是启动我们的项目，这里我们要用到一个名为 PM2 的进程管理器，他是专门用于NodeJs的进程守护管理器，让我们的项目保持运行。

执行如下命令全局安装下载pm2

npm install -g pm2

使用如下命令启动nuxt项目，并命名为 front

pm2 start server/index.js --name "front"

如图

另外执行如下命令设置开机自启

设置开机自启
pm2 startup
pm2 save

额外的命令

# 查看状态
pm2 status front

# 停止
pm2 stop front

# 重启
pm2 restart front

# 删除（停止并移除）
pm2 delete front

#查询运行的进程
pm2 list

# 重启 PM2 守护进程
pm2 kill

然后配置Nginx，通过Nginx反向代理我们的前端项目

在 /etc/nginx/conf.d 目录下创建一个名为 nuxt.conf 的文件作为我们nuxt项目的Nginx配置文件，内容如下

server {
    listen 80;
    server_name your-domain.com;  # 替换为你的域名或服务器IP

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
    }
}

然后测试配置是否正确 并 重启 nginx

# 测试配置是否正确
sudo nginx -t

# 如果输出 'syntax is ok'，再重启
sudo systemctl restart nginx

如图

然后我们就可以通过配置的域名或者ip访问网站了，如图，当然我这里还得把图片上传上去

根据后端配置的图片映射规则可知，我应当将图片放置于服务根目录的uploads中，如图

再次访问我们的域名或者ip，如图网站建立成功

结语

如上为幽络源原创的Nuxt2+SpringBoot项目的服务器部署教程，如有疑问或对建站感兴趣的小伙伴可以加入我们的QQ群聊307531422