Webサイトを設定ゼロで爆速デプロイする Serverless Component を公開しました⚡️

設定ゼロでウェブサイトを爆速デプロイする Serverless Component （website-optimized-cloudfront） を公開しました。

この Serverless Component は React, Vue をはじめとした JS フレームワーク にも対応しており、従来の serverless-component/website と比較するとキャッシュ最適化され、最速 10ms 以内 でコンテンツを表示できます。

I launched new Serverless Component !!

⚡️website-optimized-cloudfront ⚡️

📦 Deploy static website on serverless infrastructure with zero configuration.

✈️ Fastest content load time ~10ms

🔀 Surpport Client Side Routing#serverless #react #vue https://t.co/G7aIBNYqld

— G 🌥️ (@gee0awa) August 20, 2021

#Web サイトをデプロイする

website-optimized-cloudfront コンポーネントを使用して Web サイトをデプロイしてみましょう。
※ Serverless Framework および AWS を利用します。Serverless Component の基本的な使用方法についてはこちらの記事を参照してください。

クイックスタート

簡単に始められるようにテンプレートを用意しています。
まずは、以下のように TypeScript 製の React アプリケーションをローカルに準備しましょう。

$ serverless create --template-url https://github.com/daisuke-awaji/website-optimized-cloudfront/tree/main/templates/react-starter-typescript
$ cd react-starter-typescript

yarn コマンドを使用して、依存モジュールをインストールします。

$ yarn

あとはデプロイするだけです。シンプルですね！

$ serverless deploy

Serverless ダッシュボード

Serverless ダッシュボードを確認してみましょう。

以下の様に distributionUrl が示す URL に Web サイトがデプロイされています。

画面を開くとこのような Web サイトがデプロイされていることがわかります。
開発者コンソールのネットワークタブを確認してみてください。コンテンツがキャッシュ最適化されており、高速にWebページが表示できることが確認できます。

なお、サンプル Web サイトはこちら に公開しています。

後片付け

remove コマンドでリソースを削除しましょう。

$ serverless remove

自分のWebサイトをデプロイする

サンプルアプリケーションではなく、自分の Web サイトをデプロイする場合、serverless.yml に以下のように記入します。

component: website-optimized-cloudfront # (required) name of the component. In that case, it's website.
name: my-website # (required) name of your website component instance.
org: serverlessinc # (optional) serverless dashboard org. default is the first org you created during signup.
app: my-app # (optional) serverless dashboard app. default is the same as the name property.
stage: dev # (optional) serverless dashboard stage. default is dev.

inputs:
  src: ./src # (optional) path to the source folder. default is a hello world html file.
  domain: serverless.com # (optional) domain name. this could also be a subdomain.
  region: us-east-2 # (optional) aws region to deploy to. default is us-east-1.
  bucketName: my-bucket # (optional) aws bucket name. default is an auto generated name.
  indexDocument: index.html # (optional) index document for your website. default is index.html.
  errorDocument: index.html # (optional) error document for your website. default is index.html.

特に、デプロイの前にビルドする必要のある場合、ビルドスクリプトを hook に記述し、配信するディレクトリを dist に指定します。 webpack を利用してコンテンツをまとめたり、TypeScript 製のアプリケーションをコンパイルする際に利用できます。

inputs:
  src:
    src: ./src # the input source folder
    hook: npm run build # the hook you want to run
    dist: ./dist # the output dist folder

何が最適化されているのか

このコンポーネントは CloudFront と ブラウザ におけるキャッシュを実現しており、特に SPA 構成のアプリケーションに最適化されています。

サーバサイドキャッシュ（CloudFront）

シンプルな SPA アプリケーションを CloudFront と S3 で配信する場合、S3 に index.html を配置して CloudFront にキャッシュします。しかしながら、react-router や vue-router をはじめとしたクライアントサイドルーティングを実装している場合、CloudFront はキャッシュヒットしない場合があります。

たとえば、以下 URL が https:://xxx.cloudfront.net へのリクエストの場合 CloudFront はキャッシュしたコンテンツを返却できますが、 https:://xxx.cloudfront.net/about へのリクエストの場合は CloudFront はキャッシュヒットしないため、S3のオリジンからコンテンツを取得してクライアントに返却します。

多くの Web サイトではいくつかのパスによってページを分ける実装（ルーティング）をしているでしょうから、この問題は致命的です。

そこで、website-optimized-cloudfront コンポーネントでは、リクエストされた情報と S3 のコンテンツを紐づけることで、CloudFront からキャッシュを返すことができるよう配慮しています。この処理は Edge ロケーションで実行されるため、非常に高速です。

ブラウザキャッシュ

CloudFrontにおけるキャッシュは１日間保持され、ブラウザでは html 以外の静的コンテンツをキャッシュします。
これにより、SPAアプリケーションを表示するためには軽量な最小限の index.html だけを CloudFront から取得すれば良いだけになります。もちろん、細かいチューニングは必要かもしれませんが、ほとんどの SPA 構成の Web サイトにおいてこの設定で十分でしょう。

File	Browser	CloudFront
html	no-store	1 day
css, js, json, ico, png etc.	1 day	1 day

まとめ

Serverless Component を使用した Web サイトの構築方法について紹介しました。
website-optimized-cloudfront コンポーネントを使用することで、手元の Webサイトアプリケーションを即座にデプロイし、高速配信することができます。

Serverless Component は従来の Infrastructure as Code のアプローチとは異なり、ユースケースに特化したコンポーネントとして インフラを組み立てることができる強みがあります。うまく組み合わせて使用することで、デリバリを高速化できます。今後も Serverless のプロダクトには注目していきたいものですね。