TypeScript + express + yarn + pm2でプロジェクト作成からリリースまで

最近、この構成で開発を始めることが多いので、覚書です。

プロジェクトの作成

まず、適当なフォルダを作ります。

mkdir work
cd work

ここではyarnを使います。TypeScriptなどを導入します。
いずれも本番環境で必要なものではないので、yarn add --devで開発環境にだけインストールします。
npx tsc --initコマンドでTypeScriptの設定ファイルを作成します。

yarn init
yarn add --dev typescript @types/node ts-node nodemon
npx tsc --init

さらに、expressとdotenvを入れます。.envファイルを使いたいですしね。これも開発環境だけのインストールです。
TypeScriptでは、各パッケージで準備されているtypeのパッケージもインストールします。

yarn add express dotenv
yarn add --dev @types/express

最初のプログラムと実行

index.tsを作成し、下記のようにします。
Access-Control-Allow-Originの辺りは、とりあえず全部OKという設定ですが、状況に応じて制限をかけましょう。

import 'dotenv/config'
import http from 'http'
import express from 'express'

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

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()
})

const server: http.Server = http.createServer(app)
server.listen(process.env.PORT, () => {
    console.log(`Start on port ${process.env['PORT']}.`)
})

app.get('/', (req: express.Request, res: express.Response) => {
    res.json({
        result: 'OK'
    })
})

.envを作成し、下記のようにします。

PORT=3100

package.jsonの"scripts"の部分を追記し、下記のようにします。
これで、yarn startとするとts-nodeを使ってアプリが起動するようになります。

{
  "name": "work",
  "version": "1.0.0",
  "main": "index.js",
  "author": "Kenichi Inoue",
  "license": "MIT",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "ts-node index.ts"
  },
  "devDependencies": {
    "@types/express": "^4.17.14",
    "@types/node": "^18.11.9",
    "ts-node": "^10.9.1",
    "typescript": "^4.9.3"
  },
  "dependencies": {
    "dotenv": "^16.0.3",
    "express": "^4.18.2"
  }
}

実際に起動してみましょう。

yarn start

ビルド

次に、tsconfig.jsonに下記の設定を行います。
ビルドしたファイルの保存場所として、./dist/を指定します。

  "compilerOptions": {
    "outDir": "./dist/",
  }

package.jsonを下記のように書き換えます。yarn buildでビルドされるようになります。他にもいくつか追加しました。

  "main": "dist/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "nodemon --watch '**/*.ts' --exec 'ts-node' index.ts",
    "build": "tsc",
    "watch": "tsc -w",
    "start": "yarn build && node dist/index.js"
  },

実際にビルドしてみます。./dist/配下に.tsをトランスパイルした.jsファイルなどがが出来ているでしょう。

yarn build

pm2のインストールと起動

本番環境での起動のために、pm2を使用します。まず、pm2をグローバル（-g）でインストールします。

npm install pm2 -g

pm2配下でビルドした.jsファイルを起動します。ここではworkという名前を付けているので、再起動時やログの参照時などに名前を使えるようになります。

pm2 start dist/index.js --name work

これで、最低眼のアプリが動くようになりました。あとは、バシバシ開発しましょう！