【CI/CD】GitHub Actionsを使ってAWS S3へ静的ウェブサイトをデプロイしてみる

# 概要
GitHub Actionsの学習のためにテストしてみました。

やりたいこととしてはシンプルで
#### GitHubで管理しているhtmlファイルに変更を加える
#### 　→　その変更内容がAWS S3上のhtmlファイルに反映される
です。

それを実現するために必要なサービスは
 - GitHub
 - GitHub Actions　※以下GHAと記載
 - AWS S3
 - OpenID Connect　※以下OIDCと記載
になります。

# 構成と運用フロー
運用フローとしては以下となります。
1. ユーザーがGitHub上のhtmlに変更を加え、その内容をマージ
1. マージをトリガーとしてGHAが起動
1. GHAがOIDC経由でAWS認証し、S3へのアクセス権限を持ったRoleを取得
1. GHAがS3へアクセスし、マージされたhtmlをデプロイ
![構成図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2921693/f1b93119-1f8d-9378-069a-26340f3d9b67.png)

# 構築
※本記事内で作成したウェブサイト、GitHubリポジトリ等は全て削除済のため
　現在はアクセス不可となっています
### S3にhtmlを配置
`test-gha-2023-s3`というバケットを作成し、`index.html`を配置します。
![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2921693/25bacf5f-21e5-9e77-8a1e-35a90147aeaa.png)
静的ウェブサイトとして表示されればOKなので、`index.html`は簡素な内容でいきます。
```
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
 
<body>
     Hello World！ 
</body>
</html>
```

S3バケットのパブリックアクセスもろもろを設定し、ウェブサイトとして表示されました。
![01-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2921693/60c4b3e3-57d7-ab0a-1f7d-03439482c9ca.png)

### GitHubにhtmlを配置
`test-gha-2023`というリポジトリのmainブランチに同じ`index.html`を配置します。
![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2921693/75544aea-808f-5019-7778-f0cf4eca0591.png)

### OIDCの設定
AWSのIAMでGitHub向けのIDプロバイダを設定します。
![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2921693/f8161ae1-6fd0-a7c7-f897-a16443d785c8.png)
![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2921693/03347468-9440-7c6d-af0d-06116369c5ac.png)

### ロールの設定
作成したIDプロバイダを使用して、GHAに付与するロールを作成します。
![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2921693/4893076d-5011-59d6-1666-89a61f7de6a5.png)

`カスタム信頼ポリシー`の内容はこちらです。
```
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid: "",
            "Effect": "Allow",
            "Principal": {
                "Federated": "arn:aws:iam::{AWSアカウントID}:oidc-provider/token.actions.githubusercontent.com"
            },
            "Action": "sts:AssumeRoleWithWebIdentity",
            "Condition": {
                "StringEquals": {
                    "token.actions.githubusercontent.com:aud": "sts.amazonaws.com"
                    "token.actions.githubusercontent.com:sub": "repo:{GitHubのowner}/test-gha-2023:ref:refs/heads/main"
                }
            }
        }
    ]
}
```

`許可ポリシー`は絞るのめんどいので`AdministratorAccess`にしました（テストだし）。
当然ながら、実際には必要な権限のみに絞るべきです。
![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2921693/169dfceb-f723-e1d0-44dc-9948a207bbb9.png)

ロール作成完了。
![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2921693/758abbf7-e7f1-a2f1-5b5c-27b54724ca4c.png)

### GHAを設定
GHAで使用するymlを配置します。
`test-gha-2023`リポジトリのmainブランチにある`Actions`タブを開き
`set up a workflow yourself`をクリックします。
![08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2921693/16983e38-e7e3-da91-0866-5a9625468569.png)

エディタ画面に遷移するので`DeployToS3.yml`を作成します。
（テストなので直コミットしています）
![09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2921693/6cf0763f-1e0c-8d52-b3f2-db5e2f67e521.png)

`DeployToS3.yml`の中身はこちらです。
```
name: DeployToS3

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    permissions:
      id-token: write
      contents: read

    steps:
    - name: Checkout repository
      uses: actions/checkout@v3

    - name: AWS set Credentials
      uses: aws-actions/configure-aws-credentials@v1
      with:
        aws-region: 'ap-northeast-1'
        role-to-assume: 'arn:aws:iam::{AWSアカウントID}:role/test-gha-2023-role'

    - name: Build and Deploy to S3
      run: aws s3 cp index.html s3://test-gha-2023-s3 --region ap-northeast-1
```

`DeployToS3.yml`が作成され、これで全ての準備は整いました。
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2921693/9823ffd2-5311-7f04-f144-57634aa23eae.png)

# テスト
`test-gha-2023`リポジトリのmainブランチ上で`index.html`に変更を加えます。
変更内容はこれまたシンプルに、青文字にして文字サイズを大きくしただけです。
（そして懲りずに直コミット。あくまでもテストなので）
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2921693/f0153621-8770-463a-14b5-003a608e3a2d.png)

すると変更がコミットされたことをトリガーに、GHA（作成した`DeployToS3.yml`）が動き始めました。
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2921693/57b5ecf9-f5b5-c6b0-17cf-57d18759b397.png)

そしてOIDCによるAWS認証等もろもろが動き、S3へのデプロイまでステータスが全て完了となっています。
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2921693/769b207d-ce9c-6c67-f0ee-9d21132cb173.png)

ウェブサイトを確認すると・・・変更した内容がちゃんと反映されていますね。
Done！
![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2921693/1fe90383-f69e-c118-4039-be154df05e3c.png)

CI/CDツールは今となってはかなりの数が存在しますが、今回はその中でGitHub Actionsのご紹介でした。
GHAは無料で2000分/月が使用可能なので、まだ使ったことない方は是非検討してみてはいかがでしょうか。