Node.jsの開発環境をDockerコンテナに構築する

環境構築

前回の開発用コンテナの作り方に不足があったので、Node.js（とExpress）の練習を兼ねて覚え書きを残しておきます。

環境

ホスト

  • OS: Windows 10 Home 21H1
  • VSCode: 1.65.2

リモート

  • OS: Windows 10 Pro 21H2
  • WSLディストリビューション: Ubuntu 20.04.3 LTS (Focal Fossa)
  • Docker Engine: 20.10.14

コンテナを構築する

GitHubからサンプルプロジェクトをリモートマシンにダウンロードします。
zipファイルを展開し、展開されたフォルダをWSL内に配置してからリネームします。
VSCodeのコマンドパレットから、「Remote-Containers: Open Folder in Container…」でプロジェクトフォルダを開きます。

コンテナが構築されました。
ターミナルに表示されている通り、何かキーを押して一度ターミナルを閉じます。

サーバを起動する

ターミナルを起動します。
カレントディレクトリは/workspaces/プロジェクトフォルダです。

以下のコマンドでプログラムを実行し、サーバを起動します。

node server.js

ホストマシン側のWebブラウザから表示するため、ポートフォワーディングの設定を行います。
「ポート」パネルから「ポートの追加」をクリックして、3000と入力します。すると、自動的に設定が追加されました。

ローカルアドレスをマウスオーバーして表示された真ん中のアイコンから、Webブラウザで開くことができます。

HTMLファイルを表示する

サンプルコードを少し変更して、HTMLファイルを表示してみます。

プロジェクトフォルダ直下にHTMLファイルを追加します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

server.jsの17行目あたりを下記のように変更します。
send()の代わりにsendFile()を使用して、表示したいHTMLファイルを指定します。

app.get('/', (req, res) => {
	// res.send('Hello remote world!\n');
	res.sendFile(__dirname + "/statics/jsmind.html");
});

コンソールからCtrl Cでサーバを停止し、node server.jsで再度起動します。

HTMLファイルの内容が表示できました。