[CI CD] OIDCでGithubActionとAWS繋がってReactAppのCI CDを設定


# 前提
[前の記事](https://qiita.com/17021084/items/741157305e88df986588#:~:text=%E3%80%8CDone%E3%80%8D%E3%82%92%E6%8A%BC%E3%81%99%E3%81%A8%E3%80%81%E3%80%8Csecret%20access%20key%E3%80%8D%E3%81%8C%E8%A6%8B%E3%81%88%E3%81%BE%E3%81%9B%E3%82%93%E3%81%8B%E3%82%89%E3%80%82%E5%BF%B5%E3%81%AE%E7%82%BA%E3%80%81%E3%82%AD%E3%83%BC%E3%82%92%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%E3%81%97%E3%81%BE%E3%81%99)にはこちらテーマも説明しました。但し、「Secret access key」をダウンロードして、GitHubに保存することから、漏れる懸念があります。

# 概要
本記事では、「Secret access key」の代わりにOIDC方法をつじてGitHubActionはAWSリソースをアクセスできるということを説明させて頂きます。法方のメリットは、秘密なキーなどがなくてAWSコンソール上でリポジ名のみで利用しますから漏れる可能性がありません。



# 1.　S3バケット設定
[前記事](https://qiita.com/17021084/items/741157305e88df986588#1-s%EF%BC%93%E3%83%90%E3%82%B1%E3%83%83%E3%83%88%E4%BD%9C%E6%88%90:~:text=%E9%A0%82%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82-,1.%20S%EF%BC%93%E3%83%90%E3%82%B1%E3%83%83%E3%83%88%E4%BD%9C%E6%88%90,-AWSConsole%E3%81%A7S3)のように進めます。

今回のバケット名：```demo-oidc-ci-cd-react```


# 2. OIDC設定
IAMサービス画面に入ります

## 2.0 ポリシー作成
最小権限規則で　S3アクセスのみポリシを作成しております。
簡単なデモをしたい場合は、後で貴方はロールにS3アドミン権を付与しますから、こちらステップを飛ばしてもいいです。

![Screenshot 2024-05-08 at 21.46.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/6277c93f-e8c6-0e71-c9d8-c4291817bfcb.png)


![Screenshot 2024-05-08 at 21.59.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/a415ec7e-9024-7e4d-18d0-47efb5fb1a50.png)
JSONを選択して以下を貼ってください。
但し、本記事の対象S3バケット名は```demo-oidc-ci-cd-react```

```json
{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Sid": "githutaction",
			"Effect": "Allow",
			"Action": [
				"s3:PutObject",
				"s3:DeleteObject",
				"s3:ListBucket"
			],
			"Resource": [
				"arn:aws:s3:::＜対象S3バケット名＞",
				"arn:aws:s3:::＜対象S3バケット名＞/*"
			]
		}
	]
}
```

![Screenshot 2024-05-08 at 21.59.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/232d8f6d-c56c-df50-b7c3-3ef48ccf603b.png)
ポリシー名を登録しておきます。下ステップ2.2で利用されます
ポリシー名：```github-action-oicd```


## 2.1 アイデンティティプロバイダー作成
　![tạo oidc2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/410efae0-a5cf-07e3-1d06-11474f5cb5a1.png)
![tạo oidc 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/bf8e30ca-d9e8-27e5-cd1d-330e5fd460f8.png)

+ プロバイダURLは```https://token.actions.githubusercontent.com```
+ 対象者は```sts.amazonaws.com``` 

## 2.2 ロールを作成してアイデンティティプロバイダーにをアサイン

![Screenshot 2024-04-21 at 15.02.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/ee9a4ef4-9267-7b92-080f-8b52c9689b74.png)
![Screenshot 2024-04-21 at 15.03.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/7fecf279-bcc8-c094-e5fb-8c7a2ec9f837.png)
新規ロールを作成します。
![Screenshot 2024-04-21 at 15.30.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/c35bcc79-04f8-4f76-0244-eaac75dc042b.png)

以下のカスタムポリシーを貼ってください。ただし、いくつかのところは修正が必要
+ Federated はアイデンティティプロバイダーのARN

+  < githubユーザー名 > /<対象リポジ名＞

例：```https://github.com/17021084/Github-Action-OIDC-ci-cd```
< githubユーザー名 > /<対象リポジ名＞ = ```17021084/Github-Action-OIDC-ci-cd```


```json
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "Github-action-oidc-demo",
      "Effect": "Allow",
      "Principal": {
        "Federated": "arn:aws:iam::<アカウントID>:oidc-provider/token.actions.githubusercontent.com"
      },
      "Action": "sts:AssumeRoleWithWebIdentity",
      "Condition": {
        "StringEquals": {
          "token.actions.githubusercontent.com:sub": [
            "repo:<githubユーザー名>/<対象リポジ名＞:pull_request",
            "repo:<githubユーザー名>/<対象リポジ名＞:ref:refs/heads/main"
          ],
          "token.actions.githubusercontent.com:aud": "sts.amazonaws.com"
        }
      }
    }
  ]
}
```


![Screenshot 2024-05-08 at 22.07.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/52540e42-14ce-ad78-dfa2-ef33b74f2cc4.png)


ステップ2.0で作成してポリシーを探して選びます。
もしステップ2.0を飛ばしたら、「AdministratorAccess」を選びます。これはいい方法ではありませんが、簡単なデモとしては大丈夫です。

![Screenshot 2024-05-08 at 22.20.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/1cbfe235-be31-91b3-e5aa-fd82353e1168.png)

ロール名を入力します。

本記事のロール名は```github-action-oicd```


# 3. リポジ設置

React作成については[こちら](https://qiita.com/17021084/items/741157305e88df986588#31%E3%82%B3%E3%83%BC%E3%83%89%E4%BD%9C%E6%88%90:~:text=%E3%83%AA%E3%83%9D%E3%82%B8%E8%A8%AD%E5%AE%9A-,3.1%E3%82%B3%E3%83%BC%E3%83%89%E4%BD%9C%E6%88%90,-React%E3%82%92%E4%BD%9C%E6%88%90)を参考

```yaml
name: AWS OIDC Connect Demo
on:
  push: 
    branches: 
      - 'main'
env:
  AWS_REGION : "ap-northeast-1"
  AWS_S3_BUCKET : "demo-oidc-ci-cd-react"
permissions:
      id-token: write   # This is required for requesting the JWT
      contents: read    # This is required for actions/checkout
jobs:
  DemoOIDC:
    runs-on: ubuntu-latest
    steps:
      - name: Git clone the repository
        uses: actions/checkout@v4

      - name: Set up Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 14
      - name: Install dependencies
        run: npm install
      - name: Run unit test without prompt
        run: npm test -- --watchAll=false
      - name: Build React app
        run: npm run build
      - name: configure aws credentials
        uses: aws-actions/configure-aws-credentials@v3
        with:
          role-to-assume: arn:aws:iam::656898940349:role/github-action-oicd
          role-session-name: samplerolesession
          aws-region: ${{ env.AWS_REGION }}
      - name: Remove all files
        run:  aws s3 rm s3://${{env.AWS_S3_BUCKET}} --recursive
      - name: Upload build to s3
        run:  aws s3 cp --recursive ./build s3://${{env.AWS_S3_BUCKET}}
```


+ ```AWS_S3_BUCKET``` は対象S3のバケット（demo-oidc-ci-cd-react）

+ ```role-to-assume```はステップ２.２で作成したロールのARN


![Screenshot 2024-05-08 at 22.23.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/1d23548b-5c72-fe99-ff0b-880d97f59a70.png)
![Screenshot 2024-05-08 at 22.26.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/f5c12578-1bf6-36f4-81ed-89800c97ff2f.png)
 
# 結果
こちらは私の[GitHubAction](https://github.com/17021084/Github-Action-OIDC-ci-cd/actions) ログ
こちらはデプロイしたサイト
![Screenshot 2024-05-08 at 22.29.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/703979/33907c9a-1a37-83cb-1de5-9d55135d829b.png)

# 最後

最後まで読んで頂いて有り難うございます。
役に立つを感じしたらハートやコメントやを残ってください:bow:

# 参考
https://docs.github.com/en/actions/deployment/security-hardening-your-deployments/about-security-hardening-with-openid-connect

https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_providers_create_oidc.html