【備忘録】GitHub Actionsを使ってAWS S3へ自動アップロードしてみた

はじめに

GitHub Actionsを活用して、mainブランチに変更があった際に、HTMLなどの静的ファイルを自動でS3バケットへアップロードしてみました。

実際にやってみた

以下の手順で進めます。

1.S3バケットを手動で用意
2.GitHubにリポジトリを作成し、適当なHTMLファイルを作成
3.GitHub Actionsを使うための認証設定
4.ワークフローにymlファイルを作成
5.S3のオブジェクトにアクセス許可する

1.S3バケットを手動で用意

AWS S3 → バケットを作成 　バケット名をメモしておいてください

2.GitHubにリポジトリを作成し、適当なHTMLファイルを作成

htmlサンプル

<h1>Hello,World!</h1>

3.GitHub Actionsを使うための認証設定

リポジトリのSettings → Secrets and variables → Actions
Repository secretsに以下の情報を追加します。

• AWS_ACCESS_KEY_ID: IAMユーザー作成時に取得したアクセスキーID
• AWS_SECRET_ACCESS_KEY: IAMユーザー作成時に取得したシークレットキー

IAMユーザーのアクセスキーとシークレットキーは、AWSコンソールの画面右上のアカウントをクリック → セキュリティ情報　→　アクセスキーの作成で作成できます。

4.ワークフローにymlファイルを作成

GitHubActions用のymlファイルを作成します
コード末尾にあるバケット名はご自身のものに変更してください

deploy_to_s3.yml

name: Deploy to S3

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

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

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

    # Sync files to S3
    - name: Sync files to S3
      run: |
        aws s3 sync . s3://testbucket \ # ご自身のバケット名に変更してください
          --exclude ".git/*" \
          --exclude ".github/*" \
          --delete

変更をコミットするとGitHub Actionsが動きます。

これでS3にhtmlがアップロードできました

5.S3のオブジェクトにアクセス許可する

S3 → バケット選択　→ htmlをクリック
オブジェクトのURLをクリックして"Hello, World!"を表示したいですが、
このままではアクセス拒否されてしまうので、バケットポリシーを編集します。
バケット → オブジェクト選択 → アクセス許可　→ バケットポリシー　→ 編集

下記を貼り付けます。バケットARNはご自身のものに変更してください

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "[ご自身のバケットARNに変更してください]/*"
        }
    ]
}

S3 → バケット選択　→ htmlをクリック → オブジェクトのURLをクリック

S3にアップロードしてhtmlファイルをデプロイできました

参考文献