Docker 部署前端（Nginx)
文章目录
- 部署 Nginx
- 【step 1】访问 [docker hub](https://hub.docker.com/) 搜索要部署的中间件
- 【step 2】点击搜索出来的第一个结果
- 【step 3】 复制拉取镜像代码
- 【step 4】在服务器中拉取镜像
- 修改配置
- 打包部署
- 【step 1】自定义`pure-build`命令
- 【step 2】执行 `pure-build`命令，执行打包构建
- 【step 3】编写 `nginx.conf` 文件
- 【step 4】创建并启动 nginx 容器
- 【step 5】验证部署是否成功
部署 Nginx
【step 1】访问 docker hub 搜索要部署的中间件
【step 2】点击搜索出来的第一个结果
【step 3】 复制拉取镜像代码
【step 4】在服务器中拉取镜像
docker pull nginx
拉取镜像成功之后开始部署前端代码。
修改配置
线上的前端需要请求线上的后端接口，所以需要修改 request.ts 文件中的请求地址为线上：
// 区分开发和生产环境
const DEV_BASE_URL = "http://localhost:8123";
const PROD_BASE_URL = "http://服务器IP地址";
// 创建 Axios 实例
const myAxios = axios.create({
baseURL: PROD_BASE_URL,
timeout: 10000,
withCredentials: true,
});
打包部署
【step 1】自定义pure-build命令
参考 Vite 官网，在 package.json文件中定义 pure-build命令：
{
"scripts": {
"dev": "vite",
"pure-build": "vite build",
"build": "run-p type-check "build-only {@}" --",
}
}
明明已经有 build命令，而自己定义 pure-build命令的原因是因为脚手架内置的 build命令会执行类型检查，如果项目代码中有任何类型不规范的地方，都会导致打包失败！
【step 2】执行 pure-build命令，执行打包构建
注意，如果 Node.js 版本较低，会构建失败，这时可以到官网安装更新的版本，如 v20.17.0 等长期支持版本。
构建成功后，可以得到用于部署的静态文件 dist目录：
将 dist目录下的所有文件上传到服务器上（可以新建一个 存放项目前端的文件夹目录）。文件较多时，建议先在本地压缩，上传压缩包到服务器后再解压。
【step 3】编写 nginx.conf 文件
worker_processes 1;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
listen 5173; # 将这里改为前端访问端口
server_name 666.66.66.666; # 将这里改为服务器ip
# 主路径配置（SPA 支持）
location / {
root /usr/share/nginx/html;
index index.html;
try_files $uri $uri/ /index.html;
}
# 静态资源缓存
location ~* .(js|css|png|jpg|svg|ico)$ {
root /usr/share/nginx/html;
add_header Cache-Control "public, max-age=31536000, immutable";
try_files $uri =404;
}
# 后端 API 代理
location /api {
rewrite ^/api(/.*)$ $1 break;
proxy_pass http://666.66.66.666:8645; # 将这里改为后端访问地址
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_cookie_path / /api;
proxy_pass_header Set-Cookie;
proxy_connect_timeout 60s;
proxy_read_timeout 60s;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
}
注解版：
# ==================================================
# Nginx 核心配置模板（前后端分离项目）
# 作者：您的名字 | 最后更新：YYYY/MM/DD
# ==================================================
# --------------------------
# 全局配置
# --------------------------
worker_processes auto; # 自动根据 CPU 核心数分配工作进程（生产环境建议设为 CPU 核心数）
events {
worker_connections 1024; # 单个工作进程的最大并发连接数
multi_accept on; # 高并发优化：一次性接受所有新连接
}
# --------------------------
# HTTP 模块配置
# --------------------------
http {
# 基础 MIME 类型配置（必须用绝对路径）
include /etc/nginx/mime.types;
default_type application/octet-stream; # 默认二进制流类型（避免浏览器误判）
# 性能优化参数
sendfile on; # 启用高效文件传输模式
tcp_nopush on; # 减少网络报文段数量
tcp_nodelay on; # 禁用 Nagle 算法（降低延迟）
keepalive_timeout 65; # 长连接超时时间（秒）
# --------------------------
# 服务器配置（每个项目一个 server 块）
# --------------------------
server {
# 监听端口和域名/IP（按需修改）
listen 5173; # 前端访问端口（可改为 80/443）
server_name 666.66.66.666; # 域名或服务器 IP（生产环境建议用域名）
# --------------------------
# 前端静态资源配置（SPA 项目必需）
# --------------------------
location / {
root /usr/share/nginx/html; # 前端构建产物目录（Docker 挂载路径）
index index.html; # 入口文件名称（通常为 index.html）
# SPA 路由处理：解决刷新 404 问题
try_files $uri $uri/ /index.html;
}
# --------------------------
# 静态资源缓存配置（CSS/JS/图片等）
# --------------------------
location ~* .(js|css|png|jpg|jpeg|svg|ico|woff2?)$ {
root /usr/share/nginx/html;
# 缓存控制（按需调整 max-age）
add_header Cache-Control "public, max-age=31536000, immutable";
# 防止找不到文件时回退到 index.html
try_files $uri =404;
}
# --------------------------
# 后端 API 代理配置（按需修改）
# --------------------------
location /api {
# 路径重写：移除 /api 前缀（根据后端实际情况调整）
rewrite ^/api(/.*)$ $1 break;
# 后端服务地址（支持容器名或 IP:Port）
proxy_pass http://666.66.66.666:8645;
# 请求头传递（确保后端获取真实客户端信息）
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;
# Cookie 路径转换（解决跨路径会话问题）
proxy_cookie_path / /api;
# 超时设置（按后端性能调整）
proxy_connect_timeout 60s;
proxy_read_timeout 60s;
proxy_send_timeout 60s;
}
# --------------------------
# 错误页面配置
# --------------------------
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html; # 错误页存放目录
internal; # 禁止直接访问错误页
}
}
}
将 nginx.conf文件放到与 dist 文件夹的相同目录下，这两个文件一会使用文件路径挂载到nginx中。
【step 4】创建并启动 nginx 容器
创建并启动 nginx 容器，挂载 dist 和 nginx.conf 文件到 nginx 中
docker run -d /
--name 容器名 /
-p 前端接口:映射接口 /
-v 前端dist文件路径:/usr/share/nginx/html /
-v nginx.conf文件路径:/etc/nginx/nginx.conf /
镜像名:镜像版本
如：
docker run -d /
--name nginx /
-p 5173:5173 /
-v /root/colla-graph/frontend/dist:/usr/share/nginx/html /
-v /root/colla-graph/frontend/nginx.conf:/etc/nginx/nginx.conf /
nginx:latest
【step 5】验证部署是否成功
浏览器中访问前端地址
http://服务器IP地址:5173
如：http://666.66.66.666:5173
完成部署！
