前言这是本系列的终篇也是很多人在第一次部署个人全栈项目时踩坑最多、最容易令人绝望的一个环节 —— 前端打包部署。在本地开发 Vue/Vite 或 React 时我们在request.js里写一个http://localhost:8080/api就觉得高枕无忧了。但一把构建丢到服务器上才猛然发现接口死活都不通抛出ERR_CONNECTION_REFUSED或是 CORS 跨域错误。而且在国内服务器经常遇到npm install卡死抛错ETIMEDOUT。这篇博客我就带大家一一跨越这些“致命天坑”使用最佳实践前端多阶段构建 Nginx 静态驱动 Nginx 反向代理解决跨域连通。️ 第一坑国内构建npm install超时天坑如果你的项目是在阿X云、腾X云等国内机房服务器里构建的不要想着直接npm i一定要在 Dockerfile 里配置国内强力镜像及代理。针对由于网络不好引发的依赖丢失比如经常发现 vite 构建丢了依赖可以在frontend/vue/Dockerfile这么写# ---- 阶段 1构建阶段 ---- FROM docker.m.daocloud.io/node:18-alpine AS build WORKDIR /app # 先单独拷贝打包信息利用Docker缓存机制 COPY package.json package-lock.json* ./ # 【关键配置】设置 npm 环境变量使用国内源进行极速下载 ENV NPM_CONFIG_REGISTRYhttps://registry.npmmirror.com/ # 如果出现 npm gyp 或编译依赖问题安装 python 与 make (可选看项目库) # RUN apk add --no-cache python3 make g # 强制安装避免警告造成的意外失败 RUN npm install --productionfalse --omitdevfalse --loglevel verbose # 规避偶发的 vite 或 rollup 二进制文件缺失 RUN npm install -g vite4.5.14 # 拷贝全部源码 COPY . . # 通过传参覆盖内置环境变量使得所有 axios api 配置变成空前缀 (下面重点讲) ARG VITE_API_BASE_URL ENV VITE_API_BASE_URL${VITE_API_BASE_URL} # 使用 npx 显式打包避免软链丢失引起的 command not found 错误 RUN npx vite build # ---- 阶段 2运行阶段(Nginx) ---- FROM docker.m.daocloud.io/nginx:alpine # 将产物转移进 Nginx 默认目录 COPY --frombuild /app/dist /usr/share/nginx/html # 覆盖我们的专属 Nginx 配置 COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 80 CMD [nginx, -g, daemon off;]⚠️ Linux 的大小写敏感天坑这里经常会面临一个很容易忽视的报错本地 Windows 下你从/components/Layout/导入了一个文件但在目录里文件夹叫/components/layout/这在本地是没问题的但因为基于alpineLinux 的容器是严格区分大小写的打包直接就会抛出Failed to resolve import的死循环中一定去你的源代码里检查大小写匹配 第二招Nginx 配置与动态反向代理为了不让我们的浏览端用户客户端直接访问 SpringBoot 跨域灾难我们直接用前端的同一个服务 Nginx 拦截对/api开头的请求然后转发到刚才的中篇的容器里。在frontend/vue/nginx.conf编写server { listen 80; server_name localhost; # 这里处理单页应用的路由回退如果使用 Vue Router 的 history 模式必写这部分 location / { root /usr/share/nginx/html; index index.html index.htm; try_files $uri $uri/ /index.html; } # Nginx 拦截 /api 动态反向代理到局域网内的后端容器 location /api/ { # 注意此处的 project001-backend 是 Docker-compose 的服务名 proxy_pass http://project001-backend:8080/api/; 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; } # 代理 /uploads 处理静态文件的回放上传 location /uploads/ { proxy_pass http://project001-backend:8080/uploads/; } } 最恐怖神坑写死的默认localhost:8080导致拒收连接如果你部署完发现页面出来了但是点击登录控制台报错ERR_CONNECTION_REFUSED http://localhost:8080/api/auth/login。不要去服务器上找 8080 这个端口由于前端跑在客户浏览器里也就是你的个人电脑游览器而不是云主机它拼装并去请求你“个人电脑”的 8080 端口那它怎么可能连的上远在云服务器上的真实后端呢最佳解决方案检查前端源码里的src/api/request.js或者 Vite 配置.env.production绝对不能使用http://localhost:8080做为保底参数将前端请求配置改为baseURL: import.meta.env.VITE_API_BASE_URL || 也就是相对路径。结合 Docker-compose 参数project001-frontend:build:context:./frontend/vueargs:# 在这里把前缀设为空编译出来的 JS 因为前缀空默认会打往本域的 /api/...# 然后本域的 80 Nginx 就会通过反向代理吃掉它扔给后端VITE_API_BASE_URL:container_name:project001-frontendports:-80:80最后遇到缓存问题即便部署对了务必在 Chrome 浏览器点右键强制清除缓存并硬性重新加载浏览器。前端旧的打包 JS 带毒太严重。 最后One-Command Deploy当你排清了上述坑此时在你的服务器项目根目录只需要轻轻敲下一句dockerrm-f$(dockerps-aq)dockercompose up-d--build然后甩出你的这台虚拟机的公网IP发给小伙伴“哎朋友来看看我刚上线的全栈系统爽不爽”一切就这么完成了完结撒花。欢迎点赞收藏评论这是我从 0 到 1 上线真实项目的泣血总结希望这套体系能直接助你拿下 Offer。
从零开始！Vue3+SpringBoot前后端分离项目Docker部署实战（下）：Vue前端Nginx反代与致命坑点盘点
前言这是本系列的终篇也是很多人在第一次部署个人全栈项目时踩坑最多、最容易令人绝望的一个环节 —— 前端打包部署。在本地开发 Vue/Vite 或 React 时我们在request.js里写一个http://localhost:8080/api就觉得高枕无忧了。但一把构建丢到服务器上才猛然发现接口死活都不通抛出ERR_CONNECTION_REFUSED或是 CORS 跨域错误。而且在国内服务器经常遇到npm install卡死抛错ETIMEDOUT。这篇博客我就带大家一一跨越这些“致命天坑”使用最佳实践前端多阶段构建 Nginx 静态驱动 Nginx 反向代理解决跨域连通。️ 第一坑国内构建npm install超时天坑如果你的项目是在阿X云、腾X云等国内机房服务器里构建的不要想着直接npm i一定要在 Dockerfile 里配置国内强力镜像及代理。针对由于网络不好引发的依赖丢失比如经常发现 vite 构建丢了依赖可以在frontend/vue/Dockerfile这么写# ---- 阶段 1构建阶段 ---- FROM docker.m.daocloud.io/node:18-alpine AS build WORKDIR /app # 先单独拷贝打包信息利用Docker缓存机制 COPY package.json package-lock.json* ./ # 【关键配置】设置 npm 环境变量使用国内源进行极速下载 ENV NPM_CONFIG_REGISTRYhttps://registry.npmmirror.com/ # 如果出现 npm gyp 或编译依赖问题安装 python 与 make (可选看项目库) # RUN apk add --no-cache python3 make g # 强制安装避免警告造成的意外失败 RUN npm install --productionfalse --omitdevfalse --loglevel verbose # 规避偶发的 vite 或 rollup 二进制文件缺失 RUN npm install -g vite4.5.14 # 拷贝全部源码 COPY . . # 通过传参覆盖内置环境变量使得所有 axios api 配置变成空前缀 (下面重点讲) ARG VITE_API_BASE_URL ENV VITE_API_BASE_URL${VITE_API_BASE_URL} # 使用 npx 显式打包避免软链丢失引起的 command not found 错误 RUN npx vite build # ---- 阶段 2运行阶段(Nginx) ---- FROM docker.m.daocloud.io/nginx:alpine # 将产物转移进 Nginx 默认目录 COPY --frombuild /app/dist /usr/share/nginx/html # 覆盖我们的专属 Nginx 配置 COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 80 CMD [nginx, -g, daemon off;]⚠️ Linux 的大小写敏感天坑这里经常会面临一个很容易忽视的报错本地 Windows 下你从/components/Layout/导入了一个文件但在目录里文件夹叫/components/layout/这在本地是没问题的但因为基于alpineLinux 的容器是严格区分大小写的打包直接就会抛出Failed to resolve import的死循环中一定去你的源代码里检查大小写匹配 第二招Nginx 配置与动态反向代理为了不让我们的浏览端用户客户端直接访问 SpringBoot 跨域灾难我们直接用前端的同一个服务 Nginx 拦截对/api开头的请求然后转发到刚才的中篇的容器里。在frontend/vue/nginx.conf编写server { listen 80; server_name localhost; # 这里处理单页应用的路由回退如果使用 Vue Router 的 history 模式必写这部分 location / { root /usr/share/nginx/html; index index.html index.htm; try_files $uri $uri/ /index.html; } # Nginx 拦截 /api 动态反向代理到局域网内的后端容器 location /api/ { # 注意此处的 project001-backend 是 Docker-compose 的服务名 proxy_pass http://project001-backend:8080/api/; 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; } # 代理 /uploads 处理静态文件的回放上传 location /uploads/ { proxy_pass http://project001-backend:8080/uploads/; } } 最恐怖神坑写死的默认localhost:8080导致拒收连接如果你部署完发现页面出来了但是点击登录控制台报错ERR_CONNECTION_REFUSED http://localhost:8080/api/auth/login。不要去服务器上找 8080 这个端口由于前端跑在客户浏览器里也就是你的个人电脑游览器而不是云主机它拼装并去请求你“个人电脑”的 8080 端口那它怎么可能连的上远在云服务器上的真实后端呢最佳解决方案检查前端源码里的src/api/request.js或者 Vite 配置.env.production绝对不能使用http://localhost:8080做为保底参数将前端请求配置改为baseURL: import.meta.env.VITE_API_BASE_URL || 也就是相对路径。结合 Docker-compose 参数project001-frontend:build:context:./frontend/vueargs:# 在这里把前缀设为空编译出来的 JS 因为前缀空默认会打往本域的 /api/...# 然后本域的 80 Nginx 就会通过反向代理吃掉它扔给后端VITE_API_BASE_URL:container_name:project001-frontendports:-80:80最后遇到缓存问题即便部署对了务必在 Chrome 浏览器点右键强制清除缓存并硬性重新加载浏览器。前端旧的打包 JS 带毒太严重。 最后One-Command Deploy当你排清了上述坑此时在你的服务器项目根目录只需要轻轻敲下一句dockerrm-f$(dockerps-aq)dockercompose up-d--build然后甩出你的这台虚拟机的公网IP发给小伙伴“哎朋友来看看我刚上线的全栈系统爽不爽”一切就这么完成了完结撒花。欢迎点赞收藏评论这是我从 0 到 1 上线真实项目的泣血总结希望这套体系能直接助你拿下 Offer。
