Node.js serve パッケージ導入・インストール・活用ガイドブック

Node.js について

Node.js とは

Node.js の主な特性

Node.js の使用用途

• Web サーバーの構築：Express や Hapi などのフレームワークを使用した API サーバーの開発
• スタティック Web サーバー：本ガイドで紹介する serve パッケージなど、簡単な Web サーバーの実行
• ビルドツール：Webpack、Gulp、Grunt などの開発ツールの実行
• コマンドラインツール：自動化スクリプトやデータ処理ツール
• リアルタイムアプリケーション：WebSocket を使用したチャットアプリやゲームサーバー

Node.js のバージョン戦略

• Current（最新版）：最新の機能が含まれているが、6 ヶ月でサポート終了
• LTS（Long Term Support）：長期間サポートされる安定版。3 年間のサポート期間を持つ

serve パッケージについて

serve パッケージとは

serve パッケージが解決する問題

1. HTTP プロトコルで HTML ファイルをサーブするため CORS 制限が適用されない
2. 複雑なサーバー設定は不要で、一行のコマンドで実行可能
3. ローカルマシンのネットワーク IP アドレス経由でリモートアクセスも可能

serve の主な特徴

serve の公式情報

• 公式 GitHub リポジトリ：https://github.com/vercel/serve
• npm パッケージページ：https://www.npmjs.com/package/serve
• ドキュメント：https://github.com/vercel/serve#readme

Node Version Manager (NVM) とは

NVM の役割

NVM が必要な理由

• バージョン互換性：異なるプロジェクトが異なる Node.js バージョンに依存している場合がある
• LTS と最新版の共存：本番サーバーでは LTS 版を使用し、開発環境では最新版を試したいケースがある
• 簡単な切り替え：グローバルインストールではなく、シェル単位でバージョンを切り替え可能
• アンインストールの容易さ：不要なバージョンを簡単に削除できる
• 権限問題の回避：ユーザーレベルでの管理により、sudo コマンドが不要な場合が多い

Windows での NVM 選択肢

NVM の入手方法

nvm-windows の入手

公式リポジトリからのダウンロード

ダウンロード手順

1. 上記の GitHub ページにアクセスします
2. 右側の "Releases" セクションを探し、最新版をクリックします
3. "Assets" セクションで、以下のファイルを探します：

1. nvm-setup.exe をダウンロードして実行します

代替：Chocolatey を使用したインストール

choco install nvm

代替：PowerShell インストールスクリプト

# nvm-windows の最新版をダウンロード・インストール
$nvmLatestUrl = "https://github.com/coreybutler/nvm-windows/releases/latest/download/nvm-setup.exe"
$outputPath = "$env:TEMP\nvm-setup.exe"
Invoke-WebRequest -Uri $nvmLatestUrl -OutFile $outputPath
Start-Process -FilePath $outputPath -Wait
Remove-Item -Path $outputPath

入手前の確認事項

• OS バージョン：Windows 7 以上のバージョンが必要です（Windows 10/11 は完全対応）
• 管理者権限：インストール時に管理者権限が必要です
• ウイルス対策ソフト：稀にセキュリティソフトがダウンロードをブロックする場合があります。その場合は一時的に無効化してください

NVM のインストール方法

GUI インストーラーを使用した方法（推奨）

ステップ 1：インストーラーの起動

1. ダウンロードした nvm-setup.exe をダブルクリックで実行
2. ユーザーアカウント制御（UAC）ダイアログで "はい" を選択

ステップ 2：インストールウィザードの実行

1. 言語設定："English" または "日本語" を選択
2. "Next" ボタンをクリック
3. ライセンス同意画面で "I agree to the License Agreement" にチェック
4. "Next" ボタンをクリック

ステップ 3：インストール先の指定

• 通常はデフォルト値で問題ありません
• ドライブ容量が限定されている場合は、変更することも可能です
• "Next" ボタンをクリック

ステップ 4：symlink フォルダの指定

• ここで指定した場所に、実際の Node.js インストールがリンクされます
• "Next" ボタンをクリック

ステップ 5：インストール完了

1. インストール中、複数のファイルがダウンロード・展開されます
2. 完了後、"Finish" ボタンをクリック

インストール完了後の確認

# NVM のバージョン確認
nvm -v

# 出力例:
# 1.1.11

トラブルシューティング：NVM が認識されない場合

解決方法 1：PC の再起動

解決方法 2：PATH 手動設定

1. "Windows キー + R" で 「ファイル名を指定して実行」 を開く
2. systempropertiesadvanced と入力
3. "環境変数" ボタンをクリック
4. "システム環境変数" セクションで "Path" を選択し、"編集" をクリック
5. 以下の 2 つのパス（必要に応じて）を確認・追加：

1. "OK" ボタンをクリックし、新しいシェルウィンドウを開く

NVM を使用した Node.js のインストール

ステップ 1：利用可能なバージョンの一覧表示

すべての利用可能な Node.js バージョンを表示

nvm list available

LATEST
LTS
22.x.x
20.11.1
21.x.x
18.19.0
20.11.1
16.20.0
...

すでにインストール済みのバージョンを確認

nvm list

ステップ 2：Node.js のインストール

最新版（Current）のインストール例

nvm install latest

特定バージョンのインストール例

nvm install 20.11.1

複数バージョンのインストール例

# 最新版のインストール
nvm install latest

# LTS 版（20.x）のインストール
nvm install 20.11.1

ステップ 3：バージョンの切り替え

使用するバージョンの指定

# 最新版の使用
nvm use latest

# LTS 版（20.x）の使用
nvm use 20.11.1

# バージョン番号の一部指定も可能
nvm use 20  # 最新の 20.x.x を自動選択

ステップ 4：インストール完了の確認

node --version
npm --version

# 出力例:
# v20.11.1
# 9.8.1

推奨される複数バージョンの管理戦略

シナリオ例：開発環境では最新版、参考用に LTS をインポート

1. 最新版（Current）をインストール

   nvm install latest

1. LTS 版（Long Term Support）をインストール

   nvm install lts

1. デフォルト版の設定

   nvm use latest

バージョン切り替え時の注意

• グローバルパッケージの独立：npm install -g でインストールされたパッケージは、バージョン別に管理されます。各バージョンで必要なツールを個別にインストールしてください
• プロジェクトローカルパッケージ：各プロジェクトの node_modules フォルダは、使用する Node.js バージョンに依存します。.nvmrc ファイルで自動バージョン切り替えを設定することも可能です

設定ファイル .nvmrc による自動バージョン切り替え

.nvmrc ファイルの作成

20.11.1

自動バージョン切り替えと使用

# プロジェクトフォルダに移動
cd my-project

# .nvmrc で指定されたバージョンに自動切り替え
nvm use

# 出力例：
# Now using node v20.11.1

serve パッケージの入手とインストール

serve パッケージの入手方法

serve 2 つのインストール方法

方法 1：グローバルインストール（推奨）

npm install -g serve

• インストール後、すぐにどのフォルダからでも serve コマンドが実行可能
• ディスク容量の節約（1 つのコピーで複数プロジェクトで共有）
• Node.js バージョン更新時に一度のインストールで済む

• 複数バージョンの Node.js を使い分ける場合、各バージョンで個別インストールが必要

方法 2：ローカルインストール

# プロジェクトフォルダに移動
cd my-project

# 現在位置にインストール
npm install serve

• プロジェクト別に独立した環境を構築
• package.json で依存関係管理が可能
• 複数バージョンの Node.js でも問題なし

• 各プロジェクトで個別にインストールが必要
• ディスク容量を多く消費

推奨事項

グローバルインストールの詳細手順

ステップ 1：PowerShell を管理者権限で起動

1. Windows キーを押して、"PowerShell" と入力
2. "Windows PowerShell" 右クリック
3. "管理者として実行" を選択

ステップ 2：serve のインストール

npm install -g serve

added 89 packages in 5s

12 packages are looking for funding
  run npm fund for details

ステップ 3：インストール確認

serve --version

# 出力例:
# 14.2.3

アップグレード方法

npm install -g serve@latest

アンインストール方法

npm uninstall -g serve

serve パッケージの実際の利用シーン

基本的な使い方：開発フォルダの Web サーバー化

シーン 1：ローカル開発でのブラウザ確認

C:\Users\MyUser\Documents\my-html-project\
├── index.html
├── style.css
├── script.js
└── data\
    └── products.json

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>商品一覧</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>商品一覧</h1>
  <ul id="product-list"></ul>
  <script src="script.js"></script>
</body>
</html>

{
  "products": [
    { "id": 1, "name": "りんご",   "price": 150 },
    { "id": 2, "name": "バナナ",   "price": 80  },
    { "id": 3, "name": "オレンジ", "price": 120 }
  ]
}

// data/products.json を読み込んでリスト表示する
fetch('data/products.json')
  .then(response => response.json())
  .then(data => {
    const list = document.getElementById('product-list');
    data.products.forEach(product => {
      const item = document.createElement('li');
      item.textContent = ${product.name}：${product.price}円;
      list.appendChild(item);
    });
  })
  .catch(error => {
    console.error('読み込みエラー:', error);
  });

# 1. プロジェクトフォルダに移動
cd C:\Users\MyUser\Documents\my-html-project

# 2. カレントフォルダを Web サーバーのルートとして起動
serve . -l 8000

   ╔════════════════════════════════════════╗
   ║   Accepting connections at:            ║
   ║   http://localhost:8000                ║
   ║   http://192.168.1.100:8000            ║
   ║                                        ║
   ║   Press Ctrl-C to stop the server      ║
   ╚════════════════════════════════════════╝

ブラウザでの確認

1. ブラウザのアドレスバーに http://localhost:8000 と入力
2. Enter キーを押す
3. index.html が表示され、data/products.json のデータが読み込まれた商品一覧が表示されます
4. file:// で開いたときと違い、CORS エラーが発生しません

ネットワークアクセス：他のマシンから確認

http://192.168.1.100:8000

サーバー停止

Ctrl + C キーを押す

実践的な使用シーン

シーン 2：複数 HTML ページを持つ Web サイトの確認

C:\Users\MyUser\Documents\my-website\
├── index.html          ← トップページ
├── about.html          ← 会社概要ページ
├── contact.html        ← お問い合わせページ
├── css\
│   └── style.css
├── js\
│   └── main.js
└── images\
    └── logo.png

# プロジェクトフォルダに移動して起動
cd C:\Users\MyUser\Documents\my-website
serve . -l 8000

シーン 3：AI エージェント（Claude など）との HTML 画面の共有

# Web サーバー起動
serve C:\Users\MyUser\Documents\dashboard -l 8000

# AI エージェント に以下の URL を共有して、画面内容をコピーしてもらう
# http://localhost:8000
# または、AI エージェント が外部ネットワークからアクセスできるなら：
# http://192.168.1.100:8000

継続的な公開の是非

シーン 4：長期的な Web サーバー公開 - セキュリティと方針

インターネットへの継続公開について

1. セキュリティリスク

1. serve の設計思想

1. パフォーマンス

ローカルネットワーク内での一時的な共有

# ローカルネットワーク経由での公開
serve . -l 8000
# 192.168.x.x などのプライベート IP でアクセス

# スマートフォンやタブレットにて確認
# http://192.168.1.100:8000

インターネット向けの継続公開の場合

コマンドラインオプション：よく使われるパラメータ

ポート番号の指定

# ポート 3000 で実行
serve . -l 3000

# ポート指定なし（デフォルト 3000）
serve .

特定フォルダの指定

# 絶対パスでの指定
serve C:\Projects\my-app -l 8000

# 相対パスでの指定（カレントフォルダからの相対位置）
serve ./dist -l 8000

# 親フォルダの指定
serve .. -l 8000

単一ページアプリケーション（SPA）モード

serve . -l 8000 --spa

HTTPS での実行

serve . -l 8000 --ssl-cert cert.pem --ssl-key key.pem

圧縮の無効化

serve . -l 8000 --no-gzip

トラブルシューティング：serve 実行時の各種エラー

エラー：「serve コマンドが見つからない」

'serve' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。

# グローバルインストール（管理者権限）
npm install -g serve

# バージョン確認
serve --version

エラー：「ポートが既に使用されている」

Error: listen EADDRINUSE: address already in use :::8000

serve . -l 9000

# Windows で ポート 8000 を使用しているプロセスを表示
netstat -ano | findstr :8000

# PID (Process ID) を確認してタスクマネージャーで終了
# または以下で強制終了（管理者権限必要）
taskkill /PID <PID番号> /F

エラー：「ファイルまたはフォルダが見つからない」

Error: ENOENT: no such file or directory, stat 'C:\path\to\folder'

# 現在いるフォルダのパスを確認
Get-Location

# 出力例：
# Path
# ----
# C:\Users\MyUser\Documents

# フォルダが存在するか確認（True が返れば存在する）
Test-Path "C:\Users\MyUser\Documents\my-project"

# 出力例（存在する場合）：True
# 出力例（存在しない場合）：False

# フォルダの中身を確認
dir C:\Users\MyUser\Documents\my-project

# パスを正確に指定して起動
serve "C:\Users\MyUser\Documents\my-project" -l 8000

# または、正しいフォルダに移動してから起動
cd "C:\Users\MyUser\Documents\my-project"
serve . -l 8000

ヒント：フォルダ名やパスにスペースが含まれる場合は、ダブルクォーテーション（"）で囲んでください。

例：serve "C:\Users\My User\Documents\my project" -l 8000

よくある質問と トラブルシューティング

Q1. Node.js と npm はどう違うのですか？

Q2. NVM が必要ですか？直接 Node.js をインストールできませんか？

• 複数バージョンを簡単に管理・切り替え可能
• 不要なバージョンをクリーンアップしやすい
• アップグレード時に設定が保持される

Q3. serve をインストールしたが、コマンドが実行できません。

1. PowerShell を管理者権限で実行したか
2. npm install -g serve でグローバルインストールしたか
3. インストール後、新しい PowerShell ウィンドウを開いたか
4. serve --version でバージョンが表示されるか

Q4. localhost:8000 にブラウザからアクセスできません。

1. serve のコマンドを実行後、「HTTP://localhost:8000」と表示されているか確認
2. ファイアウォールが serve をブロックしていないか確認
3. 別のアプリケーションがポート 8000 を使用していないか確認（前述の netstat コマンド参照）

Q5. JSON ファイルを読み込みしても CORS エラーが出ます。

Q6. Node.js アップデート後、グローバルインストールした serve が使用できなくなりました。

npm install -g serve

Q7. スマートフォンから 192.168.x.x:8000 にアクセスできません。

1. Windows ファイアウォールの設定を確認（Port 8000 の許可）
2. スマートフォンが同じ WiFi ネットワークに接続しているか確認
3. Windows マシンの IP アドレスが正しいか確認

   ipconfig

Q8. serve のパフォーマンスが不安です。大規模なプロジェクトでも使用できますか？

Q9. serve でファイルの自動リロードは可能ですか？

npm install -g live-server
live-server . --port=8000

Q10. Mac/Linux でも同じように使用できますか？

# Mac/Linux での NVM インストール（ターミナルで実行）
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

まとめ

最初の一歩：30 秒での実行

# プロジェクトフォルダに移動
cd C:\Users\<YourName>\Documents\my-project

# Web サーバー起動
serve . -l 8000

# ブラウザで確認
# http://localhost:8000

開発効率の向上

• ⚡ セットアップから実行までのリードタイムを短縮
• 🛡️ CORS に由来する予期しないバグを未然に防止
• 🔄 マシン間（PC とタブレットなど）でのテストが容易

参考リンク一覧