This commit is contained in:
编码猿
192
README.md
Normal file
192
README.md
Normal file
@@ -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 的代码
|
||||
- 案例: /
|
||||
Reference in New Issue
Block a user