導入netlify

19545 ワード
テキストリンク
次の内容が含まれます.
すべての内容が正解ではありません.

🏁 最初のAPI関連コードの作成


📕 ローカル作成手順

  • setupProxy.js(srcフォルダ)+インストールモジュール
    • を使用
  • setupProxy.js 
    • const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
  app.use(
    createProxyMiddleware('/api', {
      target: 'https://www.juso.go.kr',
      changeOrigin: true,
      pathRewrite: {
        '^/api': '',
      },
    }),
    createProxyMiddleware('/caredoc', {
      target: 'https://caredoc-fe-server.herokuapp.com',
      changeOrigin: true,
      pathRewrite: {
        '^/caredoc': '',
      },
    }),
  );
};
  • axios.js 
    • import axios from 'axios';

const getRepository = async (target, page) => {
  try {
    const response = await axios.get(
      `/api/addrlink/addrLinkApiJsonp.do?keyword=${target}&currentPage=${page}&countPerPage=5&resultType=JSON&confmKey=${process.env.REACT_APP_SERVICE_KEY}`,
    );
    const data = response.data;
    return data;
  } catch (error) {
    console.error(error);
  }
};

const getStaticData = async () => {
  try {
    const response = await axios.get(`/caredoc/static`);
    const data = response.data;
    return data;
  } catch (error) {
    console.error(error);
  }
};

const postRegisterData = async obj => {
  try {
    const response = await axios.post(`/caredoc/application`, obj);
    const data = response.data;
    return data;
  } catch (error) {
    console.error(error);
  }
};

export { getRepository, getStaticData, postRegisterData };
  • .env使用
  • 最外部に追加
    • REACT_APP_SERVICE_KEY=관련key정보

    📗 導入(netlify)

  • netlify.toml
    • の作成と追加
  • netlify.toml 
    • [[redirects]]
  from = "/api/*"
  to = "https://www.juso.go.kr/:splat"
  status = 200

[[redirects]]
  from = "/caredoc/*"
  to = "https://caredoc-fe-server.herokuapp.com/:splat"
  status = 200


[[redirects]]
  from = "/"
  to ="/index.html"
  status = 200
  • 環境変数鍵の追加

    • 試行すると、ローカルのAPIはよく動作しますが、アドレス関連のAPIを配備する際に、正しいAPI操作、すなわち検証鍵が正しくありません.

    🚩 localから変更


    📕 ローカル作成手順

  • axios.js 
    • import axios from 'axios';

const getRepository = async (target, page) => {
  const params = {
    keyword: target,
    currentPage: page,
    countPerPage: 5,
    confmKey: process.env.REACT_APP_SERVICE_KEY,
    resultType: 'json',
  };

  try {
    const response = await axios.get(`/api/addrlink/addrLinkApiJsonp.do`, {
      params,
    });
    const data = response.data;
    return data;
  } catch (error) {
    console.error(error);
  }
};

const getStaticData = async () => {
  try {
    const response = await axios.get(`/caredoc/static`);
    const data = response.data;
    return data;
  } catch (error) {
    console.error(error);
  }
};

const postRegisterData = async obj => {
  try {
    const response = await axios.post(`/caredoc/application`, obj);
    const data = response.data;
    return data;
  } catch (error) {
    console.error(error);
  }
};

export { getRepository, getStaticData, postRegisterData };
  • .env使用
  • 最外部に追加
    • REACT_APP_SERVICE_KEY=관련key정보

    📗 導入(netlify)

  • netlify.toml
    • の作成と追加
  • netlify.toml 
    • [[redirects]]
  from = "/api/*"
  to = "https://www.juso.go.kr/:splat"
  status = 200

[[redirects]]
  from = "/caredoc/*"
  to = "https://caredoc-fe-server.herokuapp.com/:splat"
  status = 200


[[redirects]]
  from = "/"
  to ="/index.html"
  status = 200

    必要なnetlifyデプロイメントで、アドレス検索APIが実行されていることがわかります.

    🏴 整理する


    📕 ローカルで作成


    setupProxyを使用して、http-proxy-middlewareを介してcorsでの発生を阻止します..envプライマリ・キーはファイルを介してgithubにアップロードされません.

    📗 デプロイメントから作成(netlify)


    netlify.Toml上でAPI接続を確立し、setupProxyと似ています.(CORSエラー防止)
    deployの環境変数に.envで作成した鍵を追加し、勝手にアクセスできないようにします.

    🏳 ソース


    くるみネギ
    Exchanger sample code
    フロントdaoインタフェースとProductsClassifyDaoの実装