GitHub Actions を使った S3 アップロードと CloudFront キャッシュ削除の自動化
はじめに
この記事では、GitHub Actionsを使ってHugoで作成された静的サイトをAmazon S3にアップロードし、その後Amazon CloudFrontのキャッシュを削除するワークフローを解説します。この解説を読み進めることで、自動化されたデプロイプロセスを構築する方法を理解できるでしょう。
GitHub Actions のワークフロー概要
今回解説するワークフローは、GitHub Actionsによって実行されます。ワークフローは、mainブランチへのプッシュがトリガーとなり、以下のステップを実行します。
- リポジトリのチェックアウト
- Hugoのセットアップ
- Hugoのビルド
- AWS認証情報の設定
- S3へのファイルアップロード
- CloudFrontキャッシュの無効化
各ステップの詳細
リポジトリのチェックアウト
このステップでは、actions/checkout@v2を使用して、GitHubのリポジトリを実行環境にチェックアウトします。これにより、ワークフローがリポジトリのファイルにアクセスできるようになります。
Hugo のセットアップ
peaceiris/actions-hugo@v2を使用してHugoをセットアップします。hugo-versionでHugoのバージョンを指定できます。また、extendedをtrueに設定することで、HugoのExtendedバージョンをインストールできます。
- name: Setup Hugo
uses: peaceiris/actions-hugo@v2
with:
hugo-version: "0.101.0"
extended: true
Hugo のビルド
hugo –environment productionコマンドを実行して、Hugoで静的サイトをビルドします。これにより、publicディレクトリに生成された静的ファイルが格納されます。
- name: Build Hugo
run: |
hugo --environment production
AWS 認証情報の設定
このステップでは、GitHub Actionsのワークフロー内でAWS CLIを使用するために、AWSの認証情報を設定します。aws-actions/configure-aws-credentials@v1を使用することで、簡単に認証情報を設定できます。このステップで使用される認証情報は、GitHub Secretsから取得します。
- 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-3
手法
name: S3 Upload
on:
push:
branches:
- main
jobs:
build:
runs-on: ubuntu-latest
timeout-minutes: 10
steps:
- name: Checkout
uses: actions/checkout@v2
- name: Setup Hugo
uses: peaceiris/actions-hugo@v2
with:
hugo-version: "0.101.0"
extended: true
- name: Build Hugo
run: |
hugo --environment production
- 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-3
- name: Upload file to S3
env:
S3_UPLOAD_BUCKET: ${{ secrets.S3_UPLOAD_BUCKET }}
timeout-minutes: 30
run: |
aws s3 sync --exact-timestamps --delete public s3://$S3_UPLOAD_BUCKET/ --acl public-read
- name: Invalidate CloudFront cache
env:
CLOUDFRONT_DISTRIBUTION_ID: ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }}
run: |
aws cloudfront create-invalidation --distribution-id $CLOUDFRONT_DISTRIBUTION_ID --paths "/*"
AWS 認証情報の設定
このステップでは、GitHub Actionsのワークフロー内でAWS CLIを使用するために、AWSの認証情報を設定します。aws-actions/configure-aws-credentials@v1を使用することで、簡単に認証情報を設定できます。このステップで使用される認証情報は、GitHub Secretsから取得します。
S3 へのファイルアップロード
Hugoでビルドした静的ファイルをAWS S3にアップロードします。aws s3 syncコマンドを使用して、ローカルのpublicディレクトリとS3バケットを同期させます。
- name: Upload file to S3
env:
S3_UPLOAD_BUCKET: ${{ secrets.S3_UPLOAD_BUCKET }}
timeout-minutes: 30
run: |
aws s3 sync --exact-timestamps --delete public s3://$S3_UPLOAD_BUCKET/ --acl public-read
CloudFront キャッシュの無効化
今回の更新で追加した箇所です。
S3にファイルがアップロードされた後、CloudFrontのキャッシュを無効化することで、更新されたコンテンツがすぐに反映されるようにします。aws cloudfront create-invalidationコマンドを使用して、キャッシュを無効化します。
- name: Invalidate CloudFront cache
env:
CLOUDFRONT_DISTRIBUTION_ID: ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }}
run: |
aws cloudfront create-invalidation --distribution-id $CLOUDFRONT_DISTRIBUTION_ID --paths "/*"
$CLOUDFRONT_DISTRIBUTION_IDは、Github ActionのSecrets設定を行います。
create-invalidationコマンドを使用して、キャッシュを無効化できます。 無効化を行うことで、キャッシュされたコンテンツが更新され、最新のコンテンツが表示されるようになります。
GitHub Secrets の設定
このワークフローでは、AWSと通信するためにいくつかのシークレット（秘密情報）を使用しています。GitHub Secretsを使うことで、これらの情報を安全にリポジトリに格納し、ワークフローで利用できるようになります。以下の手順で、GitHub Secretsを設定してください。
GitHubリポジトリのメインページにアクセスし、右上のSettingsタブをクリックします。 左側のメニューからSecretsを選択します。 New repository secretボタンをクリックし、シークレットの名前と値を入力します。
以下のシークレットが必要です
- AWS_ACCESS_KEY_ID: AWSアクセスキー ID
- AWS_SECRET_ACCESS_KEY: AWSシークレットアクセスキー
- S3_UPLOAD_BUCKET: アップロード先のS3バケット名
- CLOUDFRONT_DISTRIBUTION_ID: CloudFrontディストリビューションID
これらのシークレットを設定した後、ワークフローはGitHub Actionsで実行される際に、これらの値を環境変数として利用できます。これにより、AWS認証情報の設定が完了です。
設定後はこのような感じになります。
まとめ
本記事では、GitHub Actionsを使用して、Hugoで作成された静的サイトをAWS S3にデプロイし、さらにCloudFrontのキャッシュを削除するワークフローを解説しました。各ステップについて、リポジトリのチェックアウトから、Hugoのセットアップ、ビルド、AWS認証情報の設定、S3へのファイルアップロード、そしてCloudFrontキャッシュの無効化まで詳しく説明しました。また、GitHub Secretsを利用して、セキュアに認証情報を管理する方法についても触れました。
これにより、Hugoを使った静的サイトのデプロイが自動化され、新たなコンテンツが迅速に公開されるようになります。このワークフローを適用することで、開発者は記事の執筆やウェブサイトの改善に集中できるようになり、効率的な運用が可能になります。今回紹介したワークフローは、他の静的サイトジェネレーターやクラウドサービスにも応用できるため、自分の状況に合わせてカスタマイズしてみてください。
amazon.co.jp
