CloudFront

AWS S3+CloudFront+独自ドメイン+SSL+http2+AngularでSPAを配信する方法

最近AngularでSPA(シングルページアプリケーション)を作っているんですけど、これらはJavaScript(TypeScript)によって動くページなんで、Rubyなどのサーバーサイド言語やデータベースを一切必要としない、完全な静的ファイルのページです。

なのでApacehかNginxさえ動いていれば、コードをサーバーにデプロイするだけで動くわけですけども、最近はやれ全サイトSSL化だの、HTTP2.0だの単なる静的ファイルの配信だけでも要求が高い状況であります。SSL化するにあたっては証明書も取ってこないといけないですし、お金もかかる…

しかしAWSを使えば証明書も無料で取れるし、S3とCloudFrontを使えばいとも簡単に静的ファイルが配信できると聞いたので、試してみました。

S3バケットの作成

まずは静的ファイルを保管する「ドライブ」に相当するS3のバケットを作成します。

create_bucket

バケットの名前は公開するドメイン名を含むことが推奨されています。

create_bucket

途中の設定も全てスルーです。公開設定は全てCloudFrontから行います

create_bucket

最終画面まで行ったらCreate Bucketボタン押下で作成完了です。

とりあえずS3にビルドしたものを上げておく

後ですぐに動作確認ができるように、ビルドしたAngularアプリをアップロードしておきましょう。Angular CLIをお使いの方でしたら、以下のコマンドでビルドします。

ng build

ビルドしたものを、AWS-CLIを使ってアップロードします。

aws s3 sync dist s3://YOUR_BUCKET_NAME

ビルドされたものがアップロードされたか確認します。

s3_file_is_uploaded

CloudFrontの設定

続いてCloudFrontの設定です。CloudFrontの設定をする前に、TLS証明書を取得していることが望ましいです。以下の記事を参考に、予め取得しておいて下さい。

Create Distributionボタンから作成画面に進みます。CloudFrontから公開するのは通常のWEBページですので、WEBを選択します。

cloud_front_web

次に詳細な設定の画面に入ります。

cloud_front_setting1

設定する内容は以下の通りです。まずはOrigin Settingsの所から。

  • Origin Domain Nameには作成したS3バケットを選択
  • Origin Pathは無記入
  • Origin IDも変更なし
  • Restrict Bucket AccessはYesを選択
  • Origin Access IdentityではCreate a New Identityを選択。CommentはそのままでOK
  • Grant Read Permissions on BucketにはYes, Update Bucket Policyを選択

続いてDefault Cache Behavior Settingsの項目

  • Viewer Protocol PolicyにはRedirect HTTP to HTTPSを選択
  • Default Cache Behavior Settingsの項目はそれ以外はデフォルトで

続いてDistribution Settingsの設定

  • Alternate Domain Names(CNAMEs)の項目には自分で使うドメインを入力
  • SSL CertificateにはCustom SSL Certificateを選択して自分が作成したSSL証明書を選択
  • Default Root Objectにはindex.htmlと記入。頭にスラッシュをつけるのは厳禁
  • それ以外はデフォルトで

最後にCreate Distributionボタン押下で完了です。コンソール画面のStatusがDeployedになれば準備完了です。

Route53でDNSの設定をする

最後にドメインの設定です。Route53の画面から設定したいドメインのHosted Zoneを選択します。Create Record Setボタンから公開を希望するドメインとCloudFrontをエイリアスを使って結びつけます。

route53_cloudfront

ブラウザでアクセスしてAngularページが表示されていれば問題ありません。

angular_landing_page