Docker 部署前端之 CRA 版

另外,还有Docker 部署前端之简单版

配置文件概述

Docker

CI

npm scripts

{
  "scripts": {
    // 通过 ossutil 上传至 OSS
    "oss:cli": "",
    // 通过 rclone 上传至 OSS
    "oss:rclone": "",
    // 通过脚本命令上传至 OSS
    "oss:script": "node scripts/uploadOSS.mjs",
    // 通过脚本命令与定时任务自动清理冗余的 OSS 资源
    "oss:prune": "node scripts/deleteOSS.mjs"
  },
}

简单版

此版本,已解决了构建缓存,并通过多阶段构建。

$ docker-compose up --build simple

路由修复版

此版本,通过 nginx.conf 解决了客户端路由的问题。

$ docker-compose up --build route

CDN/OSS 版

此版本,将静态咨询传至 OSS,此时需要提供两个环境变量: ACCESS_KEY_IDACCESS_KEY_SECRET

$ docker-compose up --build oss

Preview 版

当往分支 feature-xxx 提交代码时,将会自动部署一个供该分支测试的地址: feature-xxx.cra.shanyue.tech

Preview

$ cat preview.docker-compose.yaml | COMMIT_REF_NAME=$(git rev-parse --abbrev-ref HEAD) envsubst > temp.docker-compose.yaml

$ docker-compose -f temp.docker-compose.yaml up --build

Stop Preview

$ cat preview.docker-compose.yaml | COMMIT_REF_NAME=$(git rev-parse --abbrev-ref HEAD) envsubst > temp.docker-compose.yaml

$ docker-compose stop

kubernetes 版

$ kubectl apply -f k8s-app.yaml

k8s Preview 版

$ cat k8s-preview-app.yaml | COMMIT_REF_NAME=$(git rev-parse --abbrev-ref HEAD) envsubst > temp.k8s-app.yaml

$ kubectl apply -f temp.k8s-app.yaml