目的
シングルページアプリケーション(SPA)をAWS S3にデプロイし、所有しているドメインのWebサーバーとして公開する。
AWS S3にバケットを作ってアプリケーションをデプロイしCloudFrontを使って公開してみました。
公開予定のWebサーバーのFQDNを所有するドメインで、spa-study.colibrifw.org とします。
このFQDNはS３のバケット名を同じにし、DNSのCNAME設定でS3を別名にとして設定するとFQDN名でS3に直接アクセスすることもできます。
CDN(コンテンツデリバリネットワーク)である CloudFront を使うことでhttps化し、インターネットで公開するのに必須となる暗号化した通信を実現できます。
構築手順
S3の構築
AWSコンソールにログインし、S3を選択します。
「バケットを作成」をクリック。
アクセス許可は後から変更します。
「バケットを作成」ボタンをクリックします。
SPAのビルドとアップロード
SPAはvue.jsです。他のSPAでも手順は同じだと思います。
vueアプリケーションをビルドします。
$ npm run build
...
entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
app (697 KiB)
css/chunk-vendors.6ee33664.css
js/chunk-vendors.b9cb5ef3.js
js/app.b1571df1.js
File Size Gzipped
dist/js/chunk-vendors.b9cb5ef3.js 349.56 KiB 113.26 KiB
... 6.08 KiB
dist/css/chunk-3b23b504.01cf6fd8.css 2.09 KiB 0.69 KiB
Images and other types of assets omitted.
DONE Build complete. The dist directory is ready to be deployed.
INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
ビルドすると dist ディレクトリができるのでその配下をS3にアップロードします。
syncを使うと開発側のディレクトリの状態と同期をとってくれます。
$ aws s3 sync dist s3://spa-deploy-study --delete --include "*" --acl public-read
upload: dist/css/chunk-3b23b504.01cf6fd8.css to s3://spa-study.colibrifw.org/css/chunk-3b23b504.01cf6fd8.css
delete: s3://spa-study.colibrifw.org/js/app.0f92450f.js
upload: dist/index.html to s3://spa-study.colibrifw.org/index.html
...
$
では、画面から確認するためバケットのリストから作成したバケットをクリックします。
バケットの詳細より、アクセス許可をクリック。
ブロックパブリックアクセス(バケット設定)を次の値に変えます。
バケットポリシーを編集し、次のポリシーを設定します。
バケットのオブジェクトに戻り、任意のオブジェクトにチェックをつけて「URLをコピー」ボタンを押してブラウザに貼り付ければ次の様に表示されることが確認できます。
また、DNSに上の様にバケット名がFQDNになる様なCNAMEを設定すると自分のドメインのホストの様に表示することができますがhttpでしかアクセスできないため保護されていない通信と表示されてしまいます。
そこで、SSLの証明書を用意してCloudFrontで配信することでHttps化を実現します。
SSL証明書の発行
SSL証明書は通常、CSRの鍵を作り有料で認証局に登録してもらう。認証局からもらった秘密鍵をWEBサーバーに組み込む。手間と時間とお金がかかります。
こちらにSSL証明書発行の流れが載っています。
JPRSの常時SSL化について
AWSでは、AWSのサービスを使っていれば証明書を無料で発行してもらえます。
AWS Certificate Managerが証明書を発行するサービスです。
それでは手順を確認していきます。
メニューからAWS Certificate Managerを選択し、リクエストボタンをクリック。
画面では東京リージョンですが、CloudFrontで利用するためには(バージニア北部)リージョンの証明書が必要です。リージョンを切り替えてから作成してください。
パブリック証明書をリクエストを選択。
完全修飾ドメイン名は、ホスト名FQDNを入れるか、先頭を*にしてワイルドカード証明書を発行することもできます。
DNS検証は、指定されたレコードをCNAMEとしてDNSに登録します。
リクエストボタンをクリックすると証明書一覧が表示されます。この時点ではステータスが「保留中の検証」になっています。
一覧の証明書IDをクリックして証明書を確認します。
cname _4ec79a74cd75b1daccd25f9637e305c3.colibrifw.org. _fd22bfbe611e4d33e4c181e706686874.hcxvpdkkrx.acm-validations.aws.
cname spa-study-api _4ec79a74cd75b1daccd25f9637e305c3.colibrifw.org.
ドメインに掲載されているCNAME名とCNAME値を次の様にCNAMEレコードとして設定します。
少しすると証明書のステータスが「承認済み」に替わります。
CloudFront作成
メニューよりCloudFrontを選択。
「ディストリビューションを作成」をクリックします。
オリジンドメインは配布元になるドメインです。今回はs3でカーソルを当てると選択肢として現れるS3のバケットリストから選びます。
これを選択すると「名前」項目も自動で入ります。
ビューワーというのはCDNにアクセスするクライアントでしょうか。HTTPSのみを選択しました。
「料金クラス」は配信するエリアの広さで値段が変わると思われます。
代替ドメイン名(CNAME)は、CloudFrontで公開されるFQDNを記述する。
カスタムSSL証明書はAWS Certificate Managerで登録したものを指定します。
CloudFrontで使うためには（バージニア北部）リージョンで作成しなければならない様です。
ディストリビューションを作成ボタンをクリックします。
ディストリビューションが作成できたら、DNSへ登録するためディストリビューションドメイン名をコピーします。
ディストリビューションドメイン名はCloudFrontのホスト名です。コピーしたホスト名をDNSのCNAMEに設定します。
設定後、ブラウザでアクセスし、SPAのページが見れ、SSL証明書のエラーもなければ成功です。
おまけ
SPAの中で画面描画だけでなく画面遷移をリダイレクトなどで行っているとき、AccessDeniedとエラーになることがあります。
これは、SPAの中で利用しているパスに対応したコンテンツがS3の中に存在しないことで発生するエラーの様です。
この対策はディストリビューションの詳細画面からエラーメッセージタブを選び、カスタムエラーレスポンスを作成します。
「カスタムエラーレスポンスを作成」ボタンをクリックするとエラーレスポンスを設定できます。
HTTPエラーコードは存在しないときに返却される403を選択
エラーレスポンスをカスタマイズありとし、レスポンスページのパスとしてSPAのデフォルトコンテンツを指定します。
レスポンスページを返す時のレスポンスコードは正常を表す200を選択します。
