当前位置：首页 > news >正文

【Docker+Nginx】前后端分离式项目部署（传统打包方式）

news 2025/9/15 5:41:29

介绍

将前后端分离项目部署到 Nginx 可以通过两种方式实现：直接部署和使用 Docker 容器化部署。下面将介绍直接打包部署的详细步骤。

步骤

1. 服务器上创建部署目录结构

（这里使用MobaXterm连接CentOS系统）

mkdir -p /opt/project/{frontend,backend,nginx/conf,nginx/logs}

2. 前端项目打包

以 Vue项目为例，（VScode按下Ctrl+`调出终端）在终端运行：

# Vue项目打包
npm run build

运行结果：

打包完成后会生成dist目录，包含所有静态资源（HTML/CSS/JS）。

将生成的dist目录下所有文件复制到服务器的/opt/project/frontend目录

3. 后端项目打包

以 Spring Boot 为例：

# 打包为JAR文件
mvn clean package "-Dmaven.test.skip=true"

运行结果：

生成的 JAR 文件通常在target目录下。

将生成的 JAR 文件复制到服务器的/opt/project/backend目录

4. Nginx 配置

在/opt/project/nginx/conf目录下touch创建nginx.conf文件：

编辑Nginx配置文件:

server {listen 80;server_name _;  # 允许所有IP/域名访问# 前端静态资源（指向你存放dist文件的目录）location / {root /opt/project/frontend/dist;  # 关键：匹配前端dist目录的实际路径index index.html;try_files $uri $uri/ /index.html;  # 解决SPA路由问题}# 后端API代理（根据后端部署方式选择）location /api/ {# 情况1：后端以Docker容器运行（假设容器名为backend）# proxy_pass http://backend:8080/api/;# 情况2：后端直接在Linux服务器上运行（非容器，推荐）proxy_pass http://192.168.1.128:8080/api/;  # 本地后端服务地址proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;}
}

注意：配置中的host.docker.internal是 Docker 提供的特殊 DNS，用于访问宿主机。如果不起作用，可以替换为宿主机的实际 IP 地址。

配置如图所示：

输入 :wq 保存并退出

注意：如果是这种手动打包部署项目，前后端分离的项目要解决跨域问题，即使你在Windows下成功运行，也要修改跨域设置，因为你在windows系统访问的是的的服务器地址（例如虚拟机的ifconfig显示的192.168.1.128）所以你要专门配置这个访问地址的跨域问题。如下图：

前端（nginx里已经对 /ai 进行了代理）：

// 相对路径，自动继承前端页面的域名（http://192.168.1.128）const response = await fetch(`/ai/chat?prompt=${encodeURIComponent(prompt)}`);

后端（确保前端发送请求由nginx代理到服务器地址，被后端接收，防止出现跨域问题）：

5. 启动 Nginx 容器

docker run -d \--name chatbot-nginx \-p 80:80 \# 前端文件挂载（你的dist目录）-v /opt/project/frontend/dist:/opt/project/frontend/dist \# Nginx配置文件挂载-v /opt/project/nginx/conf/nginx.conf:/etc/nginx/conf.d/chatbot.conf \# 日志目录挂载-v /opt/project/nginx/logs:/var/log/nginx \# 自动重启策略--restart always \nginx:stable-alpine

参数说明：

-d：后台运行容器
--name：指定容器名称
-p 80:80：端口映射，宿主机 80 端口映射到容器 80 端口
-v：目录挂载，将宿主机目录与容器内目录关联
--restart always：容器退出时自动重启

6. 启动后端服务

# 进入后端目录（确保在jar包所在目录）
cd /opt/project/backend# 启动服务（使用Java 17运行）
nohup java -jar chatbot-0.0.1-SNAPSHOT.jar --server.port=8080 &# 等待3-5秒后，检查服务是否启动
ps -ef | grep java | grep chatbot# 查看启动日志，确认是否成功
tail -f nohup.out

注意:JDK版本要一致 ! ! !

7. 验证部署

检查 Nginx 容器是否正常运行：

docker ps | grep 容器名

### 查看 Nginx容器日志：

### 访问服务器 IP 地址，验证前端是否正常显示(ifconfig或ip addr)

测试 API 接口，验证后端是否能正常响应

测试发现，出了些问题，原因是在windows上部署了Ollama，但在linux上没有部署Ollama

---------解决方法：让 Linux 后端能访问 Ollama 服务---------

a.在 Linux 服务器上部署 Ollama

通过 Docker 容器运行 Ollama（手动下载和拉取可能会出现版本不兼容需要更新操作系统，Docker容器化部署），容器内已包含所有依赖库，无需担心系统版本问题。

# 启动 Ollama 容器（映射 11434 端口，与默认端口一致；设置自动重启）
docker run -d \--name ollama \-p 11434:11434 \-v ollama_data:/root/.ollama \  # 挂载数据卷，持久化模型（删除容器后模型不丢失）--restart always \              # 服务器重启后自动启动容器ollama/ollama

b.验证容器是否正常启动

正常日志会包含 Listening on 127.0.0.1:11434，表示 Ollama API 已就绪。

c.在Docker容器内拉取模型(项目中使用的Windows部署的Ollama模型)

# 进入 Ollama 容器的命令行
docker exec -it ollama /bin/sh# 在容器内拉取模型（首次下载需等待，约 10GB，视网络速度而定）
ollama pull qwen3:0.6b# 拉取完成后，可验证模型是否存在（显示 qwen3:0.6b 即成功）
ollama list# 退出容器（输入 exit 回车）
exit

### 重启后端服务，对接 Docker 版 Ollama

# 1. 停止旧的后端进程（先找到 PID）
ps -ef | grep java | grep chatbot  # 输出类似：root  12977  ... java -jar ...
kill -9 12977  # 替换为实际的 PID# 2. 进入后端目录，重启服务
cd /opt/project/backend
nohup java -jar chatbot-0.0.1-SNAPSHOT.jar --server.port=8080 &# 3. 查看后端日志，确认无错误
tail -f nohup.out

### 测试大模型接口是否正常

用 curl 测试后端 /ai/chat 接口，确认能返回 AI 回复：

# 发送请求（中文“测试消息”已 URL 编码）
curl "http://localhost:8080/ai/chat?prompt=%E6%B5%8B%E8%AF%95%E6%B6%88%E6%81%AF"

### 测试 API 接口，验证后端是否能正常响应

8. 更新部署

更新前端

# 1. 将新的dist文件复制到/opt/project/frontend
# 2. 重启Nginx容器
docker restart project-nginx

更新后端

# 1. 停止当前服务
ps -ef | grep java | grep your-project.jar | awk '{print $2}' | xargs kill# 2. 复制新的JAR文件到/opt/project/backend# 3. 启动新服务
nohup java -jar your-project.jar --server.port=8080 &