簡単にローカルで Web サーバーを立てる３つの方法（Node/Python/VSCode）

2021年6月20日Development

Web 開発をしている際に html ファイルや JavaScript をローカル環境の Web サーバとして公開しブラウザから確認してみたいと思ったことはあると思います。

Apache や nginx をインストールしてもよいのですが、簡易的に時間を掛けず現在のディレクトリをローカルの Web サーバとして公開しブラウザから確認してみたいと思ったことはないでしょうか。

今回は、普段私が利用している３つの方法をご紹介します。

利用中の OS（Windows、Mac、Linux）に関係なく実現できる方法で、どれもコマンド一発や１クリックで実現できるものになっていますので、おすすめです。

Node の http-server を利用する方法

Node.js をインストールされている方は、node の http-server を利用する方法がおすすめです。

　

npm で http-server をインストールする

http-server は Node.js のパッケージマネージャ npm を利用してインストールします。

-g オプションを利用してインストールしておくと、どのディレクトリでも利用することができます。

$ npm install -g http-server

$ http-server --version
v0.12.3

http-server を起動してブラウザで確認する

http-server の起動方法はとても簡単です。

ブラウザでアクセスしたいディレクトリに移動して http-server を起動します。

$ cd [起動したいディレクトリ]

$ http-server
Starting up http-server, serving ./
Available on:
  http://127.0.0.1:8080
  http://172.27.90.202:8080
Hit CTRL-C to stop the server

ブラウザで「http://127.0.0.1:8000」もくしくは「http://localhost:8000」へアクセスしてみてください。
index.html などを配置している場合、ブラウザに表示されるはずです。

Windows で WSL を利用している場合、127.0.0.1 以外の IP アドレスが表示されますが、どちらの IP アドレスにアクセスしても OK です。

WSL に興味のある方は以下の記事を参考に WSL+Ubuntu をインストールししてみてください。

http-server の終了方法

起動時のメッセージにも表示されていますが、「Ctrl+Z」で停止することができます。

Node(npx) の serveを利用する方法

serveコマンドの実行方法

http-serverのようにローカルにインストールしたくない場合は、npxのserveコマンドがおすすめです。

利用方法は以下のコマンドを実行するのみです。

npx serve

以下のようなメッセージが表示されればOKです。
ブラウザで「http://localhost:3000」にアクセスしてみましょう。

   ┌───────────────────────────────────────────────────┐
   │                                                   │
   │   Serving!                                        │
   │                                                   │
   │   - Local:            http://localhost:3000       │
   │   - On Your Network:  http://172.22.26.214:3000   │
   │                                                   │
   │   Copied local address to clipboard!              │
   │                                                   │
   └───────────────────────────────────────────────────┘

serve の終了方法

「Ctrl+C」で停止することができます。

Python の http.server を利用する方法

Python をインストールされている方は、python の http.server を利用する方法がおすすめです。

　

http.server が利用できるか確認する

python のバージョンが 3 の場合は http.server は利用できるはずなので、確認していましょう。

$ python3 --version
Python 3.8.5

http.server を起動してブラウザで確認する

python の http.server を起動する場合はポート番号を指定します。
ここでは、8000 番ポートを指定してみます。

$ python3 -m http.server 8000
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...

ブラウザで「http://127.0.0.1:8000」もくしくは「http://localhost:8000」へアクセスしてみてください。
index.html などを配置している場合、ブラウザに表示されるはずです。

http.server の終了方法

「Ctrl+C」で停止することができます。

VSCode の Live Server を利用する方法

最後にご紹介する方法は Node.js や Python とはことなりコマンドラインではなく Visual Studio Code の拡張機能（プラグイン）を利用した方法です。

Live Server というプラグインを利用すると開いているプロジェクト（ディレクトリ）を Web サーバとして公開してくれます。

　

VSCode に Live Server をインストールする

以下の手順で Live Server をインストールできます。

  • VSCode を開き、左端メニューから「拡張機能」を選択する
  • 検索ボックスで「Live Server」と入力し検索する
  • インストールボタンをクリックする

これだけで、Live Server を凛世する準備は完了です。

Live Server を起動する

Live Server の起動方法は VSCode の右下にある「Go Live」をクリックするのみです。

「Starting…」と表示された後に、「Port:5500」と表示されブラウザで自動的に表示されます。

Live Server の終了方法

VSCode の右下に表示されている「Port:5500」をクリックすると停止し、「Go Live」ともとの状態に戻ります。

まとめ

今回は、私が普段から利用する３つの方法についてご紹介しましたが、この３つ以外でも、例えば php の簡易 Web サーバなどもほとんど同じ手順で利用可能ですので、自分が現在開発している環境で利用しやすいものを試してみるとよいでしょう。

Development

Posted by snow