静的ファイルサイトを追加する

ServBayは複数の言語やデータベースに対応した強力なローカルWeb開発環境ツールです。動的サイトだけでなく、HTML・CSS・JavaScriptを使ったシンプルなWebページやフロントエンドアプリなど、静的ファイルサイトのホスティングやテストにも最適です。

本記事では、ServBayで静的ファイルサイトを追加し、設定する手順を解説します。

概要

静的ファイルサイトは、Webサーバーが直接配信するファイルで構成されています。PHP、Node.js、Pythonなどサーバーサイドスクリプトの実行は伴いません。主にHTMLページ、CSSスタイルシート、JavaScriptファイル、画像、フォントなどのリソースから成ります。

ServBayを使えば、ローカルで静的Webサイトを効率的に開発・デバッグ・テストできます。特に、実際の本番環境を模したドメインアクセス、HTTPS接続やCORS（クロスオリジンリソース共有）の検証などが必要な場合に役立ちます。

主な用途

フロントエンド専用プロジェクト（HTML/CSS/JS）の開発およびテスト
静的ドキュメントサイトやブログのホスティング
静的リソースに対するWebサーバー（Caddy/Nginx）の挙動テスト
ローカルで本番同様のドメイン・HTTPSアクセスの模擬
React・Vue・Angularなどのフレームワークビルド物のテスト

前提条件

macOS上ですでにServBayを正常にインストールし、起動していること
デプロイしたい静的Webサイトのファイルを所有していること

操作手順

以下の手順に従い、ServBayで静的ファイルサイトを追加します。

ステップ1: サイトファイルの準備

まず、静的Webサイトのファイル（例: index.html、style.css、script.js など）が一つの専用フォルダにまとまっていることを確認してください。

Webサイトのディレクトリは、ServBayのデフォルトのWebルートディレクトリ /Applications/ServBay/www 配下に作成すると管理が整理されておすすめです。たとえば、my-static-site というサイトなら /Applications/ServBay/www/ 配下に my-static-site フォルダを作成し、すべてのサイトファイルをその中へ配置します。

bash

# ターミナルでサンプルディレクトリを作成
mkdir -p /Applications/ServBay/www/servbay-static-demo
cd /Applications/ServBay/www/servbay-static-demo

# シンプルなindex.htmlファイルを作成
echo '<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ServBay 静的サイトサンプル</title>
    <style>
        body { font-family: sans-serif; text-align: center; margin-top: 50px; }
        h1 { color: #333; }
    </style>
</head>
<body>
    <h1>おめでとうございます！ServBay静的サイトが正常に設定されました！</h1>
    <p>このローカル静的ページにServBay経由でアクセス中です。</p>
</body>
</html>' > index.html

# 現在のファイル構成例
# /Applications/ServBay/www/servbay-static-demo/index.html

ステップ2: ServBayでWebサイトを追加

ServBayアプリケーションを開きます。
左側のナビゲーションバーから Webサイト をクリックします（※ 古いバージョンは「ホスト」と表記されている場合があります。新バージョンでは「Webサイト」にリネーム）。
サイト一覧画面の下部にある追加ボタンをクリック。設定用ウィンドウが表示されます。

ステップ3: サイト設定を構成する

表示された設定ウィンドウで、以下の情報を入力または選択してください。

ドメイン (Domain): ローカルでこのサイトにアクセスするためのドメインを入力します。推奨ドメインは .servbay.demo サフィックス付き（例: static.servbay.demo や my-static-site.servbay.demo）。ServBayは .servbay.demo ドメインのローカル解決を自動設定するため、hostsファイルを手動で編集する必要はありません。
- 補足: .servbay.demo ドメインを使うことで実在ドメインとの競合を回避し、ServBay組み込みDNSで確実にローカルPCへルーティングできます。
パス (Path): 右側フォルダアイコンから、ステップ1で作成したWebサイトディレクトリ（例: /Applications/ServBay/www/servbay-static-demo/）を選択してください。
- 補足: パスはWebサーバー（Caddy/Nginx）がサイトファイルを探すドキュメントルート（Document Root）です。たとえば http://static.servbay.demo/ へアクセスした際、最初にここで index.html などを探索します。必ず「ファイル」ではなく「ディレクトリ」を指定してください。
ポート (Port): 通常はデフォルト値でOKです。HTTPは80番、HTTPSは443番が標準です。必要なら他のポート番号にも変更できます。
Webサーバー (Web Server): 利用するWebサーバーを選択します。静的サイトでは Caddy または Nginx のいずれも最適です。
- Caddy: 設定がシンプルで、HTTP/2や自動HTTPS（ServBay User CA連携）に対応。ServBayのデフォルト推奨サーバーです。
- Nginx: 高いパフォーマンスと柔軟性を持ち、本番環境でも広く利用されています。
- どちらかひとつを選択してください。
PHPバージョン (PHP Version): 静的サイトではPHP処理は不要なので、None を選択します。
Node.jsバージョン (Node.js Version): 静的サイトではNode.js処理も不要なため、None を選択します。
Pythonバージョン (Python Version): 静的サイトはPython不要です。None を選択します。
Goバージョン (Go Version): 静的サイトはGo不要です。None を選択します。
Javaバージョン (Java Version): 静的サイトはJava不要です。None を選択します。
SSL: ローカルでもHTTPSでアクセスしたい場合、こちらにチェックします。ServBayが内蔵のServBay User CA証明書を利用し、自動でローカル用の信頼されたSSL証明書を発行します。HTTPSテストに便利です。
CORS: サイトでクロスオリジンリソース共有（CORS）が必要な場合、チェックを付け適宜設定してください。他ドメインからのAPIやフォント読み込み時などに利用できます。ServBayはWebサイトごとにCORSヘッダー設定が可能です。

ステップ4: 保存して変更を適用

すべての設定が完了したら、ウィンドウ下部の保存ボタンをクリックします。
サイト一覧画面に戻ると、今追加したサイトがリスト表示されます。
サイト一覧画面上部の 変更を適用 ボタンをクリックしてください。
- 補足: 変更を適用 をクリックすると、ServBayがWebサーバー（Caddy/Nginx）の設定を再読み込みし、新たなWebサイト設定が有効となります。この手順を行わないと追加したサイトは閲覧できませんので注意してください。

設定を検証する

設定・変更を適用したら、Webブラウザを開き、アドレス欄に指定したドメインを入力してアクセスしてみましょう（例: http://static.servbay.demo またはSSL有効時は https://static.servbay.demo）。

設定が正しければ、用意した静的サイトの内容（例として作成した index.html など）が表示されます。

注意点

パスとして適切なWebサイトのルートディレクトリを指定してください。
サイト構成を追加・変更・削除するたびに、必ず 変更を適用 ボタンを押して反映させる必要があります。
静的サイトの場合は、PHPやNode.jsなどのサーバーサイド言語を None に設定するのがベストプラクティスです。余計なリソース消費やセキュリティリスクを未然に防げます。
アクセスできないときは、ServBayアプリが正常起動しているか、Webサーバー（Caddy/Nginx）の状態、入力したドメインとServBay設定ドメインが完全一致しているかをご確認ください。

よくある質問（FAQ）

Q: サイトのドメインへアクセスすると「このサイトにアクセスできません」や「サーバーが見つかりません」と表示される場合、どうすればよいですか？

ServBayアプリケーションが起動中かどうか確認してください。
ServBayの 変更を適用 ボタンを押したかチェックしてください。
ブラウザで入力したドメインがServBay設定と完全一致しているか確認（http://やhttps://の違いもチェック）。
パス設定が正しいWebサイトファイル用ディレクトリを指しているか再確認してください。
詳細なエラーメッセージは、ServBayのログファイルも併せてご確認ください。

Q: サイトのパスは設定済みなのに、閲覧時にディレクトリリストが表示され、index.html に切り替わりません。なぜですか？

A: サイトのルートディレクトリにデフォルトのトップページ（例: index.html）が存在しない可能性が高いです。ルートディレクトリ直下に index.html（またはWebサーバー設定で定義されたデフォルトファイル）が正しく配置され、ファイル名や拡張子が大文字・小文字も含め正確であるか確認しましょう。

Q: 静的WebサイトにもHTTPSを設定可能ですか？

A: はい。サイトの設定で SSL オプションにチェックを入れることで可能です。ServBay内蔵のServBay User CA機能で、ローカルドメイン用の信頼されたSSL証明書を自動発行し、HTTPSアクセスをすぐに実現できます。

まとめ

ServBayを活用すると、シンプルなHTMLページから大規模なフロントエンドアプリのビルド物まで、ローカルで静的Webサイトを簡単に追加＆管理できます。ドメイン解決やSSLサポートを含むServBayのサイト管理機能で、もっと効率良くフロントエンド開発・テストを進めましょう。

静的ファイルサイトを追加する ​

概要 ​

主な用途 ​

前提条件 ​

操作手順 ​

ステップ1: サイトファイルの準備 ​

ステップ2: ServBayでWebサイトを追加 ​

ステップ3: サイト設定を構成する ​

ステップ4: 保存して変更を適用 ​

設定を検証する ​

注意点 ​

よくある質問（FAQ） ​

まとめ ​