Zenn
Open5

Node(typescript) + docker 環境構築メモ

aGlnYWtpbg==aGlnYWtpbg==

必要ファイル作成 ~ 必要パッケージinstall

Dockerfile, docker-compose.yml ファイルを作成

touch Dockerfile docker-compose.yml

Dockerfile

Dockerfilet
FROM node:12-alpine3.12

WORKDIR /app

docker-compose.yml

docker-compose.yml
version: '3'
services:
  node-dev:
    build: 
      context: .
      dockerfile: Dockerfile
    tty: true
    volumes:
      - .:/app

コンテナ起動&コンテナ内で必要パッケージを追加

# コンテナ起動
docker-compose up -d --build
# コンテナ内に入る
docker-compose exec node-dev sh

# コンテナ内で必要パッケージを追加
npm init -y
npm install typescript ts-node ts-node-dev

# tsconfig.jsonファイルを作成
npx tsc --init
aGlnYWtpbg==aGlnYWtpbg==

Dockerfile修正 ~ コード実行

mkdir src && touch src/app.ts
app.ts
console.log("Hello, world!")

package.json内のscriptを追加

package.json
{
  // .....
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "npx ts-node-dev --respawn src/app.ts"
  },
  // ......
}

Dockerfileを修正

Dockerfile
FROM node:12-alpine3.12

WORKDIR /app

COPY package*.json ./
RUN npm install

CMD npm run dev

コンテナ環境を再起動(再ビルド)

docker-compose up -d --build


# コンテナ環境のログを確認
docker-compose logs -f

以下のように hello worldが表示されていたら成功。

node-dev_1  |
node-dev_1  | > app@1.0.0 dev /app
node-dev_1  | > npx ts-node-dev --respawn src/app.ts
node-dev_1  |
node-dev_1  | [INFO] 15:29:47 ts-node-dev ver. 1.1.8 (using ts-node ver. 9.1.1, typescript ver. 4.5.4)
node-dev_1  | Hello, world!
aGlnYWtpbg==aGlnYWtpbg==

開発時など(コンテナ環境内でコマンドを実行したい時)

docker-compose.yml
version: '3'
services:
  node-dev:
    build: 
      context: .
      dockerfile: Dockerfile
    tty: true
    volumes:
      - .:/app
    entrypoint: >
      /bin/sh -c "sleep 86400"

コンテナ環境内に入って、任意のプロセスを実行

docker-compose up -d
# コンテナ環境内に入る
docker-compose exec node-dev sh

# コンテナ環境内で任意のコマンドを実行
npm run dev

以下のように Hello, world!が表示されたら成功。

> app@1.0.0 dev /app
> npx ts-node-dev --respawn src/app.ts

[INFO] 15:35:51 ts-node-dev ver. 1.1.8 (using ts-node ver. 9.1.1, typescript ver. 4.5.4)
Hello, world!
aGlnYWtpbg==aGlnYWtpbg==

Expressの利用例

docker-composeファイルを修正

docker-compose.yml
version: '3'
services:
  node-dev:
    build: 
      context: .
      dockerfile: Dockerfile
    tty: true
    volumes:
      - .:/app
    ports:
      - 3001:3000
    entrypoint: >
      /bin/sh -c "sleep 86400"

app.tsを修正

src/app.ts
import express from 'express'
const app: express.Express = express()
app.use(express.json())
app.use(express.urlencoded({ extended: true }))

app.use((req: express.Request, res: express.Response, next: express.NextFunction) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Methods", "*")
    res.header("Access-Control-Allow-Headers", "*");
    next();
})

app.listen(3000, () => {
    console.log("Start on port 3000.")
})

type User = {
    id: number
    name: string
    email: string
};

const users: User[] = [
    { id: 1, name: "User1", email: "user1@test.local" },
    { id: 2, name: "User2", email: "user2@test.local" },
    { id: 3, name: "User3", email: "user3@test.local" }
]

//一覧取得
app.get('/users', (req: express.Request, res: express.Response) => {
    res.send(JSON.stringify(users))
})

コンテナ内で必要パッケージinstallとapiサーバー起動

docker-compose up -d
docker-compose exec node-dev sh

# コンテナ内に必要パッケージをinstall
npm install -D @types/node
npm install express
npm install -D @types/express

npm run dev

以下のように出力されていることを確認

> app@1.0.0 dev /app
> npx ts-node-dev --respawn src/app.ts

[INFO] 15:45:34 ts-node-dev ver. 1.1.8 (using ts-node ver. 9.1.1, typescript ver. 4.5.4)
Start on port 3000.

コンテナ外で、apiサーバーの疎通確認

curl -sS localhost:3001/users | jq .

以下のように結果を出力されていればOK

[
  {
    "id": 1,
    "name": "User1",
    "email": "user1@test.local"
  },
  {
    "id": 2,
    "name": "User2",
    "email": "user2@test.local"
  },
  {
    "id": 3,
    "name": "User3",
    "email": "user3@test.local"
  }
]