Edited at

Express + TypeScript + docker-compose + yarn で開発環境を作る


概要

Goでバックエンドを書いているのですが、マイクロサービス化しているため、

入り口となるBFF(Backend For Frontend)サーバーを建てることになり、

実績の多いNodeでやることにしました。

Javascriptで消耗したくないのでTypescriptです。

この組み合わせがなかったのでまとめておきます。

GitHub: https://github.com/0daryo/node-ts


Package.json


package.json

{

"dependencies": {
"webpack": "^4.29.6",
"webpack-node-externals": "^1.7.2",
"express": "^4.16.4",
"webpack-cli": "^3.2.3"
},
"devDependencies": {
"@types/express": "^4.16.1",
"ts-loader": "^5.3.3",
"tslint": "^5.14.0",
"tslint-config-airbnb": "^5.11.1",
"tslint-loader": "^3.5.4",
"typescript": "^3.3.3333",
"webpack": "^4.29.6",
"webpack-node-externals": "^1.7.2"
}
}

express, ts系のモジュールのみですね


webpack


webpack.config.dev.js

const path = require('path');

const nodeExternals = require('webpack-node-externals');

module.exports = {
mode: 'development',
entry: './src/server.ts',
target: 'node', // Module not found: Error: Can't resolve
externals: [nodeExternals()],
devtool: 'inline-source-map',
module: {
rules: [
{
enforce: 'pre',
loader: 'tslint-loader',
test: /\.ts$/,
exclude: [
/node_modules/
],
options: {
emitErrors: true
}
},
{
loader: 'ts-loader',
test: /\.ts$/,
exclude: [
/node_modules/
],
options: {
configFile: 'tsconfig.dev.json'
}
}
]
},
resolve: {
extensions: ['.ts', '.js']
},
output: {
filename: 'server.js',
path: path.resolve(__dirname, 'dist')
}
};


server.tsをエントリーポイントにして、ts系設定を書いておきます。


docker-compose


docker-compose.yml

version: '3'

services:
node:
image: "node:11.8.0"
user: "node"
working_dir: /home/node/app
environment:
- NODE_ENV=develop
volumes:
- .:/home/node/app
ports:
- "3000:3000"
command: bash -c "yarn install && ./node_modules/.bin/webpack --config ./webpack.config.dev.js && node ./dist/server.js"


commandでyarn系の処理を行なっています。

docker-compose初心者なのでいい方法あれば教えてください。

expressのポート3000番に合わせてあります。


Typscript


src/server.ts

import * as Express from 'express';

const app = Express();

app.get(
'/',
(req: Express.Request, res: Express.Response) => {
return res.send('Hello world.');
});

app.listen(
3000,
() => {
console.log('Example app listening on port 3000!');
});

export default app;


これでターミナルに

docker-compose up

localhost:3000から"Hello World"が帰って来れば環境構築完了です。


参考

https://qiita.com/IgnorantCoder/items/c9b79dbab8c1a34b769f