[POB#33]Assignment 9:FayWork社の課題.json-serverによる一時サーバの実装

11773 ワード
wanted Pre-Onboarding TIL JSON Server heroku テキストリンク
Assignment 9:顔の技術的な難題をまとめた文章です.

json-serverによる一時サーバの実装

Redux-Sagaを使用して実際のネットワーク通信を行うために、json-serverを使用して一時サーバを実現しました.

インストールと使用


  • インストール:yarn add json-server

  • 使用するjsonファイルの生成:jsonファイルを生成し、初期データを生成します.
    //src 밑에 data.json 생성
{
  "todos": []
}

  • サーバーの実行:json-server ./data.json --port 4000portを指定してサーバを実行することで、localhost:${port 번호}にアクセスできます.

  • postmanとしてテスト
    postmanを使用して予測試験を行うことができます.GET要求localhost:4000/todosにより、初期データを表示することができる.POST要求はBody作成を読み込むことができる.プロジェクトのdata.jsonも変更されます.

    • REST APIの提供

    json-serverは、REST APIサーバのすべての基本機能を有する.
    GET、POST、DELETE、PATCH、およびPUTを含む様々なAPIが提供される.
    // 예시
// BASE_URL : localhost:4000
// END_POINT: todos
const client = axios.create();
client.defaults.baseURL = BASE_URL;

export const getTodosData = () => client.get(`/${END_POINT}`);

export const createTodoData = ({ content, isCheck, createAt }: ITodo) =>
  client.post(`/${END_POINT}`, { content, isCheck, createAt });

export const deleteTodoData = (id: number) =>
  client.delete(`/${END_POINT}/${id}`);

export const completeCheckTodoData = ({ id, isCheck }: ITodo) =>
  client.patch(`/${END_POINT}/${id}`, { isCheck });

    配置


    herokuを使用してjson-serverと一緒に配布します.

    サーバの設定


    ルートフォルダの下にあるserver.tsにサーバ設定コードを作成します.
    ポート値を直接入力するのではなく、heroku内部のポートを設定する必要があります.( process.env.PORT )
    const jsonServer = require("json-server");
const server = jsonServer.create();
const router = jsonServer.router("./data.json");
const middlewares = jsonServer.defaults({
  static: "./build",
});
const port = process.env.PORT || 4000;

server.use(middlewares);
server.use(
  jsonServer.rewriter({
    "/api/*": "/$1",
  })
);

server.use(router);

server.listen(port, () => {
  console.log("server is running");
});

    package.jsonの変更

    package.jsonのscriptsを変更します.
    heakuデフォルトコマンドstartで設定したサーバ実行コードを作成します.
    既存のstartをstart:devに変更します.
    heroku-portbuildを使用して、導入前の構築手順を行います.
      "scripts": {
    "start": "node server.ts",
    "start:dev": "react-scripts start",
    "build": "react-scripts build",
    "heroku-postbuild": "npm run build"
  },

    BASE URLの変更

    localhost:4000としてBASE URLをローカル環境で使用しています.配置するときは、herokuアドレスに変更してください.
    export const BASE_URL = `https://my-app.herokuapp.com/`;
    JSアルゴリズムjavascript Sorting-基本編
    IOS開発日記1-プロジェクトで複数のtargetおよびpodfileファイル構成を構成