从CoreOS推送镜像至私有GCR及Angular前端K8s CI/CD技术问询

CoreOS本身自带Docker环境，操作起来很直接，核心是搞定GCR的认证环节，具体步骤如下：

• 第一步，先在Google Cloud控制台创建一个服务账号，给它分配「容器注册表管理员」或者「存储对象创建者」权限，然后下载该账号的JSON密钥文件，用scp或其他工具把密钥传到你的CoreOS机器上，比如存到/home/core/gcr-key.json。
• 第二步，在CoreOS上执行Docker登录命令，用密钥完成GCR认证：

  docker login -u _json_key -p "$(cat /home/core/gcr-key.json)" https://gcr.io
  

  如果你的GCR在其他区域（比如美国、欧洲），把gcr.io换成对应域名即可，比如us.gcr.io、eu.gcr.io。
• 第三步，给本地镜像打上符合GCR格式的标签，格式为gcr.io/[你的GCP项目ID]/[镜像名称]:[标签]，示例：

  docker tag my-local-image:latest gcr.io/my-gcp-project/my-image:v1.0.0
  

• 最后一步，推送镜像到GCR：

  docker push gcr.io/my-gcp-project/my-image:v1.0.0
  

  推送完成后，你就能在GCP控制台的容器注册表页面看到这个镜像了。

既然你要用Bitnami的Nginx Chart，那推荐用多阶段构建的Dockerfile——既包含前端构建环境，又能生成轻量、适配Bitnami镜像的运行环境，具体内容和说明如下：

自定义Dockerfile示例 #

# 第一阶段：构建Angular前端（仅用于编译，不会出现在最终镜像）
FROM node:18-alpine AS builder

# 设置工作目录
WORKDIR /app

# 先复制依赖清单，利用Docker缓存优化构建速度
COPY package*.json ./
# 安装项目依赖（包括Gulp）
RUN npm install

# 复制整个项目代码到容器中
COPY . .

# 执行Gulp构建命令，生成压缩后的静态文件到output目录
RUN gulp build

# 第二阶段：生成最终运行镜像（基于Bitnami的Nginx镜像）
FROM bitnami/nginx:latest

# 从构建阶段复制编译好的静态文件到Bitnami Nginx的默认文档根目录
COPY --from=builder /app/output /opt/bitnami/nginx/html

# （可选）如果需要自定义Nginx配置，取消下面的注释并添加你的配置文件
# COPY ./custom-nginx.conf /opt/bitnami/nginx/conf/nginx.conf

关键细节解释 #

• 多阶段构建优势：第一阶段用Node镜像搞定依赖安装和Gulp编译，第二阶段只保留Bitnami Nginx和编译好的静态文件，最终镜像体积小、安全性更高。
• 缓存优化技巧：先复制package*.json再执行npm install，只要依赖没变化，Docker会缓存这一层，不用每次改代码都重新安装所有依赖，节省构建时间。
• 适配Bitnami镜像：Bitnami的Nginx镜像默认把静态文件放在/opt/bitnami/nginx/html，直接把编译好的output目录复制到这里，Nginx启动后就能直接服务你的Angular前端。
• 自定义配置选项：如果需要修改Nginx端口、启用gzip或添加其他规则，把你的配置文件复制到/opt/bitnami/nginx/conf/nginx.conf即可，后续也可以用Helm Chart挂载配置文件，更灵活。

构建镜像的命令 #

在你的Angular项目根目录执行：

docker build -t my-angular-frontend:latest .

之后你可以把这个镜像推送到私有仓库（比如前面的GCR），再在Helm Chart的values.yaml里指定这个镜像地址，就能完成部署了。

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