通过GitLab将Angular应用部署至OpenShift的步骤咨询

一、前置准备 #

• 拥有GitLab账号及项目创建权限，且目标项目的容器注册表已启用
• 具备OpenShift集群访问权限，可创建项目、部署资源
• Angular项目代码已托管至GitLab仓库（或准备好本地代码待推送）
• 本地安装docker（用于测试镜像构建）、oc（OpenShift命令行工具）

二、编写Angular应用的Dockerfile #

Angular为前端应用，需先构建静态文件，再用Nginx托管。在项目根目录创建Dockerfile：

# 阶段1：构建Angular生产包
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install --legacy-peer-deps
COPY . .
RUN npm run build -- --prod

# 阶段2：用Nginx部署静态文件
FROM nginx:alpine
COPY --from=builder /app/dist/<你的Angular项目名称> /usr/share/nginx/html
# 替换Nginx配置以支持Angular HTML5路由
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

同时在项目根目录创建nginx.conf，解决路由跳转问题：

server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

三、配置GitLab容器注册表 #

• 登录GitLab进入目标项目，左侧菜单选择Packages and registries > Container registry，记录注册表地址（格式通常为registry.gitlab.com/<用户名>/<项目名>）
• 确认项目Settings > Repository中，容器注册表处于启用状态（默认开启）

四、配置GitLab CI/CD流水线 #

在项目根目录创建.gitlab-ci.yml，定义镜像构建、推送、OpenShift部署流程：

stages:
  - build
  - deploy

# 构建并推送镜像到GitLab注册表
build-image:
  stage: build
  image: docker:latest
  services:
    - docker:dind
  variables:
    IMAGE_TAG: $CI_REGISTRY_IMAGE:$CI_COMMIT_SHORT_SHA
  before_script:
    - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY
  script:
    - docker build -t $IMAGE_TAG .
    - docker push $IMAGE_TAG

# 部署镜像到OpenShift
deploy-to-openshift:
  stage: deploy
  image: quay.io/openshift/origin-cli:latest
  before_script:
    - oc login --token=$OPENSHIFT_TOKEN --server=$OPENSHIFT_SERVER
    - oc project $OPENSHIFT_PROJECT
  script:
    - |
      # 检查是否已有部署，存在则更新镜像，不存在则创建新部署
      if oc get deployment angular-app-deploy; then
        oc set image deployment/angular-app-deploy angular-app=$IMAGE_TAG
      else
        oc new-app $IMAGE_TAG --name=angular-app-deploy
        # 暴露服务为Route，提供外部访问地址
        oc expose service/angular-app-deploy --port=80
      fi
  only:
    - main # 仅在main分支推送时触发部署

在GitLab项目的Settings > CI/CD > Variables中添加以下保密变量：

• OPENSHIFT_SERVER：OpenShift集群API地址（例如https://api.cluster.example.com:6443）
• OPENSHIFT_TOKEN：OpenShift登录令牌（通过oc whoami -t命令获取）
• OPENSHIFT_PROJECT：目标OpenShift项目名称

五、OpenSide优化配置（可选） #

• 自定义路由域名：编辑Route资源的spec.host字段，设置自定义域名
• 资源限制：给Deployment添加资源配额，避免资源占用过高

  resources:
    requests:
      cpu: "100m"
      memory: "128Mi"
    limits:
      cpu: "500m"
      memory: "256Mi"
  

• 健康检查：给容器配置存活/就绪探针，确保应用状态正常

  livenessProbe:
    httpGet:
      path: /
      port: 80
    initialDelaySeconds: 30
    periodSeconds: 10
  readinessProbe:
    httpGet:
      path: /
      port: 80
    initialDelaySeconds: 5
    periodSeconds: 5
  

六、测试验证 #

• 推送Angular代码到GitLab的main分支，触发CI流水线
• 查看GitLabCI/CD > Pipelines，确认build、deploy阶段执行成功
• 登录OpenShift控制台，检查Deployment、Pod、Service、Route状态是否正常
• 访问Route的外部域名，验证Angular应用是否正常加载

内容的提问来源于stack exchange，提问作者Yatharth Nigam