GitHub Actions を使った S3 アップロードと CloudFront キャッシュ削除の自動化

2023-03-22

はじめに

この記事では、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 認証情報の設定

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を使った静的サイトのデプロイが自動化され、新たなコンテンツが迅速に公開されるようになります。このワークフローを適用することで、開発者は記事の執筆やウェブサイトの改善に集中できるようになり、効率的な運用が可能になります。今回紹介したワークフローは、他の静的サイトジェネレーターやクラウドサービスにも応用できるため、自分の状況に合わせてカスタマイズしてみてください。