お久しぶりです!新垣です!
最近 Typescript の勉強を始めたので簡単に実行できる環境ほしかったのと
Jestも実行できるようにしたかったので Dockerで実行環境を作ってみたので共有します!
以下記事を参考にさせていただきました。
Node(typescript) + docker 環境構築メモ
https://zenn.dev/gakin/scraps/4cc16e7761d1ef
JestをTypeScriptで使う
https://zenn.dev/kohski/articles/typescript_jest
1.Dockerfile & docker-compose.yaml の追加
以下コマンドでファイルの追加とdockerの設定の追加
touch Dockerfile docker-compose.yaml
Dockerfile
FROM node:12
WORKDIR /app
RUN npm install && \
npm init -y && \
yarn add --dev typescript ts-node ts-node-dev jest ts-jest @types/jest && \
mkdir src tests && touch src/app.ts tests/index.test.ts && \
cd /usr/local/bin &&\
ln -s /app/node_modules/typescript/bin/tsc && \
tsc --init
docker-compose.yaml
version: '3'
services:
app:
build:
context: .
dockerfile: Dockerfile
tty: true
volumes:
- .:/app
2. 実行ファイルを作成
$ mkdir src tests && touch src/index.ts tests/index.test.ts
src/index.ts
const message = 'hello world!'
console.log(message)
export default message
tests/index.test.ts
import message from '../src'
test('check message value', () => {
expect(message).toBe('hello world!')
})
3. 設定ファイルの追加と修正
$ touch package.json
package.json
{
"name": "app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"ts-node": "^10.8.1",
"typescript": "^4.7.4",
"tsc": "2.0.4"
},
"devDependencies": {
"@types/jest": "^28.1.3",
"jest": "^28.1.1",
"ts-jest": "^28.0.5"
},
"scripts": {
"test": "jest --coverage"
},
"author": "",
"license": "ISC"
}
4. Dockerの起動
$ docker-compose build
$ docker-compose up -d
5. jest の設定
jest.config.js
/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
preset: 'ts-jest',
testEnvironment: 'node',
roots: ["<rootDir>/tests", "<rootDir>/src"],
collectCoverage: true,
collectCoverageFrom: [
"*/*.ts",
"!**/node_modules/**",
],
coverageDirectory: 'coverage_dir',
coverageReporters: ["html"]
};
5. ファイルのコンパイルと実行
tsファイルのコンパイル
$ docker-compose exec app tsc src/index.ts
js ファイルの実行
$ docker-compose exec app node src/index.js
jest 実行
$ docker-compose exec app npm test
皆さんがさくっと環境構築できて Typescript の学習に集中できると私もうれしいです!
みんなでTypescriptマスターを目指しましょう!