Gitlab CI 创建 angularjs和 .net 的容器镜像

这两天有个新的需求，需要在Gitlab里面配置两个子目录来存放不同的angularjs和.net的代码，然后各自生成对应的docker image。
基本结构是这样的，最外面有个.gitlab-ci.yml 文件，他同级的有两个目录。在这个外面的.gitlab-ci.yml里面循环调用子目录里面的.gitlab-ci.yml,实现二级目录的pipeline。

.gitlab-ci.yml
angularjs_project 
    - .gitlab-ci.yml
    -  Dockerfile
    -  other files..
dotnet_project
    - .gitlab-ci.yml
    - Dockerfile
    - other files..    

下面看看具体如何实现。

父目录

最外面的.gitlab-ci.yml

stages:
  - tag
  - child_pipeline

dotnet:
  stage: child_pipeline
  variables:
    CHILD_PIPELINE_EXECUTION_CONTEXT: "dotnet_project"
  trigger:
    include: .sub-gitlab-ci.yml
    strategy: depend

angularjs:
  stage: child_pipeline
  variables:
    CHILD_PIPELINE_EXECUTION_CONTEXT: "angularjs_project"
  trigger:
    include: .sub-gitlab-ci.yml
    strategy: depend

子目录 Anjularjs

首先我们先建立一个演示用的anjularjs的程序

ng new app-to-run-inside-docker
cd app-to-run-inside-docker
ng serve

如果成功的话可以直接通过 Http://localhost:4200 访问
然后我们生成一个dist的目录

ng build --prod

把这个目录拷到nginx里面就能跑了
Dockerfile

FROM nginx:alpine
COPY /dist/app-to-run-inside-docker /usr/share/nginx/html
EXPOSE 80

如果我们把build和copy的步骤放在一起，可以优化一下Dockerfile

FROM node:alpine AS my-app-build
WORKDIR /app
COPY . .
RUN npm ci && npm run build

FROM nginx:alpine
COPY --from=my-app-build /app/dist/app-to-run-inside-docker /usr/share/nginx/html
EXPOSE 80

把这些对应的文件commit到repo的目录里面就okay了

看看演示的一个.gitlab-ci.yml 文件

tages:
  - tag
  - build
  - test

generate_tag:
  stage: tag
  image: alpine/git-tag:latest
  rules:
    # - if: $CI_COMMIT_TAG
    #   when: never                                  # Do not run this job when a tag is created manually
    # - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH  # Run this job when commits are pushed or merged to the default branch
  script:
    - echo "create tag for branch $CI_DEFAULT_BRANCH"
    - /entrypoint.sh
    - cat build.env
    - ls -lah
    - echo "CI_COMMIT_REF_NAME is ${CI_COMMIT_REF_NAME}"
  artifacts:
    reports:
      dotenv: $(pwd)/angularjs_project/build.env

build-code-job-main:
  image: docker 
  rules: 
    - if: $CI_COMMIT_BRANCH == "main"
  services:
    - docker:dind
  stage: build
  variables:
    IMAGE_NAME: "angular_demo"

  script:

    - echo "Clean space"
    - docker system prune -f

    - echo "Login to Azure Container Registry"
    - docker login gitlabazuredemo.azurecr.io --username $ARM_CLIENT_ID --password $ARM_CLIENT_SECRET

    - echo "Docker build"
    - docker build -t gitlabazuredemo.azurecr.io/$IMAGE_NAME:$CI_COMMIT_SHORT_SHA .

    - echo "Docker tag"
    - docker tag gitlabazuredemo.azurecr.io/$IMAGE_NAME:$CI_COMMIT_SHORT_SHA gitlabazuredemo.azurecr.io/$IMAGE_NAME:$tagName
    - docker tag gitlabazuredemo.azurecr.io/$IMAGE_NAME:$CI_COMMIT_SHORT_SHA gitlabazuredemo.azurecr.io/$IMAGE_NAME:latest

    - docker push gitlabazuredemo.azurecr.io/$IMAGE_NAME:$CI_COMMIT_SHORT_SHA
    - docker push gitlabazuredemo.azurecr.io/$IMAGE_NAME:$tagName
    - docker push gitlabazuredemo.azurecr.io/$IMAGE_NAME:latest

build-code-job-other-branch:
  image: docker 
  rules: 
    - if: $CI_COMMIT_BRANCH != "main"
  services:
    - docker:dind
  stage: build
  variables:
    IMAGE_NAME: "angular_staging_demo"

  script:

    - echo "Clean space"
    - docker system prune -f

    - echo "Login to Azure Container Registry"
    - docker login gitlabazuredemo.azurecr.io --username gitlabazuredemo --password $ACR_PASSWORD

    - echo "Docker build"
    - docker build -t gitlabazuredemo.azurecr.io/$IMAGE_NAME:$CI_COMMIT_SHORT_SHA .

    - echo "Docker tag"
    - docker tag gitlabazuredemo.azurecr.io/$IMAGE_NAME:$CI_COMMIT_SHORT_SHA gitlabazuredemo.azurecr.io/$IMAGE_NAME:$tagName
    - docker tag gitlabazuredemo.azurecr.io/$IMAGE_NAME:$CI_COMMIT_SHORT_SHA gitlabazuredemo.azurecr.io/$IMAGE_NAME:latest

    - docker push gitlabazuredemo.azurecr.io/$IMAGE_NAME:$CI_COMMIT_SHORT_SHA
    - docker push gitlabazuredemo.azurecr.io/$IMAGE_NAME:$tagName
    - docker push gitlabazuredemo.azurecr.io/$IMAGE_NAME:latest

test-code-job1:
  stage: test
  script:
    - echo "run test 1 for angular"

test-code-job2:
  stage: test
  script:
    - echo "run test 2 for angular"

子目录 .net core

我们给.net core也生成一个演示的程序

dotnet new webapp -o aspnetcoreapp

然后创建对应的Dockerfile

ROM mcr.microsoft.com/dotnet/sdk:6.0 AS build-env
WORKDIR /app

#Copy csproj and restore as distinct layers

COPY *.csproj ./
RUN dotnet restore

#Copy everything else and build
COPY . ./
RUN dotnet publish -c Release -o out

#Build runtime image
FROM mcr.microsoft.com/dotnet/aspnet:6.0
WORKDIR /app
COPY --from=build-env /app/out .
ENTRYPOINT ["dotnet", "aspnetcoreapp.dll"]

commit 即可

执行效果 一个简单的框架都起来了