こういう人向け

  • フロントエンドをSPA(シングルページアプリケーション)で構築している
  • リリース時にダウンタイムが発生するのをなんとかしたい

なぜダウンタイムが発生するのか

リリース時にダウンタイムが発生する原因は、「APIとSPAの間でリリースに時間差が発生するから」です。

例えばAPIに後方互換性のない破壊的変更があったとします。

そういった場合、通常はAPIとフロントエンドを同時にリリースすれば問題ありませんが、フロントエンドがSPAの場合は厄介です。

なぜならページ遷移してもJavaScriptが再読み込みされないので、そのままでは古い仕様のまま新しいAPIを実行してしまったり、古いAPIを実行してしまったりと、不具合の元となってしまうからです。

それを防ぐためにメンテナンスページを表示したり503エラーを表示させたりするサイトもあります。いわゆるダウンタイムですね。

ダウンタイムを発生させないためには

JavaScriptを再読み込みさせる最も一般的な方法として「ブラウザのリロード」があります。

ブラウザをJavaScript側からリロードさせることによって強制的にJavaScriptを再読み込みさせることができます。

問題は、どうやってフロントエンドから「APIに破壊的変更があった」という事実を認識するかです。

APIの変更をフロントエンドで認識する方法

方法はいろいろありますが、例えば「全APIのレスポンスヘッダにフロントエンドの最新バージョン情報を入れる」という方法があります。

フロントエンドで自身のバージョンを保持しておいて、毎回APIのレスポンスヘッダの最新バージョンと照合し、一致しない場合は最新バージョンがリリースされたと判断してブラウザをリロードするのです。

しかし、この方法には穴があります。

APIのリリースとフロントエンドのリリースに時間差がある場合、その時間内にフロントエンドからAPIを実行されてしまうと不具合が発生してしまう可能性が否定できないからです。

APIとフロントエンドのリリース時間差に対応

その解決方法としては、「バージョンごとにAPIサーバーを用意する」という方法があります。

例えば、 https://api.shimba.io/v1/xxxxx というURLがあったとして、新しいバージョンのAPIをリリースすると https://api.shimba.io/v2/xxxxx というURLを新たに追加します。

こうすることで、APIのv2を新たにリリースしても、フロントエンドはv1を叩き続けるので仕様的な不整合は発生しません。

そして、v2に対応したフロントエンドのリリースが終わった時点で、前述のようにAPIからフロントエンドにレスポンスヘッダ経由で通知して、それを受け取ったフロントエンドがブラウザをリロードして、新しい実装でv2を叩くようになります。

AWSとServerless Frameworkなら実現しやすい

自前で上記構成を作ってもいいのですが、なかなか面倒だと思います。

そこでオススメしたいのが、AWSとServerless Frameworkを使う方法です。

Serverless Framework
https://serverless.com/

Serverless Frameworkとは、AWSのLambdaやAPI Gatewayを使ってAPIサーバーをカンタンに構築することができるフレームワークです。

そして、Serverless FrameworkからAPI Gatewayを操作すると、先ほどのような/v1や/v2に新旧バージョンのAPIをデプロイするといった設計を手軽に実現できます。

まとめ

APIとSPAによるサイトのリリース時のダウンタイムをゼロにするためには、

  • Serverless Frameworkを使ってAPIサーバーを構築する
  • 破壊的変更を伴うリリース時には新たにv2,v3といった新しいURLを用意する
  • フロントエンドの最新バージョンを全APIのレスポンスヘッダに入れる
  • フロントエンドはAPIのレスポンスヘッダに現バージョンより新しいバージョンが書かれてあったらブラウザをリロードする

といった設計、実装をすることが一番手軽かなと思います。

もちろん、今回ご紹介したソリューションも完璧ではありません。DBスキーマが変わった場合にどうバージョン管理するべきか、パフォーマンスが悪くなってしまわないか、といった課題も残されています。

ですが、「手軽にダウンタイムをゼロにする」という観点で考えるとこの方法がベターなのではないかなと思います。

それにこのあたりの分野は日々進化していて、AmplifyやAWS CDKといった新しい技術によって、もっと手軽に、もっと安全に、ダウンタイムゼロを実現できる日が来るかもしれません。

最新情報のキャッチアップは必須ですね。