概要
表題の通り、Node.jsで作成したAPIをHerokuにデプロイする工程をまとめました。
CLIが苦手なので、なるべく使わない方向でデプロイします。
環境
Windows10
VSCode
グローバル環境に以下をインストールしているものとします。
Node.js（npm）
TypeScript
API を作成する
Node.js、Express、TypeScriptを使用して、APIを作成します。
Herokuにデプロイすることが目的なので、単純なAPIです。
パッケージ インストール
任意のプロジェクトフォルダを作成します。
VSCodeでプロジェクトフォルダを開いて、ターミナルから必要なパッケージをインストールします。
まず、package.jsonを作成します。
ターミナル
npm init -y
scriptsの項目を以下のように変更します。
package.json
"scripts": {
"dev": "nodemon dist/main.js"
}
パッケージをインストールします。
ターミナル
npm i express
npm i -D @types/node @types/express nodemon
nodemon：jsファイルの変更に応じて、サーバーを再起動してくれるパッケージ
tsconfig.json
ターミナルで以下を実行し、tsconfig.jsonが作成します。
ターミナル
tsc --init
tsconfig.json
{
"compilerOptions": {
/* Basic Options */
"target": "ES2018",
"module": "commonjs",
"sourceMap": true,
"outDir": "./dist",
"rootDir": "./src",
/* Strict Type-Checking Options */
"strict": true,
/* Module Resolution Options */
"moduleResolution": "Node",
"esModuleInterop": true,
/* Experimental Options */
"experimentalDecorators": true,
/* Advanced Options */
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
}
}
tsファイルをsrcフォルダに、コンパイル後のjsファイルをdistフォルダに格納する設定にしています。
コーディング
src/main.ts
import express from 'express';
const app = express()
// jsonデータを扱う
app.use(express.json())
app.use(express.urlencoded({ extended: true }))
// テスト用のエンドポイント
app.get('/', (req, res) => {
res.status(200).send({ message: 'hello, api sever!' })
})
// サーバー接続
const port = process.env.PORT || 3001
app.listen(port, () => {
console.log('listen on port:', port)
})
今回は使いませんが、jsonデータを受け取れるように設定しています。
ポートは、ローカル環境では3001（3000はクライアントアプリで使うので）、本番環境ではデプロイ先に依存するように設定します。
起動確認
TypeScriptを使う場合、サーバーを起動する前にJavaScriptファイルにコンパイルする必要があります。
ターミナルで以下を実行します。
ターミナル1
tsc -w
-w：tsファイルの変更を監視して、変更があれば自動的にjsファイルに変換する
停止する場合は、Ctrl + C
ターミナルをもう一つ追加して、以下を実行します。
ターミナル2
npm run dev
このようにすることで、
tsファイルを変更する → jsファイルが生成される（変更される） → サーバーが再起動する
という環境ができます。
postmanやブラウザでローカルホストにアクセスして、メッセージが返ってくればOKです。
http://localhost:3001
{
"message": "hello, api sever!"
}
Heroku にデプロイする
設定ファイルの追加・変更
Herokuにデプロイするための設定を追加します。
package.json
package.json
{
"name": "heroku-node-demo",
"version": "1.0.0",
"description": "",
"main": "dist/main.js",
"engines": {
"node": "14.17.x",
"npm": "7.6.3"
},
"scripts": {
"start": "node dist/main.js",
"dev": "nodemon dist/main.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.17.1"
},
"devDependencies": {
"@types/express": "^4.17.13",
"@types/node": "^16.4.10",
"nodemon": "^2.0.12"
}
}
main、engines、scriptsの項目を変更・追加します。
enginesで、追記するnode、npmバージョンは、以下のコマンドで確認します。
ターミナル
node -v
> v14.17.1
npm -v
> 7.6.3
nodeのバージョンは、パッチバージョンをそのまま追記するとHerokuのデプロイがうまくいかないことがあります。
その場合は、14.17.xのように記述します。
Procfile
Herokuのエントリーポイント設定ファイル
Procfile
web: npm start
npm startなので、node dist/main.jsが実行されます。
GitHub
HerokuプロジェクトをGitHubリポジトリと関連付けるために、作成したプロジェクトをGitHubに登録します。
GitHubへの登録方法は、まとめている方が多いので割愛します。以下などを参照にしてください。
Herokuへのデプロイ
Heroku のアカウントを作成して、ダッシュボードを開きます。
Crete new app でプロジェクトを作成します。
App name を選択して、Create app を押します。
App nameは、ユニークな名前である必要あります。
regionは、アメリカかヨーロッパのどちらかなので、アメリカにします。
デプロイ方法で GitHub を選択し、作成したリポジトリを検索・選択します。
Deploy Branch を押すと、デプロイが始まります。
[Enable Automatic Deploys]を押すと、GitHubのmainブランチに変更があったタイミングで、自動的にデプロイが行われるようになります。toggleボタンになっているので、好きにオンオフできます。
成果物
Tips
デバッグ方法
ローカルサーバーでのデバッグ方法についてまとめいてます。
↧
