Docker で TypeScript の確認環境を構築する

はじめに

Dockerコンテナ上でTypeScriptを実行確認するための環境構築メモ。

修正

2023/01/04 パラメータの内容を整理

環境

• windows10 pro
• wsl2(20.04.5 LTS (Focal Fossa))
• Dockerのバージョン
  • Docker version 20.10.18, build b40c2f6
  • docker-compose version 1.29.2, build 5becea4c
    ※Docker Desktop ではありません
    　を入れています

フォルダ構成

[projectfolder]
 ├─ docker-compose.yml
 ├─ Dockerfile
 └─ .env

ざっくり解説

基本的に変更する可能性のある設定値は .env に記載する
コマンドラインでプログラムは実行確認する
流用すれば、Webのフレームワークも使える（docker-composeファイルにコマンドorスクリプト作成）

各ファイル

docker-compose.yml

version: "3.9"

services:
  app:
    image: ${PROJECT_NAME}:${IMAGE_VERSION}
    build:
      context: .
      args:
        WORKDIR: ${WORKDIR}
        NODE_IMAGE_TAG: ${NODE_IMAGE_TAG}
    ports:
      - ${APP_PORT}:3000
    tty: true
    volumes:
      - .:${WORKDIR}

Dockerfile

# イメージ指定
ARG NODE_IMAGE_TAG
FROM node:$NODE_IMAGE_TAG

# パッケージ追加
RUN apk update --no-cache && \
    apk add --no-cache vim curl

# パラメータ変数
ARG WORKDIR
ARG TIMEZONE

# すべてのファイルをnodeユーザーのものに
RUN mkdir -p $WORKDIR
RUN chown -R node:node $WORKDIR

# ユーザー切り替え
USER node

# 作業ディレクトリ変更
WORKDIR $WORKDIR

# 内部ポート明示
EXPOSE 3000

.env

# 外部からの接続ポート
APP_PORT=3000

# コンテナ内作業ディレクトリ
WORKDIR=/usr/src/app/test-typescript
# タイムゾーン
TIMEZONE=Asia/Tokyo

# Nodeの使用イメージタグ(apkが使えるもののみ)
NODE_IMAGE_TAG=18.12.1-alpine

# リソース管理（イメージとタグ名）
PROJECT_NAME=test-typescript
IMAGE_VERSION=1.0

起動

# コンテナ構築
docker-compose up -d --build

# コンテナに入る
docker exec -ti {container_naame} sh
# TypeScript実行に必要なものを導入する
npm install typescript ts-node

動作確認例

luxon の動作確認をしたいとき

• 確認用のプログラム

  test.ts

  import { DateTime } from "luxon";
  
  console.log(DateTime.local().toString());
  

• パッケージインストール

  npm install luxon @types/luxon
  

• 実行確認

  ./node_modules/.bin/ts-node test.ts
  

※ファイルはプロジェクトファイル直下に置いている前提

最後に

細かい単位で実行できる環境は意外と便利なハズ