【AWS】HugoをS3・CloudFrontにデプロイする【サイト構築②】

ローカルで構築したHugoのブログサイトをAWS S3にデプロイし、Amazon CloudFrontで配信するまでの流れをまとめていきます。

なお、ローカルでのHugoサイトの作成と、Route 53での独自ドメイン取得が出来ている前提で話を進めていきます。

HugoをS3にデプロイする

まずはS3のバケットを作成していきます。

サイトは独自ドメインで運用するので、最終的にはS3のパブリックアクセスはブロックしてホスティングします。その前にS3でホスティングしてサイトを確認したいので、一旦パブリックアクセスをすべてブロック」のチェックは外します。

その他の設定はいじらなくて良いので、そのままバケットを作成します。

続いて、ビルドしたファイルのアップロードを行っていきます。

Hugoのビルド時に生成されたファイルがpublicフォルダ内にあるので、それらを選択します。下にある「アップロード」をクリックすると選択されたファイルがバケットにアップロードされます。

続いて、プロパティからS3の「静的ウェブサイトホスティング」を有効にしていきます。

インデックスドキュメントにはindex.htmlを入力します。

次に、「アクセス許可」からバケットポリシーを設定します。ポリシーに以下を記述します。

 1{
 2    "Version": "2012-10-17",
 3    "Statement": [
 4        {
 5            "Sid": "PublicReadGetObject",
 6            "Effect": "Allow",
 7            "Principal": "*",
 8            "Action": [
 9                "s3:GetObject"
10            ],
11            "Resource": [
12                "arn:aws:s3:::バケット名/*"
13            ]
14        }
15    ]
16}

ここまでで、静的ウェブサイトホスティングが完了するので、「プロパティ」で発行されたURLからアクセスし、サイトが表示されるかを確認しましょう。

ACMでSSL証明書を発行する

S3へのデプロイが完了したので、S3へCloudFrontからでアクセスするように設定します。その前にACMでSSL証明書を発行していきます。CloudFrontにACMのSSL証明書を適用するにはリージョンを「米国東部 (バージニア北部)　us-east-1」にする必要があります。¹

「パブリック証明書をリクエスト」を選択します。

ドメイン名に取得ドメインを入力します。当サイトの場合、併せて*.取得ドメインも追加しています。

ここまでで証明書の発行手続きが完了するので、ドメインにCNAMEレコードを追加します。「Route53でのレコード作成」から作成を行います。

証明書の「状況」ステータスが「発行済み」になれば成功です。

CloudFrontからサイトにアクセスする

証明書の発行まで完了したので、S3へCloudFrontからでアクセスするように設定します。まずディストリビューションの作成から行っていきます。「オリジンドメイン」とOACの「名前」はS3のバケット名を入力します。

「カスタムSSL証明書」には先ほど作成した証明書を、「デフォルトルートオブジェクト」にはindex.htmlを入力し、ディストリビューションを作成します。

続いて、S3バケットのアクセス許可設定を変更します。作成したディストリビューションの「編集」をクリックし、ポリシーをコピーしてバケットポリシーを変更します。

バケットポリシーにはコピーしたものをそのまま差し替えればOKです。

ここまでで一旦ディストリビューションの設定は終わりです。しかし、このままだとルートオブジェクト以外へのリクエストにindex.htmlが付かないので、ルートオブジェクト以外にアクセスができない状態になってます。その為、CloudFrontの関数でリクエストを書き換える処理を設定します。

関数名を適当に設定し、以下のコードを貼り付けます。「発行」タブから「関数の発行」をクリックします。

 1function handler(event) {
 2    var request = event.request;
 3    var uri = request.uri;
 4    if (uri.endsWith('/')) {
 5        request.uri += 'index.html';
 6    }
 7    else if (!uri.includes('.')) {
 8        request.uri += '/index.html';
 9    }
10    return request;
11}

関数は作成しましたので、ディストリビューションの「ビヘイビア」から作成した関数を関連付けします。

最後に、ドメインのAレコードをCloudFrontに変更します。

これでCloudFrontでの配信の設定は終わりです。取得したドメインにアクセスし、サイトが表示されたら成功です。

ついでに、最初の方でパブリックアクセスのブロック設定をOFFにしていたので戻しておきましょう。

今回はHugoサイトをAWSにデプロイ・配信するまでをまとめました。以上で記事を終わりにします。

参考文献

• チュートリアル: Amazon S3 での静的ウェブサイトの設定 | Amazon Simple Storage Service

• AWSでSSL証明書を発行する手順 | 株式会社カサレアル BSブログ

• index.html を追加してファイル名を含まない URL をリクエストする | Amazon CloudFront