webサービスの本番サーバーをダウンさせてしまった時に爆速で土下座する方法🙇‍♂️🙇‍♂️💦💦

こんにちわ。
れとるときゃりー([@retoruto_carry](https://twitter.com/retoruto_carry))です。よろしくね。

# なにをしたか
運営している「[みんなのボタンメーカー](https://btnmaker.me/)」というサービスのサーバーを誤って落としてしまった。

※ このサービスの開発に関する記事も書いているのでこっちも読んでね
[「ツイッターでつぶやけるボタン」を簡単に作成できるサービスをリリースしました【個人開発】](https://qiita.com/retoruto_carry/items/d6a173701c8e40f0c294)

復活させるまでの間、サービスを訪れた人に「サーバーがダウンしているのでしばらく待ってね」と伝えたい。

そのために、DNSを設定して、GitHub Pagesでホスティングした「サーバーがダウンしています」ページにリダイレクトするようにした。

順番に説明していく。

# 1. 誤ってサーバーを落とす

## LINEで通知が来る

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/5cb4522a-47b7-22fc-049a-a6b466a11d7b.png)

サーバーがダウンするとLINEに通知が来るようにmackerelというツールで設定している

## 実際にサービスを見に行くと落ちている

あっ....

<img width="1679" alt="スクリーンショット 2019-05-15 22.10.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/1149fd84-1523-3b93-a43e-086d5c103b1f.png">

# 2. とりあえずtwitterで謝る🙏🙏
謝ろう
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">みんなのボタンメーカーの運営です。ボタンメーカーのサーバー代払ってなくて今サーバー落ちてますｗｗｗｗｗ今日私が家に帰ったら払うので待っててｗｗｗｗｗｗ<br><br>ボタンメーカーの利用者のみんなに知らせたいのでRTしてくださいｗ<a href="https://t.co/XcLVlvoVEr">https://t.co/XcLVlvoVEr</a></p>&mdash; れとるときゃりー💛webサービス開発で生きていきたい (@retoruto_carry) <a href="https://twitter.com/retoruto_carry/status/1128463890554150912?ref_src=twsrc%5Etfw">2019年5月15日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 3. 「サーバーがダウンしています」ページを用意

## GitHubレポジトリを作ってこんな感じのページをpush

```index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>sorry</title>
</head>
<body>
  <p>ごめんwwwwwwサーバー落としちゃったｗｗｗｗ</p>
</body>
</html>
```

```404.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>sorry</title>
</head>
<body>
  <p>ごめんwwwwwwサーバー落としちゃったｗｗｗｗ</p>
</body>
</html>
```
<img width="1154" alt="スクリーンショット 2019-05-15 22.14.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/e1326009-b6a9-ce45-c397-ff37d006a2c1.png">


`404.html`にも同じ内容を用意することで、 https://btnmaker.me/hoge などで遷移して来たものも「サーバーがダウンしています」が表示できるようにする。

※ CNAMEというファイルは後でGitHub上で設定するので作らなくて良い。

# 4.GitHub Pageを有効にする

master branchを選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/3631b0f4-3d8c-8cf8-124f-cddd5e71bf6e.png)



# 5. webサーバーのDNSのCNAMEを変更して、上記で用意したページに向き先を変更

## DNS上の設定

`[ユーザー名].github.io`をCNAMEに設定

<img width="1045" alt="スクリーンショット 2019-05-15 23.52.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/20d0079c-ea68-8d6c-ed83-db5034c30569.png">


## GitHub上でのCNAMEの設定

Custom domainに`btnmaker.me`などのリダイレクト元を設定

<img width="852" alt="スクリーンショット 2019-05-15 22.15.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/01b130cf-6bc3-1264-c287-575821bce31b.png">

# 6.サイトを訪れた人全員に謝れるようになる🙏🙏

`btnmaker.me`に訪れた人は、全員このページを見ることになる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/819e1539-46ec-0ee6-6d34-ee264b6197b7.png)

# 番外編
## 復活させよう
本番サーバーを復活させて、DNSのCNAMEをもとに戻す
元通りになった🎉🎉
<img width="1679" alt="スクリーンショット 2019-05-15 22.13.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156690/9d315c7e-eb8f-0e06-5a3e-f97750ebdcc1.png">


# まとめ
webサービスを落としたら謝ろう🙏🙏🙏🙏

# 合わせて読んでほしい記事

このサービスの開発に関する記事も書いているのでこっちも読んでね
[「ツイッターでつぶやけるボタン」を簡単に作成できるサービスをリリースしました【個人開発】](https://qiita.com/retoruto_carry/items/d6a173701c8e40f0c294)

# ここまで読んでくれた方へ
ここまで読んでくださりありがとうございます。

いいねやコメント、SNSでの共有等をしてくださると、今後の励みになります。よろしくお願いします。

良かったらツイッター([@retoruto_carry](https://twitter.com/retoruto_carry))もフォローしてね