DockerでExpress + TypeScriptの環境構築をする

投稿日：2024/12/7

更新日：2024/12/8

前置き

ちょいちょいExpressの検証したいなーということがあり、それ用にDockerで環境構築したので備忘録です。

プロジェクト構成

まず、以下のディレクトリ構成でプロジェクトを作成してください。

Terminal

.
├── Dockerfile
├── docker-compose.yaml
├── package.json
├── src
│   └── index.ts
└── tsconfig.json

Docker Composeでアプリケーションを構築するための設定ファイルです。

docker-compose.yaml

version: "3.8"
services:
  app:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    volumes:
      - .:/usr/src/app
      - /usr/src/app/node_modules
    command: "npm run dev"

ポイント:

volumesにより、ホスト側のコードをコンテナに反映
commandでnpm run devを実行し、開発モードで動作

Node.jsの公式イメージをベースに、TypeScript環境を構築します。

Dockerfile

FROM node:18

# 作業ディレクトリを設定
WORKDIR /usr/src/app

# package.json と package-lock.json をコピー
COPY package*.json ./

# npm パッケージをインストール
RUN npm install

# ts-node-dev をグローバルにインストール
RUN npm install -g ts-node-dev

# ソースコードをコピー
COPY . .

# アプリケーションを起動
CMD ["npm", "run", "dev"]

必要なパッケージと開発スクリプトを設定します

package.json

{
  "name": "express-ts-docker",
  "version": "1.0.0",
  "main": "dist/index.js",
  "scripts": {
    "start": "node dist/index.js",
    "build": "tsc",
    "dev": "ts-node-dev --respawn --transpile-only src/index.ts"
  },
  "dependencies": {
    "express": "^4.18.2"
  },
  "devDependencies": {
    "@types/express": "^4.17.17",
    "@types/node": "^20.7.0",
    "ts-node": "^10.9.1",
    "ts-node-dev": "^2.0.0",
    "typescript": "^5.2.2"
  }
}

ポイント:

ts-node-devを使用して、コード変更時に自動で再起動。
開発用と本番用スクリプトを明確に分けています。

TypeScriptの設定ファイルです。

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "CommonJS",
    "strict": true,
    "esModuleInterop": true,
    "outDir": "dist",
    "rootDir": "src"
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}

ポイント:

outDirでコンパイル後のファイルの出力先を指定。
strictモードで厳密な型チェックを有効化。

以下のコードを追加して、Expressサーバーを作成します。

src/index.ts

import express from "express";

const app = express();
const PORT = 3000;

app.get("/", (req, res) => {
  res.send("Hello, Docker + Express + TypeScript!");
});

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

アプリケーションのビルドと起動

以下のコマンドを実行して、コンテナをビルドし起動します。

Terminal

docker compose build
docker compose up

動作確認

ブラウザで localhost:3000 にアクセスし、以下のメッセージが表示されれば成功です！

まとめ

結構簡単にできてしまったので、味気ない記事になってしまいました、、

ただ、今のままだと下のようにインポートでエラー吐く問題が発生すると思うのでそれについてはまた今度書こうと思います。

Index

前置き
プロジェクト構成
アプリケーションのビルドと起動
動作確認
まとめ