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

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

ブログ構築シリーズ


静的サイトジェネレータ「Hugo」を使って当ブロブサイトを S3 + CloudFront の構成でホストすることができましたので、 構築~デプロイまでの流れをブログ構築シリーズとして全6回でご紹介していきます。 第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周りの設定はまた次回!

スクリーンショット2022-07-3014.31.47.webp

 

環境


  • 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 > 関数 > 関数の作成 スクリーンショット2022-07-3014.52.50.webp

 

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

スクリーンショット2022-07-3014.56.26.webp

 

3. アクセス確認


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

****.cloudfront.net

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

 

まとめ


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

 

参考ドキュメント