Node.jsをインストール(npmコマンド）しサーバ起動してみよう

Node.js
サーバを動かしてみよう

先ほどは、ブラウザから外部のサーバへ通信しました。今度は、VS Codeに簡易的なサーバをインストールして、通信してみましょう。

npmコマンドをPCにインストールする

簡易的なサーバをインストールするために、npmコマンドをPCにインストールします。
npmコマンドは、Node.jsをインストールすると同時にインストールされるツールです。
このツールを使うと、コマンドラインからJavaScriptの様々なパッケージをインストールできます。
では、早速インストールしましょう。

（1）Node.jsの公式サイトにアクセスします。

 

 

（2）表示されたページ内にある「Node.js (LTS)をダウンロードする」をクリックします。

（3）ダウンロードしたインストーラーを実行します。

（4）インストールが完了したら、ターミナルを開いて下記のコマンドを実行します。

npm -v
Windowsの場合
npm : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Program Files\nodejs\npm.ps1 を読み込むことができません。詳細については、「about_Execution_Policies」(https://go.microsoft.com/fwlink/?LinkID=135170) を参照してください。
が発生したときは、スクリプトの実行ポリシーが制限されていますので下記の手順にて解除を行ってください。

  1. Windows Powershellを管理者として実行します。
  2. 表示されたPowershell内で以下のコマンドを実行し、実行ポリシーの解除を行います。 
     > Set-ExecutionPolicy RemoteSigned

（5）下記のようにバージョン番号が表示されたら、npmコマンドが正常にインストールできています。
※バージョン番号は、インストールしたタイミングによってバージョンが異なる可能性があります。

10.5.0

JSON Serverをインストールする

npmコマンドをインストールできたら、VS Codeで先ほど作成した test-server フォルダー内に、以下の db.json ファイルを新規作成・格納してください。

  • db.json
{
  "profile": {
    "firstName": "太郎",
    "lastName": "浦島",
    "email": "urashima@example.com"
  }
}
拡大表示

次にVS Codeのターミナルを使って、サーバをインストールします。VS Codeのターミナルは、下記の部分です。

もしターミナルが表示されていない場合は、VS Codeのメニューから ターミナル > 新しいターミナル を選択してください。

ターミナルに、下記のコマンドを入力してください。「JSON Server」というサーバをインストールするコマンドです。入力できたら、Enterキーを押して実行しましょう。

  • サーバをインストールする
npm install json-server@0.17.4 -g
  • 出力結果の例
added 54 packages in 4s

14 packages are looking for funding
  run `npm fund` for details

問題なくインストールできたか確認するため、ターミナルで下記のコマンドを実行してください。インストールしたJSON Serverの使い方が表示されます。

  • JSON Servetの使い方を表示する
json-server --help

下記のように表示されたら、問題なくインストールできています。

  • 実行結果
Usage: json-server [options] <file>

Options:
  -p, --port <port>  Port (default: 3000)
  -h, --host <host>  Host (default: localhost)
  -s, --static <dir> Static files directory (multiple allowed)
  --help             Show this message
  --version          Show version number

JSON Serverをインストールできたら、起動してみましょう。下記のコマンドを実行してください。

  • JSON Serverを起動する
json-server --port 8080 --watch test-server/db.json

このコマンドの意味は、下記のとおりです。

  • json-server：JSON Serverを起動するコマンド
  • --port 8080：ポート番号を8080に設定するオプション
  • --watch test-server/db.json：test-server フォルダー内の db.json ファイルを監視するオプション

ポート番号は、通信するサーバを識別するための番号です。VS Codeで起動したサーバを、ブラウザでプレビューするためには、ポート番号を8080にする必要があります。

監視するファイルには、先ほど作成したJSONファイルを設定します。JSON Serverにリクエストを送ると、ここで設定したファイルのJSON文字列がレスポンスとして返されます。

下記のURLをブラウザのアドレスバーに入力してください。

  • 入力するURL
http://localhost:8080

下記のように表示されたら、問題なくプレビューできています。

ブラウザで表示したら、下記のようにページ中ほどにある /profile というリンクをクリックしてください。

リンクをクリックすると、下記のように表示されます。表示されるのは、test-server フォルダーの db.json ファイルに保存したJSON文字列です。

リンクをクリックする代わりに、ブラウザのアドレスバーにURLを入力しても同じ表示になります。この場合、プレビューしたときのURLのlocalhost:8080 という部分の後に、/profile と入力してEnterキーを押してください。

上記のようにリンクをクリックするか、アドレスバーにURLを入力すると、ブラウザからJSON Serverが用意したAPIにリクエストを送ることになります。このリクエストによって、JSON ServerはJSON文字列をレスポンスとして返します。レスポンスのJSON文字列は、サーバ起動時に監視対象として設定したJSONファイルの内容です。

このリクエストとレスポンスの流れは、下図のようになります。

JSON Serverでは、起動時に監視対象として設定したJSONファイルのデータを変更すると、レスポンスのデータも変わります。試しに test-server フォルダーの db.json ファイルを、以下のように変更してみましょう。

  • db.json
{
  "profile": {
    "firstName": "太郎",
    "lastName": "浦島",
    "email": "urashima@example.com",
    "address": "竜宮城",
    "age": 25
  }
}
拡大表示

そして、Windowsの場合は、Ctrl + c、Macの場合は、^(control) + c で一度JSON Serverを止めたあと、上記の json-server コマンドで再度起動し、先ほど表示したページを再度読み込むと、下記のように表示内容が更新されています。

スポンサーリンク
タイトルとURLをコピーしました