静的サイトジェネレータ「Hugo」でブログサイトを S3 + CloudFrontでホストするまで [第3回〜Hugoを S3 + CloudFront でホストする〜]

ブログ構築シリーズ

静的サイトジェネレータ「Hugo」を使って当ブロブサイトを S3 + CloudFront の構成でホストすることができましたので、 構築~デプロイまでの流れをブログ構築シリーズとして全６回でご紹介していきます。 第3回はHugoを S3 + CloudFront でホストし、パブリック公開します。  

1. 第1回〜Hugoの環境構築編〜　
2. 第2回〜HugoにMainroadテーマ適用編〜
3. 第3回〜Hugoを S3 + CloudFront でホストする〜　☆今回はこちらを紹介します
4. 第4回〜HugoをGithub Action でS3にプッシュする〜
5. 第5回〜HugoをRoute53 + お名前.comで公開する〜
6. 第6回〜HugoのSEO対策〜

TL;DR

本記事でわかることは以下の通りです。

☆ S3とCloudFrontでホストする手順

構成図

全体像はこんな感じです。
今回はS3とCloudFrontに絞ってやります。github actions周りの設定はまた次回!

環境

• macOS : Monterey v12
• docker : 20.10.16
• OS : Rhel9

1. Hugo Build

下記コマンドを実行すると、プロジェクトディレクトリ配下にpublicディレクトリとその配下にHTMLファイル等の静的ファイルが作成される。

$ hugo build

2. S3にアップロード

public配下のファイルをすべてS3にアップロードします。

$ aws s3 cp public s3://your-bucketname/ --recursive

(参考) ローカル環境でAWS CLIをセキュアに使う方法

3. CloudFrontの設定

S3とCloudFrontの基本的な設定は以下をご覧ください。
(参考) CloudFrontのオリジンにS3を設定する手順

上記に加え一つ追加の設定が必要で、これを設定しないと、ルートページ以外にアクセスすることができません。
hugoはアプリケーションサーバとしての機能を備えていないので、レンダリングしてくれないためです。
こちらのブログ記事 を参考に、CloudFront Functionsで以下を設定しました。

function handler(event) {
    var request = event.request;
    var uri = request.uri;
    if (uri.endsWith('/')) {
        request.uri += 'index.html';
    }
    else if (!uri.includes('.')) {
        request.uri += '/index.html';
    }
    return request;
}

CloudFront > 関数 > 関数の作成

CloudFront > ディストリビューション > ビヘイビア 画面にて任意のビヘイビアを選択し、作成した関数をビューワーリクエストとして関連付ける。

3. アクセス確認

CloudFront > ディストリビューション から作成したディストリビューションのドメイン名をそのままブラウザにコピペしましょう。

****.cloudfront.net

トップページ、ブログ記事が表示されれば成功です。

まとめ

今回は、hugoをパブリックに公開する設定を紹介しました。
次回以降は、記事や設定を更新した際の効率的なアップロード方法として、github actionsを使用した方法を紹介します。 また、次々回ではドメインを取得し、ドメインによるアクセス対応も行います。

参考ドキュメント

• https://qiita.com/hideki/items/1f7fe183196259cdc4e8