CodeSandboxでJSON Serverを使うには？

Reactの勉強中です。
テキスト内にjsonを（URLを利用したエンドポイントとして）利用するサンプルソースが載っていますが、どのようにエンドポイントを作成するかが省かれています。
調べてみたところ、以下のサイトに立ち当たりました。
https://nakanishi-s.jp/react-x-db/
しかし、これを動かしても、jsonの中身が表示されませんでした。
CodeSandboxでは出来ないのでしょうか？

以下、私が行った手順です。
1.CodeSandboxでプロジェクトを作成。
作成時、「react type」で検索し、officialマークのあるreact Typescriptを選択。
2.terminalを選択
選択すると、cloudにするか？と聞かれる。断れない雰囲気なので、yes coveertをクリックします。
3.しばらく待ちます

ここから、上記URLの内容に沿った設定をして行きます。

4.右上の＋マークからNewTerminalを選択
5.npm install json-server --dev　を実行

CodeSandbox
1➜  workspace git:(master) ✗ npm install json-server --dev
2npm WARN config dev Please use --include=dev instead.
3
4added 57 packages, changed 1 package, and audited 1291 packages in 10s
5
6241 packages are looking for funding
7  run `npm fund` for details
8
96 high severity vulnerabilities
10
11To address all issues (including breaking changes), run:
12  npm audit fix --force
13
14Run `npm audit` for details.
15npm notice 
16npm notice New major version of npm available! 8.15.0 -> 9.6.2
17npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.6.2
18npm notice Run npm install -g npm@9.6.2 to update!
19npm notice

6.db.jsonはデフォルトのままにしておきます。

db.json
1{
2  "posts": [
3    {
4      "id": 1,
5      "title": "json-server",
6      "author": "typicode"
7    }
8  ],
9  "comments": [
10    {
11      "id": 1,
12      "body": "some comment",
13      "postId": 1
14    }
15  ],
16  "profile": {
17    "name": "typicode"
18  }
19}

7.npx json-server --watch db.json --port 3100　を実行

CodeSandbox
1➜  workspace git:(master) ✗ npx json-server --watch db.json --port 3100
2
3  \{^_^}/ hi!
4
5  Loading db.json
6  Oops, db.json doesn't seem to exist
7  Creating db.json with some default data
8
9  Done
10
11  Resources
12  http://localhost:3100/posts
13  http://localhost:3100/comments
14  http://localhost:3100/profile
15
16  Home
17  http://localhost:3100
18
19  Type s + enter at any time to create a snapshot of the database
20  Watching...
21
22

8.URLを開くけど、何も表示されません・・・。

URL
1http://localhost:3100/posts

CodeSanboxでは使えないのでしょうか？
また、仮に使えない場合、CodeSandboxからエンドポイントとしてjsonを扱えるサービスがあるのでしょうか？
取り止めもない質問ですいません。

追記1）
3100ポートなので、
https://***ouz-3100.csb.app:3100/
でアクセスしてみましたが、ローディングしたままです。

goola

2023/03/21 02:11

とりあえず、 https://my-json-server.typicode.com/ ここで、jsonのエンドポイントは作れるみたいです。 CodeSnadboxをご存知の方はお教えいただけますか？

hoshi-takanori

2023/03/21 05:59

ブラウザからアクセスする場合、localhost じゃなくて CodeSandbox のホスト名を指定する必要があるかと…。

goola

2023/03/21 06:24 編集

最後の追記1）に記載してます。あと、 https://***yef-3000.csb.app:3100/posts という風に、json内の階層をURLに入れてもローディングが止まらないです。ちなみに、「このサイトにアクセスできません」となります。この時点でソースの表示をすると、これもローディングが止まりません。

goola

2023/03/21 06:30

json-serverを起動すると、 Resources http://localhost:3100/posts http://localhost:3100/comments http://localhost:3100/profile とdb.jsonの中身が表示されているので、起動はうまくいってそうです。そのまま、どれかひとつにアクセスすると、 502 It looks like the dev server has not been started yet. Start from the editor ↗ と表示されます。 Start from the editor がリンクなのでクリックすると、 Whoops, page not found. となります。なので、クラウド開発環境では使えないよ。ということかなぁ？と思いますが、いかがでしょうか？

hoshi-takanori

2023/03/21 08:37

localhost というのは「そのマシン自体」という意味で、自分の PC で JSON server を動かす場合はそれでいけますが、クラウド上で動かして PC のブラウザからアクセスする場合には使えません。JSON server が動いてるクラウドサーバーのホスト名を指定する必要があるはず。

goola

2023/03/21 22:54

クラウド上の開発環境自体にjson-serverを入れれば、同じ環境なのでlocalhostで間違っていないはずです。それに、先にも申し上げましたが、クラウド上のURLでアクセスしてもうまくはいきませんでした。

回答1件

自己解決