From 9049e435ddd8302670b8af60ea276af6c0862fc3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BC=96=E7=A0=81=E7=8C=BF?= Date: Tue, 7 Oct 2025 20:32:06 +0800 Subject: [PATCH] test --- .gitea/workflows/build.yml | 87 +++++++++++++++++ README.md | 192 +++++++++++++++++++++++++++++++++++++ act-runner.yml | 6 +- nginx.conf | 2 +- 4 files changed, 283 insertions(+), 4 deletions(-) create mode 100644 .gitea/workflows/build.yml create mode 100644 README.md diff --git a/.gitea/workflows/build.yml b/.gitea/workflows/build.yml new file mode 100644 index 0000000..de4e68c --- /dev/null +++ b/.gitea/workflows/build.yml @@ -0,0 +1,87 @@ +name: build and push + +on: + push: + branches: [ main ] + +jobs: + build-and-push: + runs-on: ubuntu-latest + + steps: + - name: 拉取最新代码 + uses: actions/checkout@v4 + + - name: 设置 Docker Buildx + uses: docker/setup-buildx-action@v3 + + - name: 登录到自己的 Docker 仓库 + uses: docker/login-action@v3 + with: + registry: ${{ vars.DOCKER_REGISTRY }} + username: ${{ secrets.DOCKERHUB_USERNAME }} + password: ${{ secrets.DOCKERHUB_TOKEN }} + + + - name: 构建并推送镜像 + uses: docker/build-push-action@v5 + with: + context: . + push: true + tags: | + ${{ vars.DOCKER_REGISTRY }}/${{ vars.DOCKER_IMAGE_NAME }}:latest + ${{ vars.DOCKER_REGISTRY }}/${{ vars.DOCKER_IMAGE_NAME }}:${{ github.sha }} + + + - name: 替换镜像标签为 github.sha + run: | + sed -i "s|{{IMAGE_TAG}}|${{ github.sha }}|g" ${{ vars.DOCKER_SWARM_YML }} + + - name: 上传 swarm.yml 到前端集群管理机 + uses: appleboy/scp-action@v1 + with: + host: ${{ vars.SSH_MANAGE }} + username: ${{ secrets.USERNAME }} + password: ${{ secrets.PASSWORD }} + port: ${{ vars.PORT }} + source: ${{ vars.DOCKER_SWARM_YML }} + target: ${{ vars.SSH_MANAGE_PATH }} + + - name: 登录前端集群，拉镜像 + uses: appleboy/ssh-action@v1 + with: + # 统一登录三台前端集群的linux，统一拉取刚推到仓库的最新镜像 + # 解决 Swarm 无法控制 工作机拉取镜像的问题！ + host: ${{ vars.SSH_HOST_LIST }} + sync: true + username: ${{ secrets.USERNAME }} + password: ${{ secrets.PASSWORD }} + port: ${{ vars.PORT }} + script: | + # 因为正在运行的镜像被占用了，所以下面命令无法删除，只能删除从前没在使用的老镜像 + # 然后拉取最新镜像，所有 服务器内部会有两个镜像：最新的，和上一个版本的镜像 + # 挺好的，保留上一版，前端出bug了，镜像可以退回去。如果不想保留上一版本 + # 那么需要在这里 先 docker stack rm 停止，等待5秒后再删除镜像即可 + # docker stack rm ${{ vars.DOCKER_IMAGE_NAME }} + # sleep 5 + # 同样的，如果用了这个代码，那么下面83，84行则之间注释即可！ + + # 删除该仓库的所有镜像 + docker images --format "{{.ID}}" ${{ vars.DOCKER_REGISTRY }}/${{ vars.DOCKER_IMAGE_NAME }} | xargs -r docker rmi -f + # 拉取刚打包的最新镜像 + docker pull ${{ vars.DOCKER_REGISTRY }}/${{ vars.DOCKER_IMAGE_NAME }}:${{ github.sha }} + + - name: 管理节点部署到 Swarm + uses: appleboy/ssh-action@v1 + with: + host: ${{ vars.SSH_MANAGE }} + sync: true + username: ${{ secrets.USERNAME }} + password: ${{ secrets.PASSWORD }} + port: ${{ vars.PORT }} + script: | + # 先停止之前的 swarm ，并等待5秒后，再重新运行，要不然用的还是之前老镜像 + docker stack rm ${{ vars.DOCKER_IMAGE_NAME }} + sleep 5 + # 切换到管理员，要不然没权限在服务器执行 docker 命令，部署到 Swarm 集群 + sudo docker stack deploy -c ${{ vars.SSH_MANAGE_PATH }}${{ vars.DOCKER_SWARM_YML }} ${{ vars.DOCKER_IMAGE_NAME }} diff --git a/README.md b/README.md new file mode 100644 index 0000000..abbacd6 --- /dev/null +++ b/README.md @@ -0,0 +1,192 @@ +192.168.139.172 +192.168.139.184 +192.168.139.186 + +# app-shared 共享资源模块（微前端模块） + +本模块已从整体项目中拆分出来，单独建立仓库来存储（实际公司开发本就如此），用于演示的微前端模块，主要实现商品相关功能。本案例演示中提供： + +- 调用 微前端 app-shared 模块 +- 调接口，获取商品首页的数据和展示 +- 调接口，点击商品列表进入商品详情页 + +## 运行 + +下面文档分为**开发**和**上线**两部分进行说明！**默认前端已经在电脑上安装过 Docker 环境！！** + +> 想要【开发阶段运行】，必须 先参考下面 【上线】-【任务1】配置好两个前端自己的环境变量文件！很简单！ + +### 开发 + +```bash +# 安装依赖 +npm install + +# 开发阶段 运行 项目 +# PS：注意此命令运行的项目，【无法】被其他 微前端模块 使用，仅用于本地独立开发，独立测试 +npm run dev +``` + +```bash +# 启动 实时打包 & 实时预览 +# PS：注意此命令运行的项目，【可以】被其他 微前端模块 调用，可用于本地开发和微前端联合开发 +npm run dep +``` + +### 上线 + +代码 到 仓库的 **main 分支** 后会触发 全程自动化，实现自动打包前端代码，构建镜像，自动部署到公司内网的Linux服务器集群中！ +提交到其他分支不触发自动化操作！具体什么规则，以 技术负责人 说的为准！请遵守规则！ + +**根目录核心文件说明** + +- `swarm.yml` - Docker Swarm 集群部署配置【根据需求改动】 +- `docker-compose.yml` - 开发阶段容器编排【可选，不要就删除】 +- `Dockerfile` - 打包构建前端代码为镜像【根据需求改动】 +- `nginx.conf` - 镜像内前端被访问的Nginx配置【根据需求改动】 +- `act-runner.yml` - Gitea Action 的 runner【根据需求改动】 + +## 前端工作 + +前期大致工作内容如下，改好后，以后就不用再动了，很简单： + +### 任务1: 编辑环境变量文件 + +主要修改两个环境变量文件 `.env.development`, `.env.production` 中的： + +```bash +# 找技术负责人要 +# 情况1: 【内网模块】填写 Nacos 内网 ip 或 域名 即可 +# 情况2: 【外网模块】填写 traefik 公网 ip 或 域名 即可 +# .env.development, .env.production 中 可以不一样！ +VITE_NACOS_ADDRESS=???? + +# 这个参数很重要，前端可以自定义填写，填写后不允许再改，填完给 技术负责人 即可 +# 微前端应用的名称，遵守 app-xxxxx +# .env.development, .env.production 中 必须一样！ +VITE_SERVER_NAME=app-??? +``` + +### 任务2: 确认或编辑 Dockerfile，nginx.conf，swarm.yml + +**Dockerfile 修改教程：** + +```bash +# 将 VITE_SERVER_NAME 替换为 上一步设置的 VITE_SERVER_NAME 的 数值 即可 +RUN npx vite build --base=/VITE_SERVER_NAME/ + +# 将 VITE_SERVER_NAME 替换为 上一步设置的 VITE_SERVER_NAME 的 数值 即可 +COPY --from=builder /app/dist /usr/share/nginx/html/VITE_SERVER_NAME +``` + +**nginx.conf 修改教程：** + +```bash +# 看仔细了，有 三处 VITE_SERVER_NAME 需要替换成 值！！ +location /VITE_SERVER_NAME/ { + alias /usr/share/nginx/html/VITE_SERVER_NAME/; + try_files $uri $uri/ /VITE_SERVER_NAME/index.html; + add_header 'Access-Control-Allow-Origin' '*'; + add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; + add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range'; + add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range'; +} +``` + +**swarm.yml 修改教程：** + +```bash +# 看仔细了，有 两处 VITE_SERVER_NAME 需要替换成 值！！ +services: + VITE_SERVER_NAME: + image: registry.bmycode.help/VITE_SERVER_NAME:{{IMAGE_TAG}} +``` + +### 任务3: 编辑 act-runner.yml + +act-runner.yml 是 Gitea Action 的核心，Gitea会将Job委托给Runner来运行，**所以我们前端本地必须要先运行 act-runner.yml 文件**，这样在我们提交代码的时候 Gitea Action 的自动构建才会运行！！ + +但是，运行 act-runner.yml 之前，需要先对 act-runner.yml 文件进行简单的配置： + +```bash +# 核心 需要改动的配置 +# 可以直接让 仓库 的管理员 给你把下面参数之间配置好，当然你也可以自己配 + +# GITEA_INSTANCE_URL=这个前端项目模块的 git仓库地址 +# 格式：协议://域名 即可，例如：https://git.bmycode.help 或 https://gitee.com 等 + +# 项目仓库首页-设置-Actions-Runner 右上角可复制令牌 +# GITEA_RUNNER_REGISTRATION_TOKEN=注册令牌，来源三选一：实例，组织，全存储库 +environment: + - GITEA_INSTANCE_URL=https://git.bmycode.help + - GITEA_RUNNER_REGISTRATION_TOKEN=WFiO5JDwz7CHnk7fMGJYMcSITU81CLXuI7Ofg10e +``` + +改好后，在**项目文件夹根目录**打开终端，通过下面命令运行 act-runner.yml 文件： + +```bash +docker-compose -f act-runner.yml up -d +``` + +```bash +# 运行后，如果 在 docker desktop 的容器中找到 名字叫：gitea-act-runner 的容器，查看日志： + +# 有下面这行，则表示 runner 成功启动！！docker desktop 可以关闭了或者放后台，不用管了！ +# level=debug msg="Successfully pinged the Gitea instance server" + +# 如果出问题了，找 技术负责人！ +``` + +到这一步，上线 配置已经搞完，很简单吧！剩下的，你提交代码到仓库就行，其他的就不用前端管了！！ + +## 注意 + +> **仓库的管理者**，需要开启 存储库 的 **Gitea Action** 并填入下面，才能想要实现前端提交代码自动化打包构建部署。 + +### 密钥： + +- DOCKERHUB_USERNAME + - 说明: docker私有仓库的用户名 + - 案例: admin + +- DOCKERHUB_TOKEN + - 说明: docker私有仓库密码 + - 案例: admin + +- PASSWORD + - 说明: 集群机器的ssh 密码，集群下所有机器密码一样 + - 案例: root + +- USERNAME + - 说明: 集群机器的ssh 用户名，集群下所有机器密码一样 + - 案例: root + +### 变量： + +- DOCKER_IMAGE_NAME + - 说明: 打包后的镜像名称（同下文的 VITE_SERVER_NAME 字段） + - 案例: app-product + +- DOCKER_REGISTRY + - 说明: docker仓库地址，只填域名部分 + - 案例: registry.bmycode.help + +- DOCKER_SWARM_YML + - 说明: Dcoker Swarm 集群部署文件名称，别改！ + - 案例: swarm.yml + +- PORT + - 说明: 集群机器的ssh 端口 + - 案例: 22 + +- SSH_HOST_LIST + - 说明: 集群机器的内网ip地址集合 + - 案例: 192.168.139.19,192.168.139.120,192.168.139.242 + +- SSH_MANAGE + - 说明: 集群管理机的ip地址 + - 案例: 192.168.139.19 + +- SSH_MANAGE_PATH + - 说明: 集群管理机存放swarm.yml文件的位置，如果修改了，需要改 .gitea/workflows/build.yml 的代码 + - 案例: / \ No newline at end of file diff --git a/act-runner.yml b/act-runner.yml index c0bc8bc..2f8a1d8 100644 --- a/act-runner.yml +++ b/act-runner.yml @@ -6,12 +6,12 @@ services: container_name: shared-act-runner restart: unless-stopped volumes: - - runner-vol:/data + - runner-shared:/data - /var/run/docker.sock:/var/run/docker.sock environment: - GITEA_INSTANCE_URL=https://git.bmycode.help - - GITEA_RUNNER_REGISTRATION_TOKEN=HReAwXfHVogolZk43yt380s7inKtoeHv0C0lVBt1 + - GITEA_RUNNER_REGISTRATION_TOKEN=EjGH6uxr0rIu84XCJBL0wAv5mfjiOXvfx5FV1pEX - GITEA_RUNNER_LABELS=ubuntu-latest:docker://docker.gitea.com/runner-images:ubuntu-latest volumes: - runner-vol: + runner-shared: diff --git a/nginx.conf b/nginx.conf index 82195bf..f9e60da 100644 --- a/nginx.conf +++ b/nginx.conf @@ -1,6 +1,6 @@ server { listen 80; - server_name *.ddd.com; + server_name _; location /app-shared/ {