Alibaba CloudでCI/CD pipelineを構築するbest practice(2)_CircleCI利用

# 前提
- すでにgithub accountを持っている
- ci/cdに関する基礎知識

# ゴール
③の自動テストは書く開発言語に依存し、テストスクリプトも必要で準備するのはちょっと手間かかるため、今回は割愛させていただきます。
⑦のdeployの部分は別の記事で書く予定です。
ということで今回は①、②、⑤、⑥について説明し、alibaba cloud上でのCI/CDのフローをある程度イメージしていただければ幸いです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28664/c6e64c49-b8d8-4539-6b6a-d105e3fa69a8.png)


# 1. github repoと最低限のファイルを準備
- repoの作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28664/39d131cb-7fe0-6c99-1ca6-c0091639a55b.png)
- root directoryにDockerfileを用意
    ```
    FROM 'nginx:latest'
    RUN service nginx start
    ```
- github repoのサンプルをご参考ください。

https://github.com/outan/circleci-ack

# 2. ACR側でdocker imageのrepoを作成
ACRはAlibaba Cloud Container Registryの略語となり、コンテナイメージの蓄積と管理するサービスです。AWSのACRのようなサービスです。
## ACR全体
- コンソールを開き、左上のオレンジ色マークをクリックし、「ACR」をキーワードとして検索します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28664/c6d40139-c774-bb93-1eaf-3b2dc9089e9b.png)
- 個人版と企業版の二種類がありますが、今回は一旦個人版を使います。
個人版は無料で利用できますが、ビジネス用として制限がありまして、またSLAの保証もありませんので、ビジネス用途の場合は、企業版を使いましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28664/344ae093-a69b-3a2e-e4ee-3040504e5597.png)
- 個人版と企業版の違いを示すページであり、個人版を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28664/0b3716b4-25a8-4c20-bb7a-d2e35479fab5.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28664/6a2e9810-4c10-953b-3cae-51999f82454b.png)
- ACRを初めて利用している場合は、ACRのlogin password設定画面が表示され、パスワードを設定しましょう。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28664/2077cb27-a1c5-1eb9-a0d4-8efe8c09fd8c.png)
:::note info
ACRのaccess credentianlについて：
- ACRのaccess credentianlはAlibaba Cloudのcredentail(root user/RAM user)とは別物です。そもそもACRはdockerhubみたいなものなので、こちらのaccess credentianlはdockerhubのlogin accountみたいなものだと考えばわかりやすいでしょう。
- 以下の二種類があります
  - パスワード：パスワードは永久に有効です。パスワードがわからなくなった場合は、リセットできます。
  - テンポラリートークン： 一時的なトークンであり、1時間有効です。Security Token Service（STS）を利用して取得した場合、STSのトークンが有効である限り、一時的なトークンは有効です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28664/03974b44-0632-6817-d243-4c29219d38fb.png)
:::
https://www.alibabacloud.com/help/en/container-registry/latest/configure-an-access-credential

## Namespaceを作成
- ACRの仕様上で,docker imageのrepoを作成するにはまずnamespaceを作っておかないとならない。
- namespaceは、リポジトリの権限やリポジトリ属性など、そのネームスペース配下のリポジトリの集合を効率的に管理することができます。 
- namespaceは、複数のリポジトリの集合体です。会社名やチーム名、組織名など名前空間として使用するのは一般です。
- 個人版の場合は、namespaceが他のalibaba accountと共用するため、重複していない名前(alibaba cloud中で世界的に唯一の名前)をつける必要があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28664/e910a8c0-ab07-c86e-f3cb-65faab6e95ef.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28664/d856874b-1d6b-e79e-87bc-c94a00ad42d0.png)
- 作られたnamespace：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28664/d25f163b-03a0-928c-1636-02e2a3301a38.png)

## docker imageのrepoを作成
- 必要な情報を入力して作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28664/f9b5ef38-0b7c-2c50-ca20-ab6bdba9fa23.png)
- code sourceを設定
    - たんなるdocker imageをbuildするだけなら、ACRができますが、今回はcircleciでCI周り(docker imageのbuildも含まれる)をやりたいので、「Local Repository」を選択
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28664/d7ea40a2-f13a-42e4-1545-e36eac6407f2.png)
:::note info
- ACRは直接githubなどとも連携できる。つまりcodeがgithubにpushされたら、ACRのほうでdocker imageをbuildすることができる。
- AWSのACRはたんなるdocker imageの格納庫であり、docker imageをbuildするには別のサービスcodebuildが必要です。ですので、AWSをなれている方にとってはAlibaba cloudのACR自体もdocker imageをbuildできるのはちょっとびっくりするかもしれません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28664/bcf2bbeb-a6f3-d166-7d00-06f9f8fb3ced.png)
:::


- 作られたrepo
    - username: 該当alibaba accountのroot userのメールアドレス
    - password: 上記設定されたパスワード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28664/8dd39c56-0bc4-d3d0-bccd-7dfcd98efe02.png)


# 3. circleci側の設定
## circleciの新規アカウント作成
CircleCIを利用するにはGitHub, Github,Bitbucketのいずれのアカウントが必要です。あるいはメールアドレスで新規登録も可能です。
すでにアカウントを持っている場合は、このステップを飛ばしてください。
- 今回はgithubと連携したいので、「Githubで登録」のボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28664/62a469b4-3c2a-15f8-7bdc-d14292beb112.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28664/ba40618d-7db3-99d0-b309-ca50486055f7.png)
- 連携したいgithub organizationを選択
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28664/0f3faf42-f65b-304b-b9fd-852a43dedae8.png)

## project(github上で新規のrepo)を設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28664/9d6ae7d4-c2eb-2a14-981c-21aecd330bea.png)
- circleci用の設定ファイルconfig.ymlはまだないため、テンプレートを利用して新規作成する
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28664/a3ab64df-e44b-f4ca-82b9-1ae7f8cd7ea0.png)
- `Hello World`のサンプルテンプレートを利用
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28664/03ee3f8b-2493-f9cb-cd0a-53dd1d58f9f6.png)
- そのままでコミット
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28664/1eecc169-96e8-c974-f05b-ee0420cc39f9.png)

## 環境変数を設定
- `Contexts`はcircleci上でprojectsを跨いて環境変数をセキュリに共有する仕組みです。
- ACRへアクセスする認証情報をcircleciの環境変数に設定しておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28664/265f1471-0695-c8bf-11af-540e2dac8a7e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28664/1e6bda3c-82d5-98c8-49dd-33385dd4f09a.png)
- つくられcontextsをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28664/0b67690f-97f4-6669-578e-d810c0355dc7.png)
- 環境変数を追加
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28664/42e3b96d-d9d1-5aa7-2341-ede44904a5c6.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28664/629603c6-7601-9837-dc56-842caa1ae19b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28664/d11cc246-de63-82b1-e137-eb13b413eb54.png)
- つくられた環境変数
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28664/412bcb51-400b-2853-9b80-2ccde0196734.png)


## circleci上でconfig.ymlを修正し、コミット
```
jobs:
  build-docker-image:
    # Specify the execution environment. You can specify an image from Dockerhub or use one of our Convenience Images from CircleCI's Developer Hub.
    # See: https://circleci.com/docs/2.0/configuration-reference/#docker-machine-macos-windows-executor
    docker:
      - image: cimg/base:stable
    # Add steps to the job
    # See: https://circleci.com/docs/2.0/configuration-reference/#steps
    steps:
      - checkout
      - setup_remote_docker:
          version: 20.10.14
          docker_layer_caching: true 
      - run:
          name: "acr login"
          command: "docker login --username=$username -p=$password registry-intl.ap-northeast-1.aliyuncs.com"
      - run:
          name: "push to acr"
          command: |
            TAG=$CIRCLE_SHA1
            docker build -t registry-intl.ap-northeast-1.aliyuncs.com/denniswang/circleci_ack:$TAG .
            docker push registry-intl.ap-northeast-1.aliyuncs.com/denniswang/circleci_ack:$TAG
# Invoke jobs via workflows
# See: https://circleci.com/docs/2.0/configuration-reference/#workflows
workflows:
  say-hello-workflow:
    jobs:
      - build-docker-image:
          context:
            - acr

```

### config.yml修正の詳細
1. workflowsにcontext情報を追加
    ```
    workflows:
      say-hello-workflow:
        jobs:
          - build-docker-image:
              context:
                - acr
    ```
1. GitHub上のdockfileを使い、dockerイメージをビルドするには、下記のsetup_remote_dockerコマンドを使い、docker ビルド環境の作成が必要となります。
    ```
          - setup_remote_docker:
              version: 20.10.14
              docker_layer_caching: true 
    ```
    :::note info
    setup_remote_docker設定しない場合は、以下のエラーが発生します。
    ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28664/2229ccc3-434a-e3a0-cec3-cc80318fa686.png)
    :::
1. acr loginやpushのコマンド(usernameとpasswordは環境変数から取得)
```
      - run:
          name: "acr login"
          command: "docker login --username=$username -p=$password registry-intl.ap-northeast-1.aliyuncs.com"
      - run:
          name: "push to acr"
          command: |
            TAG=$CIRCLE_SHA1
            docker build -t registry-intl.ap-northeast-1.aliyuncs.com/denniswang/circleci_ack:$TAG .
            docker push registry-intl.ap-northeast-1.aliyuncs.com/denniswang/circleci_ack:$TAG

```

# 4. 結果の確認
## circleciの実行結果を確認
- 正常にbuild＆ACRにpushされていること
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28664/20d4f98e-fb09-3f5f-a2ae-533428c9cd2e.png)
- 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28664/bb2a01ea-9247-933e-72bb-7d938bcedca6.png)

## ACR側にpushされたimageを確認
- 問題なくimageがpushされていること
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/28664/e8004a51-aa91-e03a-8e51-af558c91b841.png)

# 5. CircleCIのテスト結果をSlackに通知する

https://qiita.com/dennis_wang/private/1c4d9cbf681eee1815ed