VS Code上でホットリロード機能を含めたNode.js(Express)の開発環境構築方法
VS Code上でホットリロード機能を含めたNode.js(Express)の開発環境構築方法について説明します。
この記事では、VS Code上でホットリロード機能を含めたNode.js(Express)の開発環境構築方法について説明します。
この記事の内容です。
対象読者
- VS Code上でNode.js(Express)の開発環境を構築したい方
環境
- Windows 10 (1903)
- Visual Studio Code (1.38.1)
- Node.js (v10.16.3)
- npm (6.11.2)
前提条件
- Node.js, npmおよびVS Codeインストール済
開発環境構築
プロジェクトディレクトリを作成
下記のコマンドを実行し、プロジェクト用のディレクトリを作成します。
使用するコマンドはWindows, MacおよびLinux環境すべてで同じです。
mkdir [project name]
Expressインストール
インストール
最初に、作成したプロジェクト用ディレクトリへ移動しておきます。
次に、下記のコマンドを実行しExpressをローカルインストールします。
npm install express --save-dev
テスト用環境を構築
最初に下記にコマンドを実行します。
npm init
次にapp.jsというファイルを作成し、下記のコマンドをペーストします。
const express = require("express");
const app = express();
app.get("/", (req, res) => {
res.send("Hello World!");
});
const server = app.listen(3000, () => {
const host = server.address().address;
const port = server.address().port;
console.log("Example app listening at http://%s:%s", host, port);
});
これでExpressの環境構築は終了です。
次は、ホットリロードの設定をしていきます。
Nodemonのグローバルインストール
ホットリロードの環境を構築するためにNodemonを使用します。
インストール
下記のコマンドを実行し、Nodemonをグローバルインストールします。
npm install nodemon -g
設定ファイル作成
.nodemon.jsonをプロジェクトのルートパスに作成します。
ファイルを作成したら、下記のコードをファイル内へペーストします。
{
"watch": "./*",
"ext": "js,json",
"exec": "node ./app"
}
launch.jsonの作成および編集
最初に、launch.jsonを下記の作業を行い作成します。
[Debug] in a left menu -> [Gear icon] -> Select Environmentのところで"Node.js"を選択.
次に、launch.json内の"configuration"の中身を下記に置き換えます。
{
"type": "node",
"request": "attach",
"name": "Node: Nodemon",
"processId": "${command:PickProcess}",
"restart": true,
"protocol": "inspector"
}
下記のコードは置き換え後の、ファイル内全体のコードです。
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Node: Nodemon",
"processId": "${command:PickProcess}",
"restart": true,
"protocol": "inspector"
}
]
}
package.jsonを編集
最後に、プログラムを実行するためのコマンドをpackage.jsonへ追加します。
下記のコマンドをファイル内の"script"へ追加します。
"debug": "nodemon --inspect app.js"
これで開発環境の構築は終了です。
プログラムのデバッグ実行方法
プログラムをデバッグ実行する場合、下記のコマンドをプロジェクト用ディレクトリのルートで実行します。
npm run debug
その後、VS Code上でF5キーを押します。
この時にVS Codeからアタッチするプロセスを聞かれた場合は、“node –inspect app.js"を選択してください。
プログラムを終了したい場合はShift + F5を押すか、デバッグメニューの"Disconnect"をクリックしてください。また、コマンドプロンプトもしくはPowerShell上でCtrl + Cを押すのも忘れないようにしてください。
