【AWS】CloudFront + S3 + Route53 + NuxtJS で公開する手順

このブログは、次のような技術を利用して開発・運用している。

AWSの公式ドキュメントにも、下記ページにて、これらの技術を利用してサイトを公開する手順は記載されている。

• https://docs.aws.amazon.com/ja_jp/Route53/latest/DeveloperGuide/RoutingToS3Bucket.html

そのため、これを読みながらやれば問題なくできる・・・と思っていたのだが、結構つまずくポイントがあった。

本記事は、その経験を今後の備忘として残しておくものである。

余談

この記事は 2021年5〜7月の間に行った作業の備忘であり、当時は CloudFront の設定画面は英語のみであったため、それをベースとした手順としている。しかし、この記事をまとめている 2021年12月現在は、設定画面の大部分が日本語化されてしまっている。時代の流れは速い・・・。

全体の流れ

• S3 バケット を作成する
• S3 バケット に nuxt generate で生成したコンテンツをアップロードする
• CloudFront Distribution を作成する
  • このタイミングで CloudFront と S3 を疎通させる
• Route53 で好きな 独自ドメイン を購入する
• CloudFront Distribution に Route53で購入した独自ドメイン を設定する
  • このタイミングで ACM にて 独自ドメイン用の SSL証明書を発行
• Route53 で CloudFront Distribution にDNSルーティングを行う

このあとに下記を行い、手動アップロードが不要なフローに変更しているが、これは記事を分けてまとめる。

• GitHub から S3 にデプロイするための CLI ユーザを作成する
• GitHub Actions で自動デプロイできるようにする

今回は下記のようにした

これ以降の手順の説明も、下記のバケット名・ドメイン名を使用して行う。

• S3バケットとして same-san.com を作成
• origin に same-san.com の S3バケットを指定して、CloudFront Distribution を作成
• same-san.com の独自ドメインを Route53 上で購入
  • ACM で same-san.com 用の SSL証明書を発行

S3 バケットの作成

下記にアクセスし、 バケットを作成 をクリックする。

• https://s3.console.aws.amazon.com/s3/home

次の2項目を入力・選択する。

その他の設定はデフォルトのままでOK。

今回は CloudFront 経由でのみアクセスさせることから、 このバケットのブロックパブリックアクセス設定 は パブリックアクセスをすべて ブロック にチェックが入っていることを確認する。

nuxt コンテンツを S3 にアップロード

最終的には GitHub Actions で自動デプロイさせるようにするが、それが完成するまでの間は、次の手順でコンテンツの生成を行い、s3 にアップロードする。

$ npm run generate
$ cd dist
$ aws s3 sync . s3://BUCKET_NAME/

CloudFront(1) ディストリビューションの作成

下記にアクセスし、 Create Distribution > Get Started する。

• https://console.aws.amazon.com/cloudfront/home

この後に記載する全ての設定項目を入力・選択したら、https://console.aws.amazon.com/cloudfront/home にアクセスし、 一覧から 作成したディストリビューションの Domain Name を控えておくと良い。 （最終的にこの Domain Name にアクセスして使用して動作確認するため）

Origin Settings

Default Cache Behavior Settings

Distribution Settings

ここまで全て完了したら Create Distribution をクリックする。
下記の文言が表示されればOK。

CloudFront Private Content Getting Started
Using CloudFront to Serve Private Content
For information about how to restrict access to your private content by using signed URLs or signed cookies, see Serving Private Content through CloudFront  in the Amazon CloudFront Developer Guide.

参考：http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/PrivateContent.html

CloudFront(2) ディストリビューションの設定変更

NuxtJSで開発したソースをそのままNode.jsサーバで動かす場合（ npm run dev によるローカル環境での実行を含む）は 何もしなくても http://localhost にアクセスすれば、トップページが表示される。

しかし、 nuxt generate したファイルを s3 + CloudFront で動かす場合は、例えば http://localhost にアクセスがあった場合、 http://localhost/index.html へアクセスさせる、というような設定をディストリビューションに行わないと動作しない。

このようなことが必要になるのは、nuxt generate で 生成したソースは index.html ファイルとして書き出されるためである。

そして、またややこしい話として、NuxtJS では下記の2種類のレンダリングモードを選択できるのだが、

• ssr: false の場合（いわゆる SPAモード）
• ssr: true の場合（いわゆる SSRモード）

どちらを選択するかによって、下記のように rewrite target （アクセスさせる先） が異なるため、必要なディストリビューション設定が異なる、ということ。

今回、SPA、SSRの両方で試し、両方で正常に実行させることができたので、各設定を下記に記載する。

SPAモードの場合

SPAモード（ssr: false）の場合、 必ず ルートに置いてある /index.html に アクセスさせなければいけない。
逆に言えば、 どんなアクセスでも、とりあえず /index.html に流しておけば良いということ。

対応方法としては、index.html でないパスへのアクセスがあった場合（ / や /list など）に403エラーが返却されるので、 その 403エラーを catch して /index.html を参照するように rewrite する、といったことをするのが手っ取り早い。

具体的な手順

下記にアクセスし、対象のディストリビューションを選択する。

• https://console.aws.amazon.com/cloudfront/home

Error Pages タブを開き、 Create Custom Error Response をクリックし、 次の通りに入力するだけで良い。

もし上で動かない場合、下記の設定も追加すると動く場合がある。

SSRの場合

SSRモードの場合、なんでもかんでも ルートにおいてある /index.html に返せばいいわけではなく、各ディレクトリごとに設置される index.html に流す必要がある。 例えば、 /article/how-to-use-nuxt へアクセスされた場合は article/how-to-use-nuxt/index.html を返すようにするのが正しい。

そのため、SPAモードのように、エラーが発生したら一律同じものを返す、という簡単な対応では足りない。

これの対応策としては、 CloudFront と S3 の間で処理を実行可能な Lambda@edge か CloudFront Functions を利用して、s3へのリクエストURLを rewrite するのが良い。

後者の CloudFront Functions は、実は 2021年5月にリリースされたばかりの新機能。
せっかくなので今回はこちらを使う方法を試したので、その手順を下記に記載する。

CloudFront Functions を利用した具体的な手順

• 下記URLに遷移する。
  • https://console.aws.amazon.com/cloudfront/v3/home?#/functions
• Create function をクリックする。
• Function name に任意の関数名 (今回は nuxt-rewrite-url とした) を入力する。
• build タブ > Development 内に 下記のコードを入力する。
  （ 参考：https://github.com/aws-samples/amazon-cloudfront-functions/blob/main/url-rewrite-single-page-apps/index.js ）

function handler(event) {
    var request = event.request;
    var uri = request.uri;
    
    // Check whether the URI is missing a file name.
    if (uri.endsWith('/')) {
        request.uri += 'index.html';
    } 
    // Check whether the URI is missing a file extension.
    else if (!uri.includes('.')) {
        request.uri += '/index.html';
    }

    return request;
}

Publish タブ > Publish をクリックする。

Associate タブ > で次の通りに選択し、 Add association をクリックする。

（余談）ディストリビューション側から CloudFront Functions を設定する

上の手順では CloudFront Functions の画面から ディストリビューションを紐付けする手順としたが、逆に ディストリビューション側から CloudFront Functions を紐付けることも可能。
その場合、上の 「Associate タブ > で次の通りに選択し、 Add association をクリックする。」の部分の代わりに、下記の手順を実行すれば良い。

下記にアクセスし、対象のディストリビューションを選択する。

• https://console.aws.amazon.com/cloudfront/home

Behaviors タブを開くと、既存の行がすでに1行あるはずなので、その行にチェックを入れ、 Edit をクリックする。
（ 今回の例だと Origin or Origin Group が S3-same-san.com となっている行があるはず ）

Edge Function Associations の設定を探し、 次の通りに入力する。

動作確認

ここまで完了したら、CloudFront(1) ディストリビューションの作成 で作成した際に控えていた Domain Name に http:// を付与してアクセスする。

正常に設定できていれば、自分で開発した NuxtJS ソースのトップページが表示されるはず。

Route53 で CloudFront Distribution にDNSルーティングを行う

次の手順で進める。

• Route53 で 希望のドメインを購入
• ACM で 購入した独自ドメインの ACM証明書 を発行
• CloudFront Distribution Settings で 独自ドメイン設定 & ACM証明書の適用
• Route53 で ルーティング設定

Route53 で ドメインを購入

下記URLにアクセスし、ドメインの登録 n ドメイン (n=数値) をクリックする。 https://console.aws.amazon.com/route53/v2/home#Dashboard

次の画面で、 ドメインの登録 をクリックする。

あとはテキストボックスに希望のドメインを入力して先の画面へ進んでいけば購入完了までいける。

ACM でSSL証明書発行

Route53 で購入したドメインの前提。

• 証明書のプロビジョニング で 今すぐ始める を選択
• パブリック証明書のリクエスト のラジオボタンにチェックを入れ、　証明書のリクエスト を選択する
  • 選択肢
    • パブリック証明書のリクエスト
    • プライベート証明書のリクエスト
• same-san.com を入力して 次へ を押す
• この証明書に別の名前を追加 は一旦スルーでOK
• 検証方法の選択 は、次の選択肢があるが、今回は DNS の検証 を選択して 次へ を押す
  • DNS の検証
    • 証明書リクエストのドメインの DNS 設定を変更する権限がある場合のみ、選択可能。Route53 や お名前.com で取得 かつ その管理者ログイン情報を持っていれば 取得可能と考えて問題ない
  • E メールの検証
• タグを追加 は 何も選択せず 確認を押す
• 確認画面が表示されるので、問題なければ　確定とリクエスト を押す
• 進行中のリクエスト 証明書のリクエストが作成されましたが、その状況は検証保留中になっています。証明書の検証と承認を完了するには、追加のアクションが必要です。 と表示される。
  • DNS 設定をファイルにエクスポート をクリックし、 ACM検証用の CNAME設定をダウンロードしておく。
  • （Route53 でドメインを取得している前提であれば）ドメイン名（ ▼ same-san.com ）をクリックすると、 Route 53 でのレコードの作成 というボタンが表示されるので、これをクリックする。
  • すると、以下はドメイン検証のための DNS レコードです。以下の [作成] をクリックして、Route 53 ホストゾーンでレコードを作成します。 と表示される。ホストゾーン（ドメイン名）を確認し、問題なければ 作成 をクリックする。
  • 成功 DNS レコードは Route 53 ホストゾーンに書き込まれました。変更が反映され、AWS がドメインを検証するまでに最大で 30 分かかる場合があります。 と表示されればOK。
  • ここまで問題なく終わったら、 続行 をクリック。

CloudFront Distribution で 独自ドメイン & ACM証明書の選択

まず、Distribution > General > settings にて Alternate domain name (CNAME) - optional に same-san.com を入力 Request certificate をクリックすると、下記画面に遷移するので、 そこで same-san.com の ACM を取得（手順は後述）

• https://console.aws.amazon.com/acm/home?region=us-east-1#/wizard/

取得が終わったら、元の CloudFront の画面で Custom SSL certificate - optional から 先ほど取得した 証明書を選択する（入力項目横の更新ボタンを押すと、リロードしなくても プルダウンに 今作成した証明書が表示されるようになる）

すると次の入力項目が表示されるようになる。

Route53 でルーティング設定

• Route53 にアクセス
  • https://console.aws.amazon.com/route53/v2/home#Home
• n ホストゾーン (n=integer) をクリック（すると次のURLに遷移するはず）
  • samesan.com をクリック

動作確認

ここまで問題なく終わっているならば、購入した独自ドメインのURL へアクセスすれば、問題なく s3 にアップロードしたサイトが表示されるはず。