Hugo @ Amazon CloudFront & S3 への移行

Hugo への移行#

私は以前 Hexo を使用していましたが、基本的に Hugo の使用方法と大差はなく、記事をそのままコピーして、記事の Front Matter 部分を確認するだけで済みます。

確認が終わったら、hugoコマンドを使用してウェブサイトの静的ファイルを生成し、デフォルトでpublicフォルダーに保存します。

Amazon S3 バケットの設定#

AWS S3 コンソールを開き、新しい S3 バケットを作成します。

新しく作成したバケットの詳細情報に入り、静的ウェブサイトホスティング機能を有効にし、「バケットウェブサイトエンドポイント」を記録しておきます。

「権限」から「すべての公開アクセスをブロック」を外し、「バケットポリシー」を以下の内容に変更します：

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::<bucket_name>/*"
    }
  ]
}

前のステップで得たpublicフォルダー内のすべてのファイルをこのバケットにアップロードし、先ほどの「バケットウェブサイトエンドポイント」にアクセスすると、ページが表示されるはずです（スタイルが正しくない可能性があります）。

Amazon CloudFront CDN の設定#

AWS CloudFront コンソールを開き、新しい Web ディストリビューションを作成します。「SSL 証明書」を見つけ、「ACM を使用して証明書をリクエストまたはインポート」をクリックし、まずドメイン名のために証明書を申請し、その後ディストリビューション作成ページを更新します。

以下の説明に従ってパラメータを設定し、他はデフォルトのままで大丈夫です：

ソースドメイン：先ほど作成したバケットを選択
ビューアプロトコルポリシー：HTTP を HTTPS にリダイレクト
SSL 証明書：「カスタム SSL 証明書」を選択し、下のリストから先ほど申請した証明書を選択

作成後、先ほど作成したディストリビューション ID をクリックし、「ソースとソースグループ」をクリックして「ソース」を編集し、ソースドメインを「バケットウェブサイトエンドポイント」に変更して保存します。

この時、ドメイン名を使用してアクセスすると、ページが正常に表示されるはずです。

GitHub Actions を使用した自動デプロイの設定#

以前、自動デプロイを実現するために Deployer を作成しましたが、今回の移行ではその体験を落とすわけにはいきません。

自分のサーバーにデプロイしなくなったため、Deployer を使用するのは少し過剰になり、GitHub Actions を選択しました。

以下は GitHub Actions の Workflow ファイルです：

name: Deploy to Amazon S3

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
          fetch-depth: 0

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.80.0'

      - name: Build
        run: hugo --minify

      - name: Deploy to S3
        run: hugo deploy --force --maxDeletes -1 --invalidateCDN
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

注：使用前にプロジェクトの Secrets にAWS_ACCESS_KEY_IDとAWS_SECRET_ACCESS_KEYの 2 つの環境変数を追加する必要があります。

index.xml ファイルのメタデータ修正#

Hugo のデフォルトのデプロイ機能は、xmlファイルのContent-Typeをapplication/rss+xmlに設定しますが、実際にアクセスすると文字化けが発生します。これをapplication/xmlまたはtext/xmlに変更することで解決できます。

GitHub Actions の Workflow に以下の内容を追加すれば、毎回手動で修正する必要がなくなります：

...
jobs:
  deploy:
    ...
    steps:
      ...

      - 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: ${{ secrets.AWS_REGION }}

      - name: Fix Content-Type for index.xml
        run: |
          aws s3api copy-object --bucket "$AWS_BUCKET" --content-encoding "gzip" --content-type "text/xml" --copy-source "$AWS_BUCKET/index.xml" --key "index.xml" --metadata-directive "REPLACE"
        env:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ${{ secrets.AWS_REGION }}
          AWS_BUCKET: ${{ secrets.AWS_BUCKET }}

注：プロジェクトの Secrets にAWS_REGIONとAWS_BUCKETの 2 つの環境変数を追加する必要があります。

完全な Workflow ファイル#

name: Deploy to Amazon S3

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
          fetch-depth: 0

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.80.0'

      - 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: ${{ secrets.AWS_REGION }}

      - name: Build
        run: hugo --minify

      - name: Deploy to S3
        run: hugo deploy --force --maxDeletes -1 --invalidateCDN
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

      - name: Fix Content-Type for index.xml
        run: |
          aws s3api copy-object --bucket "$AWS_BUCKET" --content-encoding "gzip" --content-type "text/xml" --copy-source "$AWS_BUCKET/index.xml" --key "index.xml" --metadata-directive "REPLACE"
        env:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ${{ secrets.AWS_REGION }}
          AWS_BUCKET: ${{ secrets.AWS_BUCKET }}

必要な Secrets の設定：

AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY
AWS_REGION
AWS_BUCKET

CORE