08. サーバー・ホスティング・公開の基本

この章では、サーバー、ホスティング、公開の基本を学びます。

Web制作では、HTMLやCSSを作るだけでなく、それを誰でも見られる場所に置く必要があります。

この「見られる場所」を理解しておくと、公開後のトラブルにも対応しやすくなります。

サーバーにファイルを置くとは

Webサイトを公開するには、HTML、CSS、JavaScript、画像などのファイルをサーバーに置きます。

ユーザーがブラウザでURLにアクセスすると、ブラウザはサーバーから必要なファイルを受け取り、ページを表示します。

ローカルPCにあるだけのファイルは、自分のPCでは見られても、他の人はアクセスできません。

サーバーに置くことで、インターネット上からアクセスできるようになります。

ホスティングとは

ホスティングは、Webサイトを公開するための場所や仕組みを提供するサービスです。

代表的なものには、次のようなものがあります。

  • レンタルサーバー
  • 静的サイトホスティング
  • WordPress向けホスティング
  • クラウドサービス

Web制作では、案件の内容によって使うホスティングが変わります。

静的なコーポレートサイトなら静的サイトホスティング、WordPressサイトならレンタルサーバーやWordPress向けサーバーが使われることがあります。

静的サイトと動的サイト

静的サイトは、あらかじめ作られたファイルをそのまま配信するサイトです。

静的サイトの例
index.html
about/index.html
assets/css/style.css
assets/js/main.js
images/main.jpg

動的サイトは、アクセス時にサーバー側で処理を行い、HTMLやデータを生成して返すサイトです。

種類例
静的サイトLP、コーポレートサイト、ポートフォリオ
動的サイトWordPress、ECサイト、会員サイト

Web制作では、静的サイトのファイル公開と、WordPressのような動的サイトの違いをざっくり理解しておくと役立ちます。

レンタルサーバー

レンタルサーバーは、Webサイトを置くためのサーバーを借りられるサービスです。

Web制作では、クライアントが契約しているレンタルサーバーへファイルをアップロードすることがあります。

レンタルサーバーでは、次のようなことを扱います。

  • HTMLや画像ファイルのアップロード
  • WordPressの設置
  • SSL設定
  • メールアドレス作成
  • ドメインの設定

具体的な契約や設定手順は、ドメイン・サーバー講座で扱う領域です。

この講座では、サーバーにファイルを置くことでWebサイトが公開されると理解しておきます。

静的サイトホスティング

静的サイトホスティングは、HTML、CSS、JavaScript、画像などの静的ファイルを配信するためのサービスです。

Astroや静的サイトジェネレーターで作ったサイトを公開する時にも使われます。

静的サイトホスティングでは、ビルドされたファイルを公開用の場所に置きます。

公開されるファイルの例
dist/
  index.html
  about/
    index.html
  _astro/
    main.css

開発中のファイルそのものではなく、ビルド後のファイルを公開する点に注意します。

CDNのざっくりした役割

CDNは、画像、CSS、JavaScript、HTMLなどをユーザーに近い場所から配信する仕組みです。

CDNを使うと、表示速度の改善やアクセス集中への対応に役立つことがあります。

Web制作では、次のような場面でCDNという言葉を見かけます。

  • 画像や静的ファイルの配信
  • JavaScriptライブラリの読み込み
  • 静的サイトホスティング
  • キャッシュによる高速化

ただし、CDNはキャッシュも関係するため、修正がすぐに反映されない原因になることがあります。

publicディレクトリの考え方

Astroや多くのフレームワークでは、public ディレクトリに置いたファイルがそのまま公開されます。

たとえば、public/images/logo.png に置いた画像は、公開後に /images/logo.png として参照できることがあります。

public内の画像を参照する例
<img src="/images/logo.png" alt="サイトロゴ">

フレームワークによって扱いは違いますが、公開されるファイルの場所を理解しておくことが大切です。

ルーティング

ルーティングは、URLと表示するページを対応させる仕組みです。

静的なHTMLサイトでは、ファイルやディレクトリ構成がURLに対応します。

AstroやNext.jsのようなフレームワークでは、ファイル構成や設定をもとにURLが作られます。

URLとページの例
/about/        -> aboutページ
/service/      -> serviceページ
/news/post-1/  -> news記事ページ

ルーティングの仕組みを知っておくと、404が出た時に「ページが生成されていないのか」「URLが違うのか」を考えやすくなります。

404が出る理由

公開後に404が出る場合、次のような原因が考えられます。

  • URLが間違っている
  • ファイルがアップロードされていない
  • ビルド対象に含まれていない
  • ルーティング設定がない
  • 大文字小文字が違う
  • サーバー側の設定が合っていない

静的サイトでは、対象のHTMLファイルが生成されているか、公開先に存在するかを確認します。

公開前後で確認すること

Webサイトを公開する前後では、次の点を確認します。

  • トップページが表示されるか
  • 下層ページが表示されるか
  • CSSが読み込まれているか
  • JavaScriptが動いているか
  • 画像が表示されているか
  • 404になっているリンクがないか
  • HTTPSで表示されているか
  • スマホ幅で崩れていないか
  • フォームがある場合、送信できるか

この章のまとめ

  • Webサイトを公開するには、ファイルをインターネット上からアクセスできる場所に置く
  • ホスティングはWebサイトを公開する場所や仕組みを提供するサービス
  • 静的サイトと動的サイトでは、公開の仕組みが違う
  • CDNは表示速度に役立つ一方、キャッシュによる反映遅れにも関係する
  • 公開後は、表示、読み込み、リンク、HTTPS、スマホ表示を確認する