08. サイト種類別の公開パターン

この章では、サイトの種類ごとの公開パターンを学びます。

Webサイトは種類によって、必要なサーバー、公開方法、確認点が変わります。すべてを同じ方法で公開できるわけではありません。

静的HTMLサイト

静的HTMLサイトは、HTML、CSS、JavaScript、画像などのファイルをそのまま配信するサイトです。

向いているサイト:

• 小規模なコーポレートサイト
• LP
• ポートフォリオサイト
• シンプルな採用サイト

公開では、必要なファイルを公開ディレクトリへアップロードします。

確認すること:

• index.html が正しい場所にあるか
• CSSやJavaScriptが読み込まれているか
• 画像やPDFが404になっていないか
• フォームがある場合は送信先があるか

Astroなどの静的サイト

Astroなどの静的サイトジェネレーターでは、MarkdownやコンポーネントからHTMLを生成します。

公開時は、ビルド後に生成されたファイルをホスティングへ置きます。

dist/
  index.html
  about/
    index.html
  _astro/
    style.css

静的サイトホスティングと相性がよいですが、ビルドが必要な点に注意します。

確認すること:

• ビルドが成功しているか
• 生成されたページがすべてあるか
• 画像やアセットのパスが正しいか
• 環境ごとのURL設定が必要か

WordPressサイト

WordPressサイトは、PHPとデータベースを使う動的サイトです。

静的HTMLのようにファイルを置くだけでは完結しません。

必要になるもの:

• WordPressが動くサーバー
• PHP
• データベース
• WordPress本体
• テーマ
• プラグイン
• 管理画面

WordPressの使い方やテーマ制作はWordPress講座で扱います。

この講座では、公開やサーバー選びに関係する範囲に留めます。

フォーム付きサイト

お問い合わせフォームがあるサイトでは、送信処理が必要です。

静的HTMLだけでは、フォームの見た目は作れても、メール送信やデータ保存はできません。

よくある方法:

• サーバー側のフォームプログラムを使う
• WordPressのフォームプラグインを使う
• 外部フォームサービスを使う
• サーバーレス機能やAPIを使う

フォーム付きサイトでは、送信先、通知先、迷惑メール対策、個人情報の扱いを確認します。

外部フォームサービス

外部フォームサービスを使うと、静的サイトでもお問い合わせフォームを扱いやすくなります。

ただし、次の点を確認します。

• 無料プランと有料プランの違い
• 送信件数の上限
• 通知メールの送信元
• 個人情報の保存先
• スパム対策
• 確認画面や完了画面の扱い

外部サービスを使う場合は、クライアントにサービス利用の前提を説明します。

CMSを使うサイト

CMSを使うと、管理画面からコンテンツを更新できます。

WordPress以外にも、ヘッドレスCMSや独自CMSがあります。

CMSを使う場合は、次の点を確認します。

• どこにデータが保存されるか
• 管理画面の権限
• APIキーや環境変数が必要か
• 本番環境と開発環境の違い
• バックアップ方法

CMSは便利ですが、公開や運用の確認項目が増えます。

環境変数やAPIキーが必要なサイト

外部サービスやAPIを使うサイトでは、環境変数やAPIキーが必要なことがあります。

静的サイトでも、ビルド時に環境変数を使うことがあります。

確認すること:

• 本番用のAPIキーがあるか
• ブラウザに見えてよいキーか
• ホスティング側に環境変数を設定したか
• 開発用と本番用を分けているか
• 課金や利用制限があるか

本番URLでの動作確認

公開前にローカルで動いていても、本番URLでは動かないことがあります。

理由としては、次のようなものがあります。

• パス指定が本番環境と合っていない
• HTTPSでないと動かない機能がある
• API側で本番ドメインが許可されていない
• フォーム送信元のドメイン制限がある
• 環境変数が設定されていない
• CORS制限がある

公開後は、必ず本番URLで確認します。

サイト種類ごとの確認

サイト種類ごとに、特に確認するポイントを整理します。

サイトの種類が変わると、公開時に見るべき場所も変わります。

この章のまとめ

• 静的HTMLサイトは、ファイルを公開ディレクトリへ置く
• Astroなどは、ビルド後ファイルを公開する
• WordPressは、ファイルだけでなくデータベースも関係する
• フォーム付きサイトでは、送信処理と個人情報の扱いを確認する
• CMSやAPIを使うサイトでは、環境変数や本番ドメインの許可設定が必要なことがある
• 公開後は必ず本番URLで動作確認する