静的サイトジェネレータ「Hugo」でブログサイトを S3 + CloudFrontでホストするまで [第3回〜Hugoを S3 + CloudFront でホストする〜]
![静的サイトジェネレータ「Hugo」でブログサイトを S3 + CloudFrontでホストするまで [第3回〜Hugoを S3 + CloudFront でホストする〜]](/img/thumbnails/hugo.webp)
ブログ構築シリーズ
静的サイトジェネレータ「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周りの設定はまた次回!
環境
- 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
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を使用した方法を紹介します。
また、次々回ではドメインを取得し、ドメインによるアクセス対応も行います。
参考ドキュメント