json-serverでFake API(mock api)を作成してvercelにデプロイする – 【node.js】

json-serverでFake API(mock api)を作成してvercelにデプロイする – 【node.js】

json-serverでFake API(mock api)を作成してvercelにデプロイする – 【node.js】

json-serverをlocalで起動できますが、開発時にvercelにデプロイ出来たら便利かもしれません。

GitHubリポジトリ作成

パブリックなGitHubリポジトリ作成します。

C:\>git clone https://github.com/takahashi-h5/vercel-jsonserver.git

プロジェクト作成

プロジェクト作成します。

C:\>npm init -y
C:\>npm i json-server@0.17.4

json-serverをインストールしますが、vercelにデプロイする時に動作しなかったのでバージョンを0.17.4にダウングレードします。

db.jsonで/usersと/commentsを作成します。

db.json

{
    "users": [
        {
            "id": 1,
            "name": "takahashi",
            "age": 20
        },
        {
            "id": 2,
            "name": "yamada",
            "age": 30
        }
    ],
    "comments": [
        {
            "id": 1,
            "body": "some comment!"
        },
        {
            "id": 2,
            "body": "some comment!!"
        }
    ]
}

json-serverのserver.jsとvercel.jsonを作成してpushします。

C:\>git add .
C:\>git commit -m "commit"
C:\>git push origin main

場所はコチラです。

vercelとgithub連携

vercelのアカウント作成します。サインイン後、「Add New」－「Project」を選択します。

「import」を押します。

「Deploy」を押します。

「Congratulations!」みたいなメッセージが表示された画面が出たら「Continue to Dashboard」を押します。

「Visit」を押します。

これでlocalhostではないvercelを利用したサーバを立てることが出来ました。

curl

curlでテストします。

C:\>curl -X GET https://vercel-jsonserver.vercel.app/users
[
  {
    "id": 1,
    "name": "takahashi",
    "age": 20
  },
  {
    "id": 2,
    "name": "yamada",
    "age": 30
  }
]

OKです。