Docker+Nginx实战:前后端分离项目一站式部署指南,Ruby 安装 - Windows。

张开发
2026/4/7 1:37:15 15 分钟阅读

分享文章

Docker+Nginx实战:前后端分离项目一站式部署指南,Ruby 安装 - Windows。
DockerFile Nginx DockerCompose 部署前后端分离项目指南准备工作确保已安装 Docker 和 Docker Compose。项目结构应包含前端如 Vue/React和后端如 Spring Boot/Node.js代码并分别配置 Dockerfile。前端 Dockerfile 配置# 使用 Node 镜像构建前端 FROM node:16 as build-stage WORKDIR /app COPY package*.json ./ RUN npm install COPY . . RUN npm run build # 使用 Nginx 镜像部署静态资源 FROM nginx:stable-alpine COPY --frombuild-stage /app/dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 80后端 Dockerfile 配置# 以 Java 后端为例 FROM openjdk:11-jre-slim WORKDIR /app COPY target/*.jar app.jar EXPOSE 8080 ENTRYPOINT [java, -jar, app.jar]Nginx 反向代理配置创建nginx.conf文件处理跨域和路由server { listen 80; server_name localhost; location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://backend:8080; proxy_set_header Host $host; } }Docker Compose 整合创建docker-compose.yml定义多容器服务version: 3.8 services: frontend: build: context: ./frontend dockerfile: Dockerfile ports: - 80:80 depends_on: - backend backend: build: context: ./backend dockerfile: Dockerfile ports: - 8080:8080 environment: - SPRING_PROFILES_ACTIVEprod nginx: image: nginx:stable-alpine volumes: - ./nginx.conf:/etc/nginx/conf.d/default.conf ports: - 8000:80启动与验证构建并启动容器docker-compose up -d --build验证服务前端访问http://localhost:80后端接口测试http://localhost:8080/apiNginx 代理检查http://localhost:8000常见问题排查端口冲突修改docker-compose.yml中的端口映射。跨域问题确保 Nginx 配置中proxy_pass指向正确的后端服务名如backend:8080。静态资源 404检查前端构建产物是否复制到 Nginx 的/usr/share/nginx/html。通过以上步骤可实现前后端分离项目的高效容器化部署。https://raw.githubusercontent.com/fiadhay/2cp_dk88/main/README.mdhttps://github.com/joermida/up3_lr3dhttps://github.com/joermida/up3_lr3d/blob/main/README.mdhttps://raw.githubusercontent.com/joermida/up3_lr3d/main/README.mdhttps://github.com/gosy-cune/bc0_ncjg

更多文章