Node.js(Express)で書いたJSONデータの受け渡しプログラムをHeroku上で動かしてみる

Node.js(Express)でGETリクエストに応答するだけのプログラムを作れたので、次はクライアント側からPOSTしてなんやかんやするプログラムを作ります。
JSONデータのPOSTを受け取って、そのままJSONデータを返してもらいましょう。

結論

どハマりするポイントもなくすんなり書けます。
JSONデータを受け取る、JSONデータを返すができればDB連携のあるプログラム作成も目前感がしてちょっとした進歩感が出てきて嬉しい。

環境

Win10+VSC@1.68
Node.js@16.14.2+Express@4.18.1

やろうとしたこと

• Herokuサービス上でNode.js(Express)アプリケーションを動かす
• JSONデータをポストしてJSONデータを返してくれる実装

やってみる

Herokuにアプリをデプロイするのはこっち参照

POSTされたJSONデータを返すプログラムの作成メモはこっち

まずGETリクエストに応答するだけのプログラムにPOSTリクエストを受け付ける部分を足していきます。

index.js

const express = require('express')
const app = express()
const PORT = process.env.PORT || 3000

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

app.get('/', function (req, res) {
  res.send(`HELLO WORLD!! PORT NUMBER is ${PORT}`)
})

app.post('/', function (req, res) {
    console.log(req.body)
    res.json({
        msg: 'These messages are JSON',
        name: req.body.name,
        data: req.body.age
  })
})

app.listen(PORT)
console.log(`Express Server Listen START at port=${PORT}`)

REST Clientを使ってPOSTリクエストが返ってくることを確認します。
こちらを参考にJSONデータをPOSTリクエスト。

.http

POST  http://localhost:3000 HTTP/1.1
content-type: application/json

{
    "name": "Anya Forger",
    "age": "6"
}

Response

HTTP/1.1 200 OK
X-Powered-By: Express
Content-Type: application/json; charset=utf-8
Content-Length: 65
Connection: close

{
  "msg": "These messages are JSON",
  "name": "Anya Forger",
  "data": "6"
}

最初 REST Client で投げるデータでエラーを出しました。
ちょっとしたハマりどころかもしれないのですが、どうやらcontent-type: application/jsonの後に改行を挟まないといけないらしい。
データの中身とヘッダ部は改行で分けろ、ってことなんですね。

Herokuにデプロイ＆実行

コミットしてローカルリポジトリにプッシュしてからgit push heroku [ブランチ名]を実行。
そしてheroku open

正常に動いていることを確認できました。

続いてこのheroku openで開いたアドレスに対して、REST ClientからJSONデータをPOSTします。

.http

POST https://[ほにゃらら(アプリ名)].herokuapp.com HTTP/1.1
content-type: application/json

{
    "name": "Anya Forger",
    "age": "6"
}

Response

HTTP/1.1 200 OK
Connection: close
X-Powered-By: Express
Content-Type: application/json; charset=utf-8
Content-Length: 65

{
  "msg": "These messages are JSON",
  "name": "Anya Forger",
  "data": "6"
}

成功です！
JSONデータをPOSTして、返ってきたデータもJSONデータになっています。
SPY FAMILYは放映終了したら一気見したい。

まとめ

エラーが出てきたところといえばPOSTする時にREST Clientの書き方を間違えた部分くらい。
あと、本文には書きませんでしたがapp.postの中にres.sendとres.jsonを一緒に書いてres.json側が出力されなかったりといった凡ミスがありました。

次はJSONデータをDBに格納する/読み出すとかやりたいところ。