Vue.js で構築した SPA を公開したときのドメイン周りの設定について、自分用の備忘メモとして残しておきます。
前提条件
- S3 に静的ホスティングした SPA サイトを公開したい
- タイトルに Vue.js と書きましたが、React でも Angular でも大まかな流れは一緒だと思います（Vue.js でしか試していないだけです）
- DNS として Route 53 を利用
- ドメインはお名前.comで取得
設定の流れ
- S3バケットの設定
- バケット作成
- ホスティングのための設定
- Route 53 の設定
- Host Zone を作成
- A レコードのエイリアスとして登録する
- NS レコードを確認しておく
- お名前.com 側の設定
- Route 53 の NS レコードの Value を4つお名前.com側に転記する
- nslookupコマンドで確認する（30分ほどかかる）
S3バケットの設定
流れとしては、
- S3 バケットを作成
- 静的ホスティング設定
- バケットポリシー設定
という流れになります。下記の記事の「S3へのホスティング」で細かく手順を紹介していますので、こちらの記事をご参照いただければと思います。
１点注意点として、バケット名をドメインと同じものにする必要があります。例えば、 hogehoge.net というドメインを取得するのであれば、バケット名も hogehoge.net とすることになります。
Route 53 の設定
まず、「Create Host Zone」からホストゾーンを新規作成します。
続いて、新たに A レコードを作成します。Alias Target の欄にカーソルを当てると、S3 のエンドポイントが表示されるのでそれを選択します。
また、NS レコードを次の設定で使用するので、控えておいてください。
お名前.com 側の設定
最後に、お名前.com 側のネームサーバの設定を行います。上の Route 53 の NS レコードを全て転記してください。
反映されるまでに30分から1時間ほどかかりました。適宜、nslookup コマンドで、ネームサーバの設定が更新されているか確認をしてみてください。
まとめ
先日書いた下記の記事で、フロントを SPA として作成し、バックエンドを API GW + Lambda + DynamoDB で構成するパターンを紹介しました。
このアーキテクチャで構築した Web サービスを公開するときに、本記事の内容が必要になります。サーバレス楽しい！SPA楽しい！と言ってきましたが、実はこの設定をしたことがなかったので整理してみました。少しでもお役に立てれば幸いです。
