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です。
ドキュメント
Just a moment...
www.npmjs.com
Project Configuration
Learn how to configure your Vercel projects using vercel.json, vercel.ts, or the dashboard to control builds, routing, f...
vercel.com
Just a moment...
ivo-culic.medium.com
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES20xx),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント