先に直そうとすると
- 原因を探す
- 直す
- もう一度公開
原因が分かるまで、壊れたページが出たままになります。
📚 200stack のやさしい解説 · 第 6 回
更新したらサイトが壊れた!
「前に戻せる」仕組み
サイトの更新で表示が崩れることは、慣れた人にも起こります。壊れたときに「まず前のバージョンに戻す」考え方と、壊さないための予防のコツを紹介します。
もも金曜の夕方にサイトを更新したら、トップページが真っ白に…!
おもちあわてないで!今日は「前に戻せる」仕組みの話をするね。
動画で解説 🎬
動画で解説
よくある事故 💥
更新でサイトが壊れる、よくある 3 つの原因
原因の多くは、大きなものではありません。
ちょっとした書き間違い
記号が 1 つ抜けただけで、レイアウトが崩れることがあります
使っていた画像を消した
別のページで使っていた画像が、出なくなってしまう
サイトの部品を新しくした
使っている部品を新しい版にしたら、動きや見た目が変わることも
気をつけていても、起きるときは起きます。「壊さない」より先に「壊れたらどうするか」を決めておくのが現実的です。
本当に困るのは ⏰
困るのは「壊れている時間」
直すまでの間も、お客さんはサイトを見に来ます。夜中や週末だと、直す人がすぐには動けないこともあります。
まず元に戻すと
- 前のバージョンに戻す
- 落ち着いて直す
先にサイトを見られる状態に戻してから、ゆっくり原因に向き合えます。
⏪ 壊れたら、直すより先に「まず元に戻す」
考え方 🗂️
更新のたびに「バージョン」を残しておく
更新するたびに、そのときのサイトをまるごと 1 つのバージョンとして残します(下はイメージです)。
バージョン 4
トップページを新しくした → 表示が崩れた
バージョン 3
お知らせを追加した → 問題なし
バージョン 2
画像を差し替えた → 問題なし
バージョン 1
最初の公開 → 問題なし
バージョン 4 に問題があれば、公開するのを 1 つ前のバージョン 3 に切り替えるだけ。ゲームのセーブからやり直すのと同じです。
200stack では ⏪
デプロイの履歴とロールバック
200stack では、GitHub に更新を送る(push する)たびに、サイトの組み立てから公開までが自動で進みます。この公開のことを「デプロイ」と呼びます。
デプロイの履歴
どの更新のときか、あとから分かる
デプロイは、更新のときに書いたメッセージや状態と一緒に、履歴として残ります。
🗂️ バージョンの一覧
ロールバック
直前の安定したバージョンへ戻す
問題が起きたら、ロールバック(前のバージョンに戻すこと)で、直前の安定したバージョンにすぐ戻せます。
⏪ 履歴から戻せる
落ち着いたら 🔍
戻したあとで、原因を直す
手がかりは、ビルド(サイトの組み立て)の記録と、壊れたバージョンで変えた所です。
1. ログと変更を見る
組み立ての記録(ログ)は、管理画面でリアルタイムに見られます
2. 原因を直す
変えた所を見直して、原因を直します
3. もう一度 push
直したものを、もう一度送ります
4. 新しいバージョンで公開
新しいバージョンが組み立てられ、公開されます
戻してから直す順番にしておけば、「早く直さなきゃ」というあせりが減ります。
予防のコツ 👀
本番に出す前に、プレビューで確かめる
そもそも、壊れたまま本番に出さない工夫もできます。
プレビューの URL
本番の前に、実際に開いて確かめる
変更の単位(プルリクエストやブランチ)ごとに、確かめる用の URL が自動でできます。
🔗 変更ごとに自動で
共有リンク
ほかの人にも見てもらう
ログインも登録もなしで、公開前のサイトを見てもらえます。スマホでも開けて、必要ならパスコードも付けられます。
👀 みんなで確かめる
自分では気づかなかった崩れを、ほかの人が見つけてくれることもあります。
よくある疑問 💬
よくある疑問
- Q. 慣れた人なら、壊さずに更新できる?
- 慣れた人でも、たまに起きることです。だからこそ、壊れたときにすぐ戻せる仕組みを用意しておくと安心です。
- Q. 戻したら、それで終わり?
- 戻すのは、サイトを見られる状態にするための最初の一歩です。原因は、そのあとで落ち着いて直しましょう。
まとめ
壊れたら、まず戻す。
直すのは落ち着いてから。
- ✅ まず前のバージョンに戻す
- ✅ ログで原因を探す
- ✅ 直して、もう一度 push
- ✅ プレビューで先に確かめる
おもちGitHub に push するだけで公開。デプロイの履歴とロールバックもあるよ。料金は月330円(税込)から。
