MENU

vscodeで始めるwebサーバー構築と運用の基本知識

大規模情報サイト運営
vscode web サーバー
2025/11/28
目次

はじめに

本書の目的

このドキュメントは、Visual Studio Code（VSCode）で手軽にローカルWebサーバーを立ち上げる方法をわかりやすくまとめています。特に拡張機能「Live Server」を中心に、インストールから外部デバイスでの確認、他のローカル環境（例：MAMP）との連携まで解説します。

想定読者

Web制作を始めたばかりの方から、ローカルで効率的に開発したい中級者までを想定しています。HTMLやCSSの基礎が分かれば読み進められます。

本書で学べること

  • Live Serverの役割と利点（編集を保存するとブラウザが自動で更新されます）
  • インストール手順と基本設定
  • 外部スマートフォンや他の端末からの確認方法
  • MAMPなど既存のローカルサーバーとの共存方法

前提条件と準備

VSCodeがインストールされていることが前提です。ブラウザ（ChromeやSafariなど）と、必要であればスマートフォンを用意してください。特別な知識は不要です。

進め方のポイント

各章は実際の手順を中心に説明します。まずは最小限の設定で動作確認し、その後必要に応じてカスタマイズしてください。

Live Serverとは何か

概要

Live Serverは、Visual Studio Code（VSCode）用の拡張機能で、ローカルに簡単なWebサーバーを立ち上げます。保存するだけでブラウザが自動的にリロードされ、変更を即座に確認できます。手早く見た目や動作をチェックしたいときに便利です。

主な特徴

  • ファイル保存でブラウザが自動更新されます。例えばCSSを編集して保存すると、手動でリロードする必要がありません。
  • 静的ファイル（HTML/CSS/画像）をそのまま提供します。JavaScriptのfetchなど、ファイルプロトコルでは動作しない機能もテストできます。
  • 起動は右クリックメニューやステータスバー、コマンドパレットから行えます。初心者でも扱いやすいです。

利用シーンの具体例

  • HTMLとCSSの表示確認を繰り返すときに時間を節約できます。
  • ローカルのJSONにfetchでアクセスする簡単な動作確認が行えます（例：fetch(‘/data.json’)）。

注意点

  • 本番環境向けのサーバーではありません。開発や確認用のツールとして使います。
  • ネットワーク共有設定やポート番号の扱いは別途設定が必要です。

インストール手順

概要

Live ServerはVS Codeの拡張機能として手軽に導入できます。以下では、拡張機能パネルからのインストール方法と、インストール後の起動方法、よくあるトラブルの対処を丁寧に説明します。

インストール手順（簡単4ステップ）

  1. VS Codeを開きます。拡張機能アイコン（左サイドバーの四つの四角）をクリックします。
  2. 検索欄に「Live Server」と入力し、作成者がRitwick Deyのものを選びます。
  3. 「インストール」ボタンをクリックします。数秒で完了します。
  4. インストール後、VS Codeを再起動する必要はほとんどありません。すぐに使えます。

サーバーの起動方法

  • HTMLファイルを開くと、右下に「Go Live」ボタンが表示されます。これをクリックすると自動でブラウザが立ち上がり、ローカルサーバーが動作します。
  • 代替操作として、ファイル名を右クリックして「Open with Live Server」を選択しても起動します。
  • デフォルトのアドレスは http://127.0.0.1:5500/ または http://localhost:5500/ です。ファイルの編集は保存するとブラウザに即反映されます。

よくあるトラブルと対処法

  • 「Go Live」が出ない場合は、HTMLファイルをアクティブにしているか確認してください。ワークスペースを保存すると改善することがあります。
  • ブラウザが開かないときは、ファイアウォールや別の拡張機能が干渉していないか確認してください。ポート競合が疑われる場合は設定でポート番号を変更できます。
  • インストールに失敗する場合は、VS Codeを再起動し、拡張機能のキャッシュをクリアしてから再試行してください。

補足（便利なポイント）

  • 保存と同時に自動リロードしますので、コーディングと確認を素早く繰り返せます。
  • 複数プロジェクトで使う場合は、プロジェクトごとにワークスペース設定を保存しておくと便利です。

基本設定とカスタマイズ

設定画面の開き方

  1. VS Code の設定（歯車アイコン）を開きます。検索欄に「live server」と入力すると関連設定が一覧表示されます。UIで変更するか、右上の「設定（JSON）」で直接編集できます。

よく使う設定項目と意味

  • ポート番号: デフォルトは 5500。別のサービスとぶつかるときは変更します（例: 5501）。
  • ルートディレクトリ: プロジェクトの公開フォルダを指定します。例えば public や dist を指定するとその下がルートになります。
  • 使用ブラウザ: 起動時に使うブラウザを指定できます。指定しないと既定のブラウザが使われます。
  • リロード方法: ページ全体を再読み込みするか、部分的に反映するかを選べます。部分リロードはスタイルや一部の変更だけを素早く反映します。
  • リロード待機時間: 保存から再読み込みまでの遅延（ms）を指定すると、ビルド処理に合わせられます。
  • ホストアドレス: デフォルトは localhost。ネットワークからアクセスしたいときは 0.0.0.0 やローカルIPを指定します。セキュリティに注意してください。

設定例（settings.json の一例）

"liveServer.settings.port": 5501,
"liveServer.settings.root": "public",
"liveServer.settings.CustomBrowser": "chrome",
"liveServer.settings.wait": 200,
"liveServer.settings.host": "0.0.0.0"

トラブルシューティングの基本

  • 設定を変えても反映されない場合は VS Code を再起動します。
  • ポートが使われている場合は別ポートを指定します。
  • 外部からアクセスできないときはファイアウォールやネットワーク設定を確認します。

以上を使えば、開発環境に合わせた柔軟なカスタマイズが可能です。

外部デバイスからのアクセス設定

概要

デフォルトでは Live Server は127.0.0.1（ローカルホスト）のみで動作します。同一ネットワーク内のスマートフォンやタブレットからも見たい場合は、設定でローカルIPを使うように変更します。具体的には “liveServer.settings.useLocalIp”: true を有効にします。

設定手順

  1. VS Code の設定を開きます（歯車マーク → Settings）。
  2. 検索欄に「Live Server useLocalIp」と入力し、チェックを入れます。あるいは settings.json に以下を追加します。
    “liveServer.settings.useLocalIp”: true
  3. Live Server を再起動します。起動すると、127.0.0.1 の代わりにマシンのローカルIP（例: 192.168.1.10）が表示されます。

ローカルIPの確認方法（簡単な例）

  • Windows: コマンドプロンプトで「ipconfig」を実行し、IPv4 アドレスを確認します。
  • macOS: システム環境設定のネットワーク、またはターミナルで「ifconfig」を使います。
    表示されたアドレスを使って、他の端末から http://<ローカルIP>:<ポート> にアクセスします。

スマートフォンからの確認方法

  1. 開発用PCとスマホを同じWi‑Fiに接続します。
  2. スマホのブラウザで、PCに表示されたローカルIPとポート（例: http://192.168.1.10:5500）を入力します。
  3. ページが表示されれば接続成功です。

よくあるトラブルと対処

  • ファイアウォールでブロックされることがあります。必要ならポート（デフォルト5500）やアプリを許可してください。
  • ルーターのゲストネットワークは端末間の通信を遮断する場合があります。メインネットワークに接続してください。
  • ポートが変更されている場合は、表示されるURLを確認してください。

これらを確認すれば、スマホやタブレットからローカルサーバーを使いやすくなります。

プロキシ設定とMAMP連携

概要

PHPなどのバックエンド処理が必要な場合、Live Serverのライブリロード機能とMAMPなどのローカルサーバーを連携させると便利です。フロントエンドの変更を即座に確認しつつ、バックエンドの動作も同時に使えます。

手順（基本）

  1. MAMPを起動し、ホストとポートを確認します（例: http://localhost:8888）。
  2. Live Serverの設定で「Live Reload」を有効にします。
  3. Live Serverのアドレスをhttp://127.0.0.1:5500/に設定します。
  4. プロキシ不要オプションを選択できる場合はそれを使い、代わりにブラウザでMAMP側のURLにアクセスします。

設定例（手順に沿ったポイント）

  • VS CodeのLive Server拡張を使う場合、拡張設定で”Custom Browser”や”Port”を調整できます。
  • フロント側ファイルはLive Serverのルートに置き、APIやPHPはMAMPのドキュメントルートに置きます。

注意点

  • フロントとバックエンドで異なるポートを使うため、相対パスやAJAXのURLを絶対指定（http://localhost:8888/api/…）にすると確実です。
  • ブラウザのキャッシュが干渉することがあるので、問題が出たらキャッシュをクリアしてください。

トラブルシューティング

  • ライブリロードが反応しない場合は、ファイアウォールやポート競合を確認します。
  • PHPが動作しないときはMAMPのApache/PHP設定を再起動してください。

以上の手順で、フロントエンドのライブリロードとMAMPのバックエンド処理を同時に使えます。

＼ 最新情報はInstagramで📲 ／

Instagramを見る

人気投稿

大規模情報サイト運営
vscode web サーバー
よかったらシェアしてね！
  • URLをコピーしました！

この記事を書いた人

userのアバター user

関連記事

目次