[CI CD] GithubActionでReactAppのCI CDを設定

Posted at 2024-04-25

前提

本記事では、GitHub ActionsとAWSを組み合わせて、フロントエンドのCI/CDパイプラインを構築する方法について解説させて頂きます。フロントエンドのCI/CDとは、開発したコードの自動的なテストしたりビルドしたりリリースしたりするプロセスです。つまり、開発者がコードを変更した際に、それが自動的にテストされ、問題がなければ自動的にリリースされる仕組みです。

概要

CI CD流れ
開発者はコード成果をアップロード→Github actionは lintやテストやビルドなどの再確認処理を自動的して→OKであればS3にアップロード。（つまりリリース）

以下に設定手順を詳しく説明させて頂きます。

1. S３バケット作成

AWSConsoleでS3サービスに入ってください。

1.1 S３バケット作成

バケットタイプはGeneral purposeです。
バケット名は任意ですが、唯一無二です。

公開アクセスのブロックをすべて解除

残っているものをそのままにしてバケットを作成します。

1.2 静的ウェブサイトホスティング

作成したバケットに入ってPropertiesタブに入ってください

メモ：バケットARNがその後使用されます

最下にスケロールして静的ウェブサイトホスティング設定が見えます。そして、「編集」を押します

下の画像のように設定してください。

indexファイルとは、http://<公開url>へアクセスするとこちらファイルを表示します
errorファイルとは、何か問題が発生する時はこちらファイル表示します

公開URLは赤枠で強調されています。

テストためS3に以下のindex.htmlをアップロード

index.html
<h1> Hello world</h1>

バケット公開していないから、こちらリンクをアクセスしたら403Forbiddenエラーが出ます

1.3 バケット公開

上記を解決ために「permision」タブに入って「Bucket policy」スケロールします

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<貴方のS3 ARN>/*"
        }
    ]
}

設定した後に、バケットはpulicly accessible タグがあってS３に関する設定が完了します

テスト：公開URLをアクセスすると以下の結果ができます

2. IAMユーザー作成

IAMサービーに入ってユーザーグルプを作成します

2.1 ユーザーグループ作成

一旦ユーザーグルプ名を設定しておきます。パーミッションをその後設定してもいいです。

私はgithub-action-user一旦作成して、詳細に入ってパーミッション設定しましょう。

簡単にデモをしたら、adminFullAccessを付与しても問題ないですが、実際では最小権限の規則として、必要な権限のみを付与します。

{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Sid": "githutaction",
			"Effect": "Allow",
			"Action": [
				"s3:PutObject",
				"s3:DeleteObject",
				"s3:ListBucket"
			],
			"Resource": [
				"arn:aws:s3:::<貴方のバケット名>",
				"arn:aws:s3:::<貴方のバケット名>/*"
			]
		}
	]
}

2.3 ユーザー作成・認証書ダウンロード

2.3.1 ユーザー作成

ユーザ画面に入って新しユーザーを作成しましょう

こちらユーザはGithubActionに利用される意図で、AWSコンソルにアクセスするのは不要ですから、チェックを入れません。　（最小権利の規則）

先ほど作ったユーザーグルプに配属させます。

2.3.1 ユーザーの認証書ダウンロード

作成したユーザの詳細に入って「sercurity credentials」タブに選びます

「Access keys」にスケロールして新しいアクセスキーを作成

GithubActionに向けますから、サードパーティを選びます

「Done」を押すと、「secret access key」が見えませんから。念の為、キーをダウンロードします

3. リポジ設定

3.1コード作成

Reactを作成します

npx create-react-app github-action-ci-cd-iam-user

ci-cd.yamlファイルを作成　（パスは以下のようにします）

ワークフロー作成

#ci-cd.yaml
name: CI CD
on:
  push: # プッシュするときこちらワークフォロー実施
    branches:
      - "main"
  pull_request: # プッシュするときこちらワークフォロー実施
    branches:
      - "main"
jobs:
  ci-cd:
    runs-on: ubuntu-latest　# 実施環境はUbuntu
    environment: dev_env  # GithubUI上で設定した環境
    steps:
      - name: Git clone the repository
        uses: actions/checkout@v4
      - name: Set up Node.js
        uses: actions/setup-node@v4 #Node環境設定
        with:
          node-version: 14
      - name: Install dependencies
        run: npm install　#ライブライをダウンロード
      - name: Run unit test without prompt
        run: npm test -- --watchAll=false　#Unit test 実施
     # .... eslintでコードを整理する処理を追加してもいいです。
      - name: Build React app　
        run: npm run build
      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v1 #IAMユーザーログインのような操作
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ${{ vars.AWS_REGION }}
      - name: Remove all files
        run: aws s3 rm s3://${{ vars.AWS_S3_BUCKET }} --recursive
      - name: Upload build to s3
        run: aws s3 cp --recursive ./build s3://${{ vars.AWS_S3_BUCKET }}