前々回で「サーバーに置くと誰でも見られる」、前回で「サーバーは頼まれたものを返す人」というところまで来ました。ここまでくれば、あとは実際に置くだけです。

この記事では、手元のindex.htmlを世界に公開します。file:///Users/... で開いていたファイルが、https:// の付いたURLで開けるようになる、その一歩です。

1. デプロイ＝サーバーに置いて公開すること

デプロイ（deploy） とは、作ったものをサーバーに置いて、誰でもアクセスできる状態にすることです。日本語にすれば「配置する」「展開する」あたりですが、現場では「公開する」とほぼ同じ意味で使われています。

ここまでで作ったHTML・CSS・JavaScriptは、前回の言葉でいう「そのまま返せるファイル」です。つまり静的なので、いちばん手軽な方法で公開できます。

2. 静的ホスティングを使う

静的ファイルを置くだけで公開してくれるサービスを静的ホスティングと呼びます。代表的なものは次の3つです。

サービス 特徴
GitHub Pages Gitのリポジトリに置いたファイルをそのまま公開できる。Gitを使うならこれが自然
Netlify フォルダをドラッグ＆ドロップするだけでも公開できる。いちばん手数が少ない
Vercel フロントエンド向けに強く、あとで本格的なフレームワークに進むときも使える

どれも「ファイルを渡す → URLがもらえる」という流れは同じです。最初の1回は、アカウント登録だけで済むNetlifyがおすすめです。

3. いちばん短い手順

やることは3つだけです。

  1. index.html（あれば画像なども）を1つのフォルダにまとめる
  2. 静的ホスティングのサービスにアカウントを作る
  3. そのフォルダを渡す

Netlifyであれば、ログイン後の画面にフォルダをドラッグ＆ドロップするだけです。数十秒待つと、https://ランダムな名前.netlify.app のようなURLが表示されます。

そのURLをスマートフォンで開いてみてください。自分のパソコンの中にしかなかったページが、自分のパソコンを経由せずに表示されます。これが「公開した」ということです。

なお、ファイル名を index.html にしておく必要があります。サーバーは「フォルダを指定されたら、その中の index.html を返す」という決まりで動いているためです。

4. 「書いたファイル」と「配るファイル」は別物になる

いまはまだ、書いたHTMLをそのまま置けます。ただ、この先SassやTypeScriptといった道具を使うようになると、書いたファイルと配るファイルが別物になります。

書いたファイルはブラウザーが読めない形をしているので、ブラウザーが読める形に変換してから置くことになります。この変換作業がビルドです。

書いたファイル（.scss / .ts）
   ↓ ビルド
配るファイル（.css / .js）  ← サーバーに置くのはこちら

「デプロイしたのに反映されない」と思ったら、実はビルドし忘れていた、というのはよくある話です。この話は、SassとTypeScriptの記事で改めて扱います。

5. 公開したのに反映されない ― たいていはキャッシュ

修正してアップロードし直したのに、開いてみると古い表示のまま。これは非常によく起きます。そして多くの場合、キャッシュが原因です。

ブラウザーやサーバーは、一度取ってきたファイルを「どうせすぐには変わらないだろう」と手元に覚えておきます。これがキャッシュです。おかげでページの表示は速くなりますが、更新直後は古いものを見せられることになります。

確かめ方は次のとおりです。

  • スーパーリロード（強制再読み込み）を試す。Macなら Command + Shift + R、Windowsなら Ctrl + Shift + R です。
  • シークレットウィンドウで開いてみる。キャッシュがほぼ効かない状態で確認できます。
  • それでも古ければ、数分置いてから見る。

「壊れた」のではなく「前のものを見せているだけ」のことが多い、と知っておくと慌てずに済みます。

まとめ

  • デプロイ＝サーバーに置いて公開すること。
  • 静的ホスティング（GitHub Pages / Netlify / Vercel）なら、ファイルを渡すだけでURLがもらえる。
  • ファイル名は index.html にしておく。
  • この先は「書いたファイル」ではなく「ビルドしたファイル」を置くことになる。
  • 反映されないときは、まずキャッシュを疑う。