僕のパソコンでは正しく見えていたページが、他人のパソコンでは崩れていた話

自分の画面では何の問題もなく動いていたページを、別のパソコンで開いてもらったら崩れていた。
コードは同じはずなのに、動かしている場所が違うと結果も違ってくる。
そこから、開発環境そのものを箱に詰めて配る、という考え方にたどり着いた。

作業していたページを、別のパソコンで開いてもらったことがあった。
自分の画面ではきれいに出ていたのに、レイアウトが崩れて出てきた。
同じコードを見ているはずなのに、結果が違う。
原因を追っていくと、自分のパソコンに入っているPHPのバージョンと、相手のパソコンに入っているPHPのバージョンが違っていた。
コードは同じでも、動かす場所が違えば結果も違う。
当たり前のようで、当時の僕はそれを甘く見ていた。

「動く場所」は、思っているより人によって違う

ページを表示するまでには、いくつもの部品が関わっている。
プログラムを実行する仕組み(PHP)、データを保存しておく倉庫(データベース)、その二つを外に向けて配る係(Webサーバー)。
この三つのバージョンや設定が、パソコンごとに少しずつ違う。
新しく入れたパソコンなら最新版が入るし、古くから使っているパソコンなら古い版のまま止まっていることもある。
気づかないまま作業していて、いざ人に見せた瞬間に差が表に出る。
厄介なのは、差が出るのがいつも一番見せたいときだということだ。

環境ごと、箱に詰めて配る

この問題への答えのひとつが、コンテナという考え方だった。
プログラムだけを配るのではなく、それを動かすための環境ごと箱に詰めて配る。
料理にたとえると分かりやすい。
レシピだけを渡しても、相手の台所にあるコンロや鍋が違えば同じ味にはならない。
コンテナは、レシピと一緒に専用のキッチンごと届けるようなものだ。
中でどんな版のPHPが動いているか、どんな設定が入っているかを、箱の中に固定してしまう。
箱を開けば、誰のパソコンでも同じキッチンが立ち上がる。
Dockerは、その箱を作って動かすための道具だった。

1台のパソコンに、何十軒ものキッチンを置く

いくつもの案件を並行して抱えていると、案件の数だけキッチンが要る。
それぞれのキッチンには、その案件専用のPHPとプログラムが入っている。
ただ、キッチンを丸ごと案件の数だけ用意すると、パソコンの中はあっという間に部屋がいっぱいになる。
そこで、全部の案件で共通して使う部分だけをひとつにまとめることにした。

まとめたのは主に二つ。
ひとつは、外からの注文を受け取って正しいキッチンへ回す受付。
もうひとつは、どの案件のデータも保管しておく共有の倉庫。
受付と倉庫は一つだけ動かしておいて、案件ごとのキッチンだけを必要な数だけ足していく。
こうすると、パソコンの負担を抑えながら、案件どうしが混ざらない状態を保てる。

この連載で書いていくこと

ここから何回かに分けて、実際にどう組み立てているかを書いていく。

次回は、外からの注文を正しいキッチンへ振り分けている「受付」の話。
ひとつの入り口で何軒ものサイトを同時に捌く仕組みについて書く。
そのあとは、案件ごとのキッチンを増やすときにやっていること。
最後に、自分のパソコンなのに鍵マークが表示される、あの仕組みについて。

どれも、最初から分かっていたわけではない。
崩れて表示されたページを見て、慌てて調べはじめたところから、少しずつ組み上げてきたものだ。
同じところでつまずく人の近道になればいいと思って、順番に残していく。

スタンプラリーに挑戦する 行った場所・気になる場所は、現地チェックインでスタンプに残せます。 みんなのコースを見てみる 会員が作ったスポット巡りのコースを都道府県から探せます。自分だけのコースも作れます。 運営者の個人noteも書いています AI活用やサイト運営で気づいたことを、もう少し個人の視点で掘り下げています。

※運営者が個人で書いているnoteです。

技術ブログ一覧へ戻る