ローカルテストサーバーを用意するには

ローカルファイルとリモートファイル

ほとんどの学習領域では、ブラウザーでサンプルを直接開くだけで済みます。 HTML ファイルをダブルクリックするか、ブラウザーウィンドウにドラッグ＆ドロップするか、ファイル > 開く...を選択して HTML ファイルを選択するなどです。これを達成する方法はたくさんあります。

ウェブアドレスのパスが file:// で始まり、その後にローカルハードドライブのファイルへのパスが続く場合、ローカルファイルが使用されています。対照的に、 GitHub でホストされている例 (または他のリモートサーバーの例) を見ると、ウェブアドレスは http:// または https:// で始まっており、ファイルが HTTP 経由で受信されたことを示します。

ローカルファイルのテストに関する問題

一部のサンプルはローカルファイルとして開くと実行されません。これにはさまざまな理由があります。最も可能性が高いのは、

• 非同期リクエストを特徴としている。 一部のブラウザー (Chrome を含む) は、ローカルファイルからサンプルを実行するだけでは非同期リクエストは実行しません (サーバーからのデータの取得を参照)。これはセキュリティ上の制限があるためです (ウェブセキュリティの詳細については、ウェブサイトのセキュリティを参照してください)
• サーバー側の言語を使用している。 サーバー側の言語 (PHP や Python など) では、コードを解釈して結果を提供する特別なサーバーが必要です。
• 他のファイルをインクルードしている。 ブラウザーは通常、file:// スキーマを使用してリソースを読み込むリクエストをオリジン間リクエストとして扱います。 そのため、他のローカルファイルを入れることができるローカルファイルを読み込むと、 CORS エラーが発生することがあります。

シンプルなローカル HTTP サーバーの実行

非同期リクエストの問題を回避するには、ローカルウェブサーバーを介して実行することによって、そのようなサンプルをテストする必要があります。

コードエディターで拡張機能を使用する場合

HTML と CSS と JavaScript だけが必要で、サーバーサイドの言語が必要ない場合、最も簡単な方法はコードエディターの拡張機能を調べることです。ローカルの HTTP サーバーへのインストールと設定するには、自動化するだけでなく、コードエディターとうまく統合されます。 HTTP サーバーのローカルファイルをワンクリックでテストできます。

VS Code の場合は、次のフリーの拡張機能を試してみてください。

• Live Preview
• Preview on Web Server

Node.js の使用

Node.js の http-server モジュールは、任意のディレクトリーで HTML ファイルをホストする最も簡単な方法です。

このモジュールを使用するには、次のようにします。

1. Node.js がすでにインストールされているかどうかを調べるには、次のコマンドを実行してください。

   bash

   node -v
   npm -v
   npx -v
   

2. Node.js がインストールされていない場合は、インストールする必要があります。Node.js のドキュメントにあるダウンロード手順に従って、上記のコマンドを再度実行し、インストールが正常に行われたことを確認してください。

3. ディレクトリーが /path/to/project であると想定しましょう。サーバーを開始するには、次のコマンドを実行します。

   bash

   npx http-server /path/to/project -o -p 9999
   

   これは、localhost:9999 の /path/to/project ディレクトリにあるすべてのファイルをホストします。オプション -o は、ウェブブラウザーで index.html ページを開くためのものです。index.html が存在しない場合は、その代わりにディレクトリーが表示されます。

Python の使用

これを実現するためのもう一つの方法は、 Python の http.server モジュールを使用することです。

このためには次のようにします。

1. Python がすでにインストールされているかどうかを調べるには、次のコマンドを実行してください。

   bash

   python -V
   # 上記のものが失敗する場合は、次のようにする
   python3 -V
   # または、 "py" コマンドが使用できる場合は、次のようにする
   py -3 -V
   

2. Python がインストールされていない場合は、インストールする必要があります。Python のドキュメントにある ダウンロード手順 に従ってください（Django チュートリアルにもより詳しい説明があります）。その後、上記のコマンドを再度実行して、インストールが成功したかどうかを確認してください。

3. これによりバージョン番号が返されます。 これで OK であれば、 cd コマンドを使用して、テストしたいウェブサイトのコードを格納するディレクトリーに移動します。

   bash

   # 入力するディレクトリー名を入れる。例えば次のようにする
   cd Desktop
   # 必要であれば、 2 つのドットを使用するとディレクトリーを 1 つ上にジャンプする
   cd ..
   

4. そのディレクトリーにあるサーバーを起動するコマンドを入力します。

   bash

   # Windows では、 "python -m http.server" or "py -3 -m http.server" のようにする
   python3 -m http.server
   

5. 既定では、これはローカルウェブサーバー上のディレクトリーの内容を 8000 番ポート上で実行します。このサーバーにアクセスするには、ウェブブラウザーで localhost:8000 の URL に移動します。ここにディレクトリーの内容が表示されるので、実行する HTML ファイルをクリックしてください。

サーバー側の言語をローカルで実行

Python、PHP、JavaScript などのサーバーサイド言語を使用する場合の最適な手法は、使用しているサーバーサイド言語、およびウェブフレームワークを使用しているか「スタンドアロン」のコードを使用しているかによって異なります。

ウェブフレームワークを使用している場合、通常、そのフレームワークは独自の開発サーバーを提供しています。 例えば、次の言語/フレームワークには開発サーバーが付属しています。

• Python のウェブフレームワークは、Django、Flask、Pyramid などです。

• Node/JavaScript のフレームワークは、Express Web Framework (Node.js/JavaScript) などです。

• PHP には独自の組み込み開発サーバーがあります。

  bash

  cd path/to/your/php/code
  php -S localhost:8000
  

サーバーサイドのフレームワークや、開発サーバーを提供するプログラミング言語を直接使用していない場合は、 Python の http.server モジュールを使用して、サーバーサイドの Common Gateway Interface (CGI) スクリプトを呼び出すことで、Python、PHP、JavaScript などの言語で記述されたサーバーサイドのコードをテストすることもできます。 この機能の使用例については、realpython.com の「Python コード 1 行で HTTP サーバーを起動する方法」の「共通ゲートウェイインターフェイス (CGI) を使用してスクリプトをリモートで実行する」をご覧ください。