Edited at

IBM Cloud Internet Services (CIS) でSorryページを設定


CISを使ってSorryページを表示する

IBM Cloud Internet Services (CIS)で、オリジンサーバーが全部ダウンした時に、Sorryページを表示させる方法です。方法はいくつか考えられますが、今回の手法を使うことで、Sorryサーバー自体の運用コスト(費用・手間)を考えずに済むので良いと思います。

CISにはエラーページをカスタマイズする機能があるため、それを利用して、オリジンサーバーが全部ダウンした時のページを用意します。


デフォルトのエラーページ

オリジンサーバーが全部ダウンした時、デフォルトでは下記のError 521が返されます。

よって、CISの5xx系エラーページをカスタマイズします。

image.png


エラーページのカスタマイズ

下記を参照し、エラーページのカスタマイズを行います。

https://cloud.ibm.com/docs/infrastructure/cis?topic=cis-custom-page

https://cloud.ibm.com/docs/cis-cli-plugin?topic=cis-cli-plugin-cis-cli-commands#custom-page

https://qiita.com/testnin2/items/475ef23f61d9f4e018b8

エラー521のカスタマイズなので、500_errorsについてのカスタマイズを行います。

5xxのエラーページは、決まったTokenを、HTMLファイル中に含めておく必要があります。具体的には、HTMLファイルのbodyに「::CLOUDFLARE_ERROR_500S_BOX::」という文字列を含めます。

https://cloud.ibm.com/docs/infrastructure/cis?topic=cis-custom-page#available-custom-error-tokens

今回は下記のHTMLファイルを用意しました。このファイルは、521以外の5xx系のエラーでも共通で使われるので、自分で記述する部分は汎用的な文言にしておくのが良いと思います。

5xx系のエラーページにどういう種類があるかは、下記に情報があります。

https://support.cloudflare.com/hc/en-us/articles/115003011431-5xx-Server-Error

<!DOCTYPE html>

<html>
<head>
<title>Welcome to IBM Cloud!</title>
<style>
body {
width: 35em;
margin: 0 auto;
font-family: Tahoma, Verdana, Arial, sans-serif;
}
</style>
</head>
<body>
<p><h1>Sorry, this site is temporarily unavailable.</h1></p>

::CLOUDFLARE_ERROR_500S_BOX::
<br>
<img src="./cloud.png" alt="IBM Cloud Blue">

</body>
</html>
#

このカスタムエラーページをCISに登録(アップロード)する時だけ、CISのシステムからインターネット経由でHTTPアクセス可能な場所にこのファイルを置いておく必要があります。

カスタムエラーページのファイルを一時的にウェブサーバーで公開した後、下記のコマンドでCISに登録(アップロード)します。2019年5月時点では、この設定はCLI経由でのみ行えます。今回はsorry_custom.htmlというファイル名で用意しましたが、これは任意の名前で構いません。一度登録(アップロード)すれば、CISのエッジにキャッシュされますので、元々のファイルは削除しても構いません。

CISのインスタンスIDの確認等は、下記が分かりやすいです。

https://qiita.com/testnin2/items/475ef23f61d9f4e018b8

$ ibmcloud cis custom-page-update "500_errors" http://【カスタムエラーページのファイルを一時的に配置したサーバーのIP】/sorry_custom.html -d 【CISのインスタンスID】

ドメイン '【CISのインスタンスID】' の custom-page '500_errors' を更新中...
OK

ID 500_errors
状態 customized
説明 5XX Errors
URL http://【カスタムエラーページのファイルを一時的に配置したサーバーのIP】/sorry_custom.html
デフォルト・ページのプレビュー http://cloudflarepreview.com/preview-cpage?act=preview&target=cf-error:500s
必須トークン ::CLOUDFLARE_ERROR_500S_BOX::
作成日 2019-05-19T14:06:54.869046Z
変更日 2019-05-20T06:17:18.604703Z
$

オリジンサーバーが動いている状態でアクセスすると、通常通り、オリジンサーバーから応答が返ります。

image.png

この状態で、オリジンサーバーをダウンさせ、先ほどと同じURLにアクセスすると、デフォルトのエラー521のページではなく、登録したカスタムエラーページに、状況に応じた内容が自動的にtoken部分に埋め込まれて表示されます。

画像も利用可能でした。(base64でエンコードされてHTMLファイル内に埋め込まれます。) サイズは、base64でエンコードされた部分も含めて1.5MB以内にする必要があります。

https://cloud.ibm.com/docs/infrastructure/cis?topic=cis-custom-page#customize-error-page

image.png

CISのロードバランサーを使っている場合も、配下のオリジンサーバーが全てダウンすると、同じ521エラーのページが使われますので、同じ設定が使えます。TOK02、TOK04のオリジンサーバーが両方ダウンした時にSorryページを表示する、などの使い方ができるでしょう。

以上の方法により、元々のCIS+オリジンサーバー以外のリソースを使うことなく、Sorryページを実現できました。