如何通过Drone Pipeline实现React项目本地容器化部署？

数据老陈

2026-8-22

问题描述

我需要实现的目标：代码提交到本地Git服务器（Gitea）后，通过Drone Pipeline完成React项目的测试、构建，并部署到同一本地服务器。
限制条件：

我对React和Pipeline经验有限
所有服务（Gitea、Drone等）必须本地部署
遵循KISS原则，优先用单个Pipeline在代码推送时完成构建、部署，同时停止旧容器
看过需要推送镜像到Docker Registry的指南，但不知道怎么落地

当前进展：已经完成React项目的构建步骤，但不清楚部署环节该推进。当前的.drone.yml配置如下：

# .drone.yml
kind: pipeline
type: docker
name: example-build
trigger:
  branch:
    - master
  event:
    - push
steps:
  - name: build-static-files
    image: node:latest
    commands:
      - pwd
      - whoami
      - ls -al /drone
      - ls -al /drone/src
      - npm i socket.io-client @types/socket.io-client
      - chmod 777 -R ./node_modules/
      - npm run build

解决方案

既然要遵循KISS原则，且你经验有限，没必要折腾额外的Docker Registry。直接通过让Drone挂载本地Docker套接字的方式，在Pipeline里直接操作服务器上的Docker，一步完成构建镜像、停旧容器、启新容器的流程。

1. 调整Drone Runner配置

确保你的Drone Docker Runner挂载了服务器的/var/run/docker.sock，这样Pipeline里的步骤能直接调用服务器的Docker命令。如果是用Docker部署的Drone Runner，启动命令要加这个挂载参数：

-v /var/run/docker.sock:/var/run/docker.sock

2. 完善`.drone.yml`配置

更新配置，加入测试、构建镜像、部署的步骤。这里用nginx做静态文件服务器，把React构建后的build目录放到nginx容器里，完整配置如下：

kind: pipeline
type: docker
name: react-test-build-deploy
trigger:
  branch:
    - master
  event:
    - push

steps:
  # 步骤1：安装依赖并运行测试（没有测试脚本的话可以注释掉）
  - name: run-tests
    image: node:latest
    commands:
      - npm install
      - npm run test

  # 步骤2：构建React静态文件，同时保存产物供后续步骤用
  - name: build-static-files
    image: node:latest
    commands:
      - npm install socket.io-client @types/socket.io-client
      - npm run build
    volumes:
      - name: build-output
        path: /drone/src/build

  # 步骤3：基于nginx构建本地Docker镜像
  - name: build-docker-image
    image: docker:latest
    volumes:
      - name: docker-sock
        path: /var/run/docker.sock
      - name: build-output
        path: /drone/src/build
    commands:
      # 自动生成简单的Dockerfile（提前在项目根目录建好的话可以跳过这段）
      - |
        cat > /drone/src/Dockerfile <<EOF
        FROM nginx:alpine
        COPY build/ /usr/share/nginx/html/
        EXPOSE 80
        EOF
      # 构建本地镜像，标签用项目名+latest就行
      - docker build -t react-app:latest /drone/src

  # 步骤4：停止旧容器，启动新容器
  - name: deploy-to-server
    image: docker:latest
    volumes:
      - name: docker-sock
        path: /var/run/docker.sock
    commands:
      # 停止并删除旧容器，加|| true避免容器不存在时报错中断流程
      - docker stop react-app-container || true
      - docker rm react-app-container || true
      # 启动新容器，把服务器的8080端口映射到容器的80（可自行修改端口）
      - docker run -d --name react-app-container -p 8080:80 react-app:latest

# 定义共享卷：传递构建产物、访问Docker套接字
volumes:
  - name: build-output
    temp: {}
  - name: docker-sock
    host:
      path: /var/run/docker.sock

3. 关键细节说明

测试步骤：如果你的React项目还没写测试脚本，直接把这个步骤注释掉就行，后续有需要再补。
Dockerfile自定义：如果需要自定义nginx配置（比如路由规则、跨域设置），可以提前在项目根目录创建好Dockerfile和nginx.conf，删掉自动生成Dockerfile的那段命令。
端口与命名：把-p 8080:80里的8080改成你服务器要对外暴露的端口；react-app（镜像名）和react-app-container（容器名）可以换成你的项目名称，避免冲突。
权限问题：如果Drone操作Docker时提示权限错误，要确保Drone Runner的用户属于服务器的docker组，或者直接用root权限运行Runner。

4. 验证流程

把更新后的.drone.yml提交到Gitea的master分支
打开Drone面板查看Pipeline运行状态
运行完成后，访问http://<你的服务器IP>:8080，确认React项目正常加载

这样整个流程用单个Pipeline完成了测试、构建、部署，完全符合KISS原则，不需要额外的Registry，所有操作都在本地服务器完成。

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