个人分享考试网站--项目部署

原创已于 2026-03-09 17:18:23 修改 · 961 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#java #vue.js #微信小程序

于 2026-03-09 17:16:54 首次发布

网站搭建专栏收录该内容

1 篇文章

订阅专栏

一、环境准备（所有部署方式通用）

1. 安装Node.js 16

Windows系统

下载地址：https://nodejs.org/download/release/latest-v16.x/（选择node-v16.xx.x-x64.msi）
双击安装，勾选Add to PATH，一路下一步即可。
验证安装：打开命令行，执行node -v和npm -v，能显示v16.x.x版本即成功。

Linux系统（CentOS/Ubuntu）

# 下载Node.js 16压缩包
wget https://nodejs.org/download/release/latest-v16.x/node-v16.20.2-linux-x64.tar.xz

# 解压
tar -xvf node-v16.20.2-linux-x64.tar.xz

# 移动到/usr/local目录（方便全局调用）
mv node-v16.20.2-linux-x64 /usr/local/node16

# 配置环境变量（临时生效，重启后需重新执行；永久生效需写入/etc/profile）
export PATH=/usr/local/node16/bin:$PATH

# 验证
node -v  # 输出v16.20.2
npm -v   # 输出8.19.4

2. 前端编辑器准备

WebStorm/VSCode：直接打开对应文件夹（源代码\source\vue\xzs-student和source\vue\xzs-admin）即可，无需额外配置。

二、集成部署（前后端打包到Java Jar包）

步骤1：前端依赖安装与打包

（1）进入前端项目目录

# 学生端
cd 源代码/source/vue/xzs-student

# 管理员端
cd 源代码/source/vue/xzs-admin

（2）配置npm镜像（解决下载慢/失败问题）

# 设置sass二进制包镜像（解决node-sass安装失败）
npm config set sass_binary_site https://registry.npmmirror.com

# 安装依赖（指定国内镜像）
npm install --registry https://registry.npmmirror.com

（3）若npm install报错，备用方案

删除当前目录下的node_modules文件夹和package-lock.json文件；
将node_modules.zip解压到当前目录（确保解压后有node_modules文件夹）。

（4）打包前端代码

npm run build

打包成功后，会在当前目录生成student（学生端）和admin（管理员端）文件夹。

步骤2：前端文件移动到Java项目

将打包后的student和admin文件夹，复制到Java项目的source/xzs/src/main/resources/static目录下。

步骤3：Java后端配置与打包

（1）修改数据库连接配置

打开source/xzs/src/main/resources/application-prod.yml，找到datasource节点，修改为你的数据库地址/账号/密码：

spring:
  datasource:
    url: jdbc:mysql://你的数据库IP:3306/xzs?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai
    username: 你的数据库账号（如root）
    password: 你的数据库密码

（2）打包Java项目为Jar包

方式1（Maven命令）：进入Java项目根目录（source/xzs），执行：
```
mvn clean package -DskipTests
```
方式2（IDEA）：点击Maven -> Lifecycle -> package，打包完成后，Jar包会生成在target目录下（文件名：xzs-3.9.0.jar）。

步骤4：运行Jar包

# 后台运行（指定时区为上海，使用prod配置，输出日志到start1.log）
nohup java -Duser.timezone=Asia/Shanghai -jar -Dspring.profiles.active=prod  xzs-3.9.0.jar  > start1.log  2>&1 &

# 查看日志（验证是否启动成功）
tail -f start1.log

访问地址

学生端：http://服务器IP:8000/student
管理员端：http://服务器IP:8000/admin

三、前后端分离部署（Nginx+Java后端）

步骤1：后端部署（同集成部署的步骤3、4）

启动Java后端，确保端口8000可访问（后端接口地址：http://IP:8000/api/xxx）。

步骤2：Nginx部署前端

（1）安装Nginx（Linux）

# CentOS
yum install -y nginx

# Ubuntu
apt-get update && apt-get install -y nginx

（2）创建前端目录

mkdir -p /usr/local/xzs/web

（3）复制前端打包文件

将集成部署中打包好的student和admin文件夹，上传到/usr/local/xzs/web目录下。

（4）配置Nginx

编辑Nginx配置文件（通常路径：/etc/nginx/conf.d/xzs.conf）：

server {
    listen      8001;          # 前端访问端口
    server_name xzs;           # 服务器名称（可自定义）
    charset utf-8;             # 防止中文乱码

    # 前端静态文件根目录
    location / {
        root /usr/local/xzs/web/;
        index index.html;
        try_files $uri $uri/ /index.html;  # 解决Vue路由刷新404问题
    }

    # 反向代理后端接口（前端请求/api/* 转发到后端8000端口）
    location /api/ {
        proxy_pass  http://localhost:8000/;  # 末尾的/必须加，否则路径会拼接错误
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

（5）重启Nginx并验证

# 检查配置文件语法
nginx -t

# 重启Nginx
systemctl restart nginx

# 设置开机自启
systemctl enable nginx

（6）开放防火墙端口

# CentOS 7+/RHEL
firewall-cmd --add-port=8001/tcp --permanent
firewall-cmd --reload

# Ubuntu
ufw allow 8001/tcp
ufw reload

访问地址

学生端：http://服务器IP:8001/student
管理员端：http://服务器IP:8001/admin

四、Docker部署（最便捷，一键启动）

步骤1：准备Docker环境

（1）安装Docker和Docker Compose

# 安装Docker（Linux）
curl -fsSL https://get.docker.com | sh
systemctl start docker
systemctl enable docker

# 下载docker-compose并配置（按文档步骤）
cd /usr/local/xzs/install
mv docker-compose-linux-x86_64 /usr/local/bin/docker-compose
chmod +x /usr/local/bin/docker-compose

# 验证
docker-compose --version

步骤2：准备SQL脚本

从下载sql压缩包并解压；

编辑sql文件，在开头添加：

CREATE DATABASE IF NOT EXISTS xzs CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci;
USE xzs;

将修改后的sql文件移动到/usr/local/xzs/docker/sql目录下。

步骤3：启动Docker容器

cd /usr/local/xzs
docker-compose up -d  # 后台启动所有服务（MySQL、Java后端、前端）

# 查看容器状态
docker-compose ps

# 查看日志（有问题时）
tail -f /usr/local/xzs/log/*.log

访问地址

学生端：http://服务器IP:8000/student
管理员端：http://服务器IP:8000/admin

常见问题解决

npm install报错：
- 优先删除node_modules和package-lock.json，重新执行npm install；
- 若仍失败，直接解压node_modules.zip（需确保压缩包与项目版本匹配）。
Java启动后访问404：
- 检查application-prod.yml中数据库配置是否正确；
- 确认前端文件已放到static目录下，且打包无报错。
Nginx反向代理接口失败：
- 检查proxy_pass末尾是否加/（正确：http://localhost:8000/）；
- 验证后端接口是否可访问（如http://IP:8000/api/user）。
Docker启动失败：
- 查看日志：docker-compose logs；
- 确保8000、3306端口未被占用。

总结

三种部署方式核心差异：集成部署将前端打包到Java Jar包，前后端共用8000端口；分离部署用Nginx托管前端（8001端口），反向代理后端接口；Docker部署一键启动所有服务，最适合快速上线。
关键配置点：npm镜像（解决依赖下载问题）、数据库地址（application-prod.yml）、Nginx反向代理（proxy_pass路径）。
排错优先级：先看日志（start1.log/nginx日志/docker日志）→ 验证端口是否开放 → 检查配置文件语法。

如果在部署过程中遇到具体报错（如npm、Java、Nginx/Docker的错误信息），可以告诉我具体报错内容，我会帮你定位并解决。