【Hello World⑫】Node.js @ JavaScript

Node.jsでJavaScriptのWebアプリを作ります

Windows11のDocker環境上で
JavaScript言語のAPIを作ります。JavaScriptの実行環境にはNode.jsを使います。

環境

Windows 11 Pro 23H2
WLS 2.1.5.0（Ubuntu 22.04.1 LTS）
Docker Desktop 4.28.0
Visual Studio Code

①フォルダ・ファイルを作成

以下の構成でフォルダとファイルを作ります。

フォルダ構成

vue
 ├─app
 │  └─index.js    # アプリ
 └─compose.yaml   # コンテナ作成時の指示を記載したファイル

以下のコマンドでフォルダ・ファイルを作成します。

PowerShell

mkdir node            ;`
cd node               ;`
mkdir app             ;`
New-Item compose.yaml ;`
New-Item app/index.js ;`
code  compose.yaml    ;`
code app/index.js

ファイルに以下の内容を記載します。

compose.yaml

services:
  web:
    image          : node:18.18.2
    container_name : node
    command        : npx nodemon --legacy-watch
    working_dir    : /app
    volumes:
      - ./app:/app
    ports:
      - "3000:3000"

index.js

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World Node.js on Docker!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

②Node.jsのプロジェクトを作成

以下のコマンドを実行し、Node.jsのプロジェクトを作成します。

PowerShell

docker compose run --rm -it web `
bash -c "yarn init -y && `
         yarn add express && `
         yarn add --dev nodemon"

※npmコマンドでプロジェクトを作成する場合はこちら。

PowerShell

docker compose run --rm -it web `
bash -c "npm init -y && `
         npm install express && `
         npm install --save-dev nodemon"

作成されるフォルダ・ファイルの構成と「package.json」の内容

フォルダ構成（yarnでプロジェクトを作成した場合）

node
 ├─app
 │   ├─node_modules
 │   ├─index.js
 │   ├─package.json
 │   └─yarn.lock
 └─compose.yaml

package.json

{
  "name": "app",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "express": "^4.19.2"
  },
  "devDependencies": {
    "nodemon": "^3.1.0"
  }
}

③Node.jsのコンテナを起動

以下のコマンドを実行し、Node.jsのコンテナを起動します。

PowerShell

docker compose up -d

④Hello Worldが表示されることを確認

http://localhost:3000に接続して、Hello Worldが表示されていることを確認。