如何通过GitHub Action构建Nginx反向代理镜像并推送至Docker仓库

一、核心文件准备 #

首先需要在项目根目录创建3个关键文件，用于构建包含Nginx反向代理的Docker镜像（分两种部署场景，按需选择）

场景1：前后端同镜像部署（Nginx + NestJS后端）

适合小型项目，单镜像包含前端静态资源、Nginx代理和后端服务

1. Dockerfile

# 多阶段构建：复用已完成的前后端构建产物
FROM node:18-alpine AS builder
WORKDIR /app
# 复制Workflow中已构建好的产物
COPY ./WEB/dist /app/web-dist
COPY ./BACKEND/dist /app/backend-dist

# 最终镜像：基于Nginx，集成后端运行环境
FROM nginx:alpine
# 安装Node.js用于运行NestJS后端
RUN apk add --no-cache nodejs npm

# 复制前端静态资源到Nginx默认目录
COPY --from=builder /app/web-dist /usr/share/nginx/html
# 复制后端产物到容器指定路径
COPY --from=builder /app/backend-dist /app/backend
# 复制Nginx代理配置
COPY nginx.conf /etc/nginx/conf.d/default.conf
# 复制启动脚本（同时启动后端和Nginx）
COPY start.sh /app/start.sh
RUN chmod +x /app/start.sh

# 暴露端口（Nginx用80，后端默认3000）
EXPOSE 80 3000

# 启动服务
CMD ["/app/start.sh"]

2. nginx.conf（反向代理配置）

server {
    listen 80;
    server_name localhost;

    # 前端SPA路由处理：适配Vue.js的history模式
    location / {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }

    # 后端API路由转发
    location /api {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

3. start.sh（多进程启动脚本）

#!/bin/sh
# 后台启动NestJS后端
cd /app/backend && npm start &
# 前台启动Nginx（保持容器运行）
nginx -g "daemon off;"

场景2：前后端分离部署（仅Nginx + 前端）

适合微服务架构，后端单独部署，Nginx仅做前端静态服务和API转发

简化版Dockerfile

FROM nginx:alpine
# 复制前端静态资源
COPY ./WEB/dist /usr/share/nginx/html
# 复制反向代理配置（proxy_pass指向后端独立服务地址，如http://backend-service:3000）
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

二、Workflow扩展：添加Docker构建与推送步骤 #

在你已有的Workflow代码基础上，新增一个依赖于test-and-build的Job，仅在main分支推送时执行镜像构建和推送：

name: CI/CD Pipeline

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  test-and-build:
    # 这里保留你已完成的测试、构建、上传产物步骤
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      # ... 你的前端测试、构建步骤
      # ... 你的后端测试、构建步骤
      - name: Upload frontend dist
        uses: actions/upload-artifact@v4
        with:
          name: web-dist
          path: ./WEB/dist
      - name: Upload backend dist
        uses: actions/upload-artifact@v4
        with:
          name: backend-dist
          path: ./BACKEND/dist

  # 新增Docker构建推送Job
  docker-build-push:
    needs: test-and-build
    runs-on: ubuntu-latest
    # 仅在main分支推送时执行（PR无需推送镜像）
    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
    steps:
      - uses: actions/checkout@v4

      # 下载之前保存的前后端构建产物
      - name: Download frontend dist
        uses: actions/download-artifact@v4
        with:
          name: web-dist
          path: ./WEB/dist
      - name: Download backend dist
        uses: actions/download-artifact@v4
        with:
          name: backend-dist
          path: ./BACKEND/dist

      # 登录Docker仓库（以Docker Hub为例，如需GHCR可替换配置）
      - name: Login to Docker Hub
        uses: docker/login-action@v3
        with:
          username: ${{ secrets.DOCKER_HUB_USERNAME }}
          password: ${{ secrets.DOCKER_HUB_ACCESS_TOKEN }}

      # 初始化Docker Buildx（支持多平台构建）
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v3

      # 构建并推送镜像
      - name: Build and push Docker image
        uses: docker/build-push-action@v5
        with:
          context: .
          push: true
          # 镜像标签：commit哈希 + latest
          tags: |
            ${{ secrets.DOCKER_HUB_USERNAME }}/your-project-name:${{ github.sha }}
            ${{ secrets.DOCKER_HUB_USERNAME }}/your-project-name:latest
          # 启用GitHub缓存，加速构建
          cache-from: type=gha
          cache-to: type=gha,mode=max

三、关键配置说明 #

1. GitHub Secrets配置：
   在仓库的Settings > Secrets and variables > Actions中添加以下密钥：

   • DOCKER_HUB_USERNAME：Docker Hub用户名
   • DOCKER_HUB_ACCESS_TOKEN：Docker Hub生成的访问令牌（非密码）
     若使用GitHub Container Registry（GHCR），则替换登录步骤为：

   - name: Login to GHCR
     uses: docker/login-action@v3
     with:
       registry: ghcr.io
       username: ${{ github.actor }}
       password: ${{ secrets.GITHUB_TOKEN }}
   

2. 镜像标签策略：
   使用github.sha作为唯一标签（对应每次提交的哈希值），同时保留latest标签指向最新版本，方便部署时选择特定版本或最新版本。

3. 缓存优化：
   通过cache-from和cache-to启用GitHub Actions缓存，避免重复下载依赖，大幅缩短Docker构建时间。

内容的提问来源于stack exchange，提问作者Kardier