新しいことにはウェルカム

技術 | 電子工作 | ガジェット | ゲーム のメモ書き

AWSでサーバーレスな開発用シングルページアプリケーションを立ち上げる方法

シングルページアプリケーションを作っていて、外部には公開したくないが、ローカル以外のサーバーに置いて配信テストをしたいことがあったので、その時の構築メモです。

要件

静的配信だし、S3を使えばサーバー立てなくてもAWSのサービスだけでできそうな感じだったので、下記のようなものを想定しました。

  • サーバーレス(既存サービスを利用する・インスタンスを立ち上げない)
  • httpsで静的配信
  • http通信は不可
  • キャッシュしない(アップした更新をすぐに確認できるようにするため)
  • サブディレクトリによるルーティング可能
  • IPアドレスによるアクセス制限

手順

HTTPS静的配信

S3にファイルを置いて、Static website hostingすればいいのかなと考えていたのですが、https配信するにはCloudFrontを使う必要がありました。 また、CloudFrontで配信すれば、S3をStatic website hostingで公開する必要はなかったです。

CloudFrontのDistributionsページから[Create Distribution]-[Web]-[Get Started]と進んで配信を作成します。

Origin Settings

AWSでサーバーレスな開発用シングルページアプリケーションを立ち上げる方法
Origin Settings

  • Origin Domain Name
    • 公開するバケットを選択します
  • Origin Path
    • どのサブディレクトリ配下を公開するかを指定します。「/」から始まり、最後の「/」は不要です。
  • Restrict Bucket Access
    • CloudFrontを使って公開する場合、S3を公開する必要はありません。「Yes」にします。
  • Origin Access Identity
    • Identityが必要なのですが、作成していない場合「Create a New Identity」で作成します。
  • Grant Read Permissions on Bucket
    • よしなに権限設定してくれるので「Yes」にします。

Default Cache Behavior Settings

AWSでサーバーレスな開発用シングルページアプリケーションを立ち上げる方法
Default Cache Behavior Settings (1/2)

AWSでサーバーレスな開発用シングルページアプリケーションを立ち上げる方法
Default Cache Behavior Settings (2/2)

  • Viewer Protocol Policy
    • HTTPS配信のみを行いたいので「Redirect HTTP to HTTPS」にします
  • Object Caching
    • 開発用サイトなので、ファイルをアップしたらすぐに確認したく、キャッシュをしない設定にするため「Customize」を選択します。
    • Minimum TTL・Maimum TTL・Default TTL
      • キャッシュ時間の設定。キャッシュしないので「0」にします

Distribution Settings

AWSでサーバーレスな開発用シングルページアプリケーションを立ち上げる方法
Distribution Settings (1/2)

AWSでサーバーレスな開発用シングルページアプリケーションを立ち上げる方法
Distribution Settings (2/2)

  • AWS WAF Web ACL
    • ここでIP制限をかけることができます。後からでも設定できるので「None」にしておきます。
  • Default Root Object
    • シングルページアプリケーションの配信HTMLのファイル名を指定します。

「Create Disctibution」ボタンを押して配信を作成します。 結構時間がかかります。おそらく、想像しているより時間がかかり、動いているのかと途中心配になるかもしれませんが、忘れたころに完了します。

サブディレクトリによるルーティング

シングルページアプリケーションだと、サブディレクトリでルーティングを行うことがあるかと思います。

初期設定のままだと、サブディレクトリにファイルは無いためエラーがでてしまいます。 なので、エラーではなく配信ページを呼び出すように設定します。

先程作成した配信の詳細を開いて[Error Pages]-[Create Custom Error Response]ボタンを押して、エラー毎の挙動を追加します。

AWSでサーバーレスな開発用シングルページアプリケーションを立ち上げる方法
Custom Error Response

  • HTTP Error Code
    • 「404」を選択します。
  • Customize Error Response
    • エラーページではなく、配信ページを表示するため「Yes」を選択します。
  • Response Page Path
    • アプリケーションの配信HTMLファイル名を指定します。
  • HTTP Response Code
    • 「200」を選択します。

エラーコード「403」も同様に作成します。

これで、サブディレクトリにアクセスするとエラーではなく、配信ページが呼び出されるようになります。

ブラウザキャッシュ時間の設定

CloudFrontで設定したキャッシュ時間はCloudFrontのキャッシュ時間で、ブラウザのキャッシュ時間ではありません。 CloudFrontのキャッシュ時間を0にしても、ブラウザでキャッシュが有効になっていると、アクセスしても更新されません。 ですので、別途ブラウザのキャッシュを無効にする必要があります。

ブラウザがそのファイルをどれくらいキャッシュしておくかは、ファイル取得時のヘッダーの「Cache-Control」で判断し、値が「no-chache, no-store」だとブラウザはそのファイルをキャッシュしません。

CloudFrontで「Cache-Control」を設定するには、S3に置かれた大本のファイルの「メタデータ」に設定します。

AWSでサーバーレスな開発用シングルページアプリケーションを立ち上げる方法
S3 メタデータ

ただ、これを手動で1ファイル毎に設定するのは手間なので、AWS CLIでファイルをS3にアップする時に、フォルダごと設定するようにしました。

aws s3 cp --recursive --metadata-directive "REPLACE" \
    --cache-control "no-cache, no-store" \
    $LOCAL_PATH "s3://${UP_PATH}/"

IPアドレスによるアクセス制限

AWSのWAFでアクセス制限の設定(=ACL)を作成して、それをCloudFrontの配信に割当ます。

配信の詳細で、[General]-[Edit]-[AWS WAF Web ACL]で作成したACLを指定します。

AWSでサーバーレスな開発用シングルページアプリケーションを立ち上げる方法
AWS WAF Web ACL

ACLの作成は難しくはないのですが、手順が多いので、ここではIPアドレス制限のACLの作成についてザックリとだけ説明します。

  • [IP addresses]で許可するIPアドレスを作成する
  • [Rules]で指定IPアドレスにマッチした時のルール「When a request [does] [originate from an IP address in] [上記で作成したIPアドレス]」を作成する
  • [ACL]で上記のルールを追加し、「Action」を「Allow」、「Default action」を「Block」とする

以上で、CloudFrontが作成したURLにアクセスすると、S3にアップした「index.html」を起点としたSPAが読み込まれるようになります。

関連カテゴリー記事

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com

www.kwbtblog.com