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

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

# 概要
![Screenshot 2024-04-23 at 17.46.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/206c4cda-f1f0-47ab-8887-0d814bb9a80f.png)

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

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

# 1. S３バケット作成

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

## 1.1 S３バケット作成
+ バケットタイプはGeneral purposeです。
+ バケット名は任意ですが、唯一無二です。

![Screenshot 2024-04-23 at 18.06.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/0539ba55-0b86-c9c8-3283-eddfed33595d.png)

![Screenshot 2024-04-23 at 18.06.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/81b46ca2-9997-9087-a5f9-e43377278e92.png)

公開アクセスのブロックをすべて解除
![Screenshot 2024-04-23 at 18.06.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/42a27a62-b7ad-c769-c3ce-22c9244c8163.png)

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

## 1.2 静的ウェブサイトホスティング
作成したバケットに入ってPropertiesタブに入ってください

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

![Screenshot 2024-04-23 at 18.07.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/ce741dd0-5f4c-2266-7d4f-a69497d18445.png)
最下にスケロールして静的ウェブサイトホスティング設定が見えます。そして、「編集」を押します
![Screenshot 2024-04-23 at 18.07.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/d1e93e09-a6cd-b0b3-3673-a31908dade65.png)
下の画像のように設定してください。

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

![Screenshot 2024-04-23 at 18.07.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/34beb645-cfc5-755d-5bb0-415058f2a109.png)

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

![Screenshot 2024-04-25 at 6.57.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/8dbcbdeb-0344-7279-7f49-9f1b4d1ffe77.png)

テストためS3に以下の```index.html```をアップロード
```html
index.html
<h1> Hello world</h1>
```

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

![Screenshot 2024-04-25 at 6.33.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/db41fc2c-8c90-0710-b22e-32838eabd2be.png)

## 1.3 バケット公開
上記を解決ために「permision」タブに入って「Bucket policy」スケロールします
![Screenshot 2024-04-25 at 6.37.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/d5804be5-f8d8-c883-3b37-05ac5c805856.png)

```json
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<貴方のS3 ARN>/*"
        }
    ]
}
```
設定した後に、バケットはpulicly accessible タグがあってS３に関する設定が完了します
![Screenshot 2024-04-25 at 7.11.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/b3a2f608-ff22-e5a7-1994-e66e88cd5a6b.png)

テスト：公開URLをアクセスすると以下の結果ができます
![Screenshot 2024-04-25 at 7.12.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/2190090b-3264-85de-5b6e-45e4c9926be4.png)



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

## 2.1 ユーザーグループ作成
一旦ユーザーグルプ名を設定しておきます。パーミッションをその後設定してもいいです。
![Screenshot 2024-04-25 at 7.19.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/897a4ae4-12e0-dd64-3fba-3dab78d028be.png)
私は```github-action-user```一旦作成して、詳細に入ってパーミッション設定しましょう。
![Screenshot 2024-04-25 at 7.17.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/263c56f9-55b5-f364-7c77-700c0bf461aa.png)
![Screenshot 2024-04-25 at 10.37.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/652f2f46-fab8-c57b-3175-f56990f8b2b1.png)

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

```json
{
	"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 ユーザー作成
ユーザ画面に入って新しユーザーを作成しましょう
![Screenshot 2024-04-25 at 7.35.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/2cebcd38-9376-1aa4-c70e-72762bb59437.png)

こちらユーザはGithubActionに利用される意図で、AWSコンソルにアクセスするのは不要ですから、チェックを入れません。　（最小権利の規則）
![Screenshot 2024-04-25 at 7.36.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/54bff5a5-8b0e-8b79-f418-f910fb32c9e1.png)
先ほど作ったユーザーグルプに配属させます。
![Screenshot 2024-04-25 at 7.36.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/8615d96b-56b5-f30f-318e-53f039ada2df.png)

### 2.3.1 ユーザーの認証書ダウンロード
作成したユーザの詳細に入って「sercurity credentials」タブに選びます
![Screenshot 2024-04-25 at 7.43.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/19079de8-8e13-405d-3542-86c2873cf8eb.png)

「Access keys」にスケロールして新しいアクセスキーを作成
![Screenshot 2024-04-25 at 7.47.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/c4714f93-b294-2a00-fa5e-b0e2e9b44aa3.png)

GithubActionに向けますから、サードパーティを選びます
![Screenshot 2024-04-25 at 7.44.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/10a96bc2-e6a8-5fed-0069-135e713cf36e.png)

「Done」を押すと、「secret access key」が見えませんから。念の為、キーをダウンロードします
![Screenshot 2024-04-25 at 7.45.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/edfb946d-0f50-c401-a168-7e96750f8b0e.png)


# 3. リポジ設定

## 3.1コード作成

Reactを作成します
```
npx create-react-app github-action-ci-cd-iam-user
```
ci-cd.yamlファイルを作成　（パスは以下のようにします）
![Screenshot 2024-04-25 at 8.16.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/c068a0f9-ade9-44e5-0d15-c00990705f94.png)

#### ワークフロー作成

```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 }}

```

### 3.2 環境変数を設定
Github上で「Settings」タブ→「Environment」に入って、「新環境」作成します


![Screenshot 2024-04-25 at 12.09.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/60801418-c275-4b19-6920-3dc62469749c.png)

```dev_env```を作成

:::note warn
上記のci-cd.yamlの ``` environment: dev_env  # GithubUI上で設定した環境```と一緒です
:::

![Screenshot 2024-04-25 at 11.01.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/5655d3fb-5dfc-a673-a899-df2b21f5854a.png)

![Screenshot 2024-04-25 at 11.04.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/003827e5-a633-1cae-ec6b-b2feb8dda0bb.png)

```AWS_ACCESS_KEY_ID``` と　```AWS_SECRET_ACCESS_KEY```は機密な情報ですから。```secrets```で保存します。これらは見られなくて更新だけです。


```AWS_S3_BUCKET```と```AWS_REGION```は機密な変数ではなく変数環境として作成して良いです。

### 3.3 テスト
ローカルで```main```にコードをプッシュしてGithubActionUI上でログを検査できます
![Screenshot 2024-04-25 at 12.18.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/56de111d-0e46-71a0-c5eb-5a8f2dc6ccdc.png)

S3に戻ってこちらリンクで結果を確認できます。

![Screenshot 2024-04-25 at 12.20.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/872bc72a-347d-482f-db91-681184c28acc.png)
こんな感じです
![Screenshot 2024-04-25 at 12.21.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/d9ab7c30-1aec-44f2-850c-1e48a10a8504.png)


### 最後
次の記事は同じテーマですが、IAMユーザを作成せずに、OIDCでGitHubActionにロールを付与する方向を共有させて頂きます。
最後まで読んで頂いて有り難うございます。:bow:
役に立つを感じしたらハートやコメントやを残ってください:bow: