Docker+Express+TypeScript+ts-node-devで環境構築してみた

概要

TypeScriptでExpressを利用した開発環境を構築したので、メモとして残します

利用ツール

• docker-compose
• Express
• TypeScript
• ts-node-dev

手順

1. dockerファイルの作成

docker-compose.yml

version: "3"
services:
  express:
    build: .
    tty: true
    ports:
      - "3000:3000"
    volumes:
      - ./app:/app

Dockerfile

# 公式イメージ, 安定版, 軽量なalpine版を利用
FROM node:16.14.2-alpine

WORKDIR /app

2. コンテナ起動

shell(ホスト)

# イメージのビルドおよび、コンテナ起動
$ docker-compose up -d --build

-dはバックグランドでコンテナ起動

3. 必要なパッケージインストール

shell(コンテナ)

# コンテナ内に入る
$ docker-compose exec express sh

# yarnの初期化(必要に応じて入力する)
$ yarn init

# パケージの導入
$ yarn add express
$ yarn add --dev @types/express @types/node typescript ts-node-dev

• Express
  • Node.jsでAPIなどを簡単に作成できるWebアプリフレームワーク
• TypeScript
  • 静的型付け言語、型安全にしてソースコードを記述できる
• ts-node-dev
  • ts-node, node-devを組み合わせたもの
  • TypeScirptで記述したコードをJavasSriptにコンパイルする必要がなくホットリロードを利用して開発ができるため、必須

4. TypeScriptの設定ファイル初期化

これをやらないとエラーになる

shell

# コンテナ内
# TypeScriptの初期化
$ yarn run tsc --init

tsconfig.jsonが作成されるので、必要に応じて設定ファイルを記述してください。

5. package.jsonにscriptを追加

これは必須ではありませんが、通常の開発であれば登録します。今回は、$ yarn devで露おーかるサーバを軌道するようにします。

package.json

  "scripts": {
    "dev": "ts-node-dev --respawn src/index.ts"
  },

--respawnは、今回のサンプルのように本来実行して即終了のプログラムも、終了せず監視状態にする。常時起動の待ち受けサーバなら不要です。
src/index.tsは5. で作成するエントリーファイルへのパスです。必要に応じて変更してください。

6. エントリーファイルの作成

src/index.tsを作成。エントリーファイルの作成場所は問いませんが、4. でのファイルパスへの指定を合わせてください。
適当にレスポンスを返すコードを記載しています。

src/index.ts

import express from "express";

const app: express.Express = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

//CROS対応（というか完全無防備：本番環境ではだめ絶対）
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: "[e-mail]" },
  { id: 2, name: "User2", email: "[e-mail]" },
  { id: 3, name: "User3", email: "[e-mail]" },
];

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

7. サーバー起動

shell(コンテナ内)

$ yarn dev

8. 確認

shell(ホスト)

$ curl -s -X GET http://localhost:3000/users
[{"id":1,"name":"User1","email":"[e-mail]"},{"id":2,"name":"User2","email":"[e-mail]"},{"id":3,"name":"User3","email":"[e-mail]"}]

となれば、成功です。

index.ts内のファイルを変更して保存するとすぐに反映されることも確認（ホットリロード）できます。

9. dockerfileを完成させる

Dockerfile

FROM node:16.14.2-alpine

WORKDIR /app

# パッケージインストール
COPY ./app/package.json ./app/yarn.lock ./
RUN yarn install

# ファイル全コピー
COPY ./app .

# ローカルサーバー起動
ENTRYPOINT [ "yarn", "dev" ]

これで次回移行$ docker-compose up -dでローカルサーバーも起動する。
コンテナを再度作り直しても、$ docker-compose up -d --buildコマンドを叩くだけで、パッケージインストール、サーバの起動もやってくれるので便利。

ローカルサーバ(express)がログが見たい場合は、$ docker-compose logs -f expressで見れる。

最後に

今回はデータベースは省いています。が、データベースもdocker-composeにて簡単にサーバを起動して連携できます。なので次回また、その方法について、メモ残します。

参考