概要
Typescript×Express×Dockerを使ったサーバーサイド開発を行うための環境構築のメモです。まずローカル環境で開発できる環境を作成してから、Docker上でサーバーを起動できる環境を作成します。開発環境はMacです。
まずローカル開発環境を作成してみる
voltaによるnodeのインストール
-
node.jsのバージョン管理ツールとして最近使われていそうだったvoltaを使用
-
homebrewを使用してインストール
$ brew install volta
- パスの自動追加
$ volta setup
- nodeのインストール。バージョンを指定しなければ最新LTSバージョンになる
$ volta install node
$ node -v
> v16.17.0
express projectの作成（expressのインストールまで）
- expressのチュートリアルに従いアプリケーションの初期化を実行
$ mkdir express # アプリケーションのディレクトリ作成
$ cd express
$ npm init # package.jsonが生成される
$ npm install express
- pacage.jsonと、package-lock.jsonが生成される
package.json
{
"name": "expres",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.18.1"
}
}
typescriptの環境構築
- 必要なライブラリのインストール
$ npm install -D typescript ts-node @types/node
$ npm install -D @types/express
- tsconfig.jsonの作成
$ npx tsc --init
tsconfig.json
{
"compilerOptions": {
"target": "es2016",
"module": "commonjs",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
}
}
express projectの作成（hello worldまで）
- expressのチュートリアルに従いアプリケーションを起動できるところまで進める。jsファイルで書かれているため、Typescript用に手を加えています
index.ts
import express, { Request, Response } from "express";
const app = express();
const port = 3000;
app.get("/", (req: Request, res: Response) => {
res.send("Hello World!");
});
app.listen(port, () => {
console.log(`Example app listening on port ${port}`);
});
- scriptの追加
package.json
"scripts": {
"start": "ts-node index.ts"
}
- サーバの起動
- 起動後
http://local:3000ブラウザ上などからでアクセスできることを確認する
- 起動後
$ npm run start
ファイル修正時に自動的にアプリケーションの再起動を行うように設定する
- nodemonをインストール
$ npm install -D nodemon
- tsconfig.jsonに下記を追加する
tsconfig.json
"outDir": "./dist/"
tsconfig.json
"scripts": {
"start": "nodemon dist/index.js",
"build": "npx tsc",
"build:watch": "npx tsc",
"dev": "npm run build:watch & npm run start"
},
-下記のコマンドを実行することでファイル編集時にビルド&サーバーの再起動が行われるようになる
$ npm run dev
Docker上で動かしてみる
Dockerfileの作成
FROM node:16.17
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
docker-composeファイルの作成
- volumesの設定を行なっているので、ローカルのファイル変更をおこなった際にdocker環境上でも再ビルド&サーバーの再起動が行われる
version: "3"
services:
app:
build:
context: .
dockerfile: Dockerfile
container_name: app
volumes:
- /usr/src/node_modules
- .:/usr/src/app
command: npm run dev
expose:
- 3000
ports:
- "3000:3000"
- コンテナを立ち上げて
http://localhost:3000にブラウザでアクセスできる&ファイル編集時に変更が自動で反映されることが確認できます
$ docker-compose up