AWS S3＋GitHub Actions＋IP制限でwebサイトをホスティングする

- こちらの記事は [GitHub Actions Advent Calendar 2021](https://qiita.com/advent-calendar/2021/github-actions)の13日目の記事になります。

## 前置き
- AWS S3の静的ホスティングの設定〜GitHub Actionでデプロイが走るとS3にアップロードしてくれるパイプライン構築までの手順を自分用にまとめました。
- IP制限もかけられるようにしました。

## AWS側の設定
### S3の設定
1. [https://s3.console.aws.amazon.com/s3/home?region=ap-northeast-1](https://s3.console.aws.amazon.com/s3/home?region=ap-northeast-1)へアクセスし、バケットを作成をクリックする。
![スクリーンショット 2021-10-31 19.18.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527664/22b01917-f79b-04b4-48c9-e87982817b77.png)

1. 任意のバケット名を入力し、リージョンを選択（ap-northeast-1）し、**パブリックアクセスを全てブロックのチェックを外す**。
![スクリーンショット 2021-10-31 19.08.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527664/56e36c98-ce4e-dec8-6556-3f337543e39c.png)

1. 最下部の「バケットを作成」ボタンをクリックする。

1. 作成したバケットをクリックして、詳細画面にいく。
![スクリーンショット 2021-10-31 19.18.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527664/230ec84f-42a1-9a5b-be72-c9388bb4fa69.png)

1. 最下部にある「静的webホスティング」の編集をクリックする。
![スクリーンショット 2021-10-31 19.18.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527664/fea103ce-376a-5773-de72-9751cb02afb0.png)

1. 画像のように、静的ウェブホスティングを有効にする。（インデックスドキュメントは`index.html`で良い）
![スクリーンショット 2021-10-31 19.14.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527664/f711b1c7-385e-ab94-19a7-2e1592885423.png)

1. 詳細画面に戻り、「アクセス許可」タブのバケットポリシーを編集する。
    - JSONの記述が難しい場合は、「Generate Policy」で作成すると良い。
    - 以下では特定のIPアドレスからのアクセスのみ許可するポリシーを設定。
    - CIDR表記がわからない場合は、[ネットワーク計算ツール](https://www.softel.co.jp/labs/tools/network/)で確認すると良い。

```json
{
    "Version": "2012-10-17",
    "Id": "{任意のIDを記述する}",
    "Statement": [
        {
            "Sid": "{任意のIDを記述する}",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::{先ほど作成したバケット名を記述する}/*",
            "Condition": {
                "IpAddress": {
                    "aws:SourceIp": "{自分のIPアドレスをCIDR形式で記述する}"
                }
            }
        }
    ]
}
```

- これでS3の設定は全て完了です。

### IAMの設定
1. [https://console.aws.amazon.com/iamv2/home#/users](https://console.aws.amazon.com/iamv2/home#/users)にアクセスし、GitHubと連携するためのCLIのIAMユーザーアカウントを作成する

![スクリーンショット 2021-10-31 19.55.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527664/bb05c58c-a4c0-1b9c-6ce5-1430d699075c.png)

1. 「アクセスキー - プログラムによるアクセス」にのみチェックを入れる
![スクリーンショット 2021-10-31 19.55.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527664/2e1a4691-8753-db93-b2a2-bbd4e719882b.png)

1. ポリシーは「`AmazonS3FullAccess `」を選択する。

1. 認証情報をcsvダウンロードする。（**GitHub Actionで使用するのでちゃんとメモっておく**）

1. これでIAMの設定は全て完了です。

## GitHub Actionの設定
1. GitHub上でリポジトリを作成する。
1. SettingタブのSecretsをクリックから、「New Repository Secret」をクリックし以下の3つを登録する。

    |Name|値|
    |---|---|
    |AWS_ACCESS_KEY_ID|先ほど控えておいたAccess key IDを入力する|
    |AWS_SECRET_ACCESS_KEY|先ほど控えておいたSecret access keyを入力する|
    |S3_BUCKET|先ほどの手順で作成したバケット名を入力する|

    ![スクリーンショット 2021-10-31 19.48.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527664/9ab0ccff-6106-b8ec-7671-54feb097dbe5.png)

1. Actionsタブへ行き、「set up a workflow yourself」をクリックし、「Edit new file」をクリックする。
1. yamlは以下を入力し、「Start commit」をクリックしてから、「Commit new file」をクリックする。

```yaml
name: Amazon S3 Upload

on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ap-northeast-1

      - name: Upload to S3
        env: 
          S3_UPLOAD_BUCKET: ${{ secrets.S3_BUCKET }}
        run: |
          aws s3 sync . s3://$S3_UPLOAD_BUCKET/ --delete --exclude "README.md" --exclude ".git/*" --exclude ".github/*" --exclude ".gitignore"
```
- s3 sync時に静的ファイルだけS3にアップロードしたい場合は、以下のようにdist/のみを指定してください。
    - dist/ は、`$ npm run build`でビルドした際に生成されるフォルダです。

```yaml
      - name: Upload to S3
        env: 
          S3_UPLOAD_BUCKET: ${{ secrets.S3_BUCKET }}
        run: |
          aws s3 sync dist/ s3://$S3_UPLOAD_BUCKET/ --delete --exclude "README.md" --exclude ".git/*" --exclude ".github/*" --exclude ".gitignore"

```

- これでGitHub Actionの設定は完了です。

## パイプラインが走る
- エディタ（vscode）からGitHubへプッシュすると、GitHub Actionがキックされ、パイプラインが回ります。
![スクリーンショット 2021-10-31 20.22.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527664/803e536d-817b-40cd-0676-94c1b141a38e.png)
![スクリーンショット 2021-10-31 20.23.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/527664/ede63776-7592-0e4c-18bf-9d50a3d9d1fd.png)


### 最後に
- こんなに簡単にできるとは思っていなかったです。（GitHub Actionすごい）
- ご不明点あれば、コメントまで〜！
- @lmatsulさんの[GitHub Actions を使って AWS の S3 へデプロイする](https://qiita.com/lmatsul/items/4c9f5c61cb849637dc50)を参考にさせていただきました🙇‍♂️