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です。

ドキュメント

json-server
> > Viewing alpha v1 documentation – usable but expect breaking changes. For stable version, see ( Latest version: 1.0.0...
Configuring Projects with vercel.json
Learn how to use vercel.json to configure and override the default behavior of Vercel from within your project.
Create RESTful API with JSON Server and deploy it to Vercel
Sometimes you need to create or mock up an API that you can play and test while developing your application. The data do...

コメント

タイトルとURLをコピーしました