项目: react-oss 开始一个项目

用 react-oss 开始一个项目，一套用于 aliyun oss 的 gitlab ci 解决方案

创建项目 casdb-frontend

Create project by gitlab

准备域名

• casdb-frontend.beta.saybot.net
• casdb-frontend.saybot.net

准备oss-info

• 配置 gitlab-ci.yml 文件
• 准备 aliyun-cli 文件

利用 glab-preset 配置项目

• 配置 ALI_OSS 相关环境变量
• 配置 YARN_REGISTRY 相关环境变量

自己电脑上安装 gtc 工具

用来管理发版信息，命令: gtc

• https://github.com/afeiship/glab-trigger-cli

npm i -g @jswork/glab-trigger-cli

.gitlab-ci.yml 基本配置

include:
  # use frontend-ci
  - project: aric.zheng/frontend-ci
    ref: master
    file: dist/templates/react-oss/main.yml

variables:
  BUCKET_CONTEXT: biotech-site-predict-frontend/casdb-frontend

添加 .env.production 变量

修改 public_path，保证 oss 能通过路径找到

下面路径中 casdb-frontend 根据项目改变，其它部分为固定写法。

PUBLIC_URL=.

添加 cmd-env 脚本

• cmd-env 安装
• cmd-env 配置
• cmd-env 添加到 react-scripts 运行脚本

最终项目的地址为

• https://casdb-frontend.saybot.net/casdb-frontend/production/index.html
• https://casdb-frontend.beta.saybot.net/casdb-frontend/beta/index.html

gtc 常用场景说明

• 更多 gtc 使用: https://js.work/works/750d6aa53897e

场景	备注
发布beta环境	使用 @beta 命令
发布production环境	使用 @production 命令
有node_modules 变化	使用 @cache 命令
仅将 latest 更新到对应环境	使用 upload-* 相关命令

可改进的点

• yarn 缓存
• 图片等资源文件中的 public_path: ENV_NAME 未替换问题 - 已经解决(根本不需要ENV_NAME)
• source_map 默认不用上传，必要时间再上传?
• 定时/手动更新 node_modules 任务(@cache指令)

用 yeoman 脚手架

• 添加 .gitlab-ci.yml 文件
• 添加 .env-cmdrc.js 文件及基本配置
• 添加 deps/devDeps/scripts 命令
• 添加 env.production 环境变量 PUBLIC_PATH 配置

yo @jswork/gitlab

参考

• https://git.saybot.net/aric.zheng/frontend-ci
• https://github.com/afeiship/glab-trigger-cli
• https://github.com/afeiship/generator-gitlab