Netlify CD, Serverless Functions로 환경 변수 숨기기

API를 호출할 때 숨겨야 할 내용들이 존재한다.
이 내용들은 서버를 통해 숨겨야 하는데 Netlify에서는 간단하게 사용할 수 있는 서버리스 함수가 존재한다.

npm i -D netlify-cli

package.json의 scripts 작성

"scripts": {
    "dev:webpack": "webpack-dev-server --mode development",
    "dev": "netlify dev",
    "build": "webpack --mode production"
  },

netlify.toml 파일 생성 후 작성

[build]
    command = "npm run build"
    functions = "functions"
    publish = "dist"

[dev]
    framework = "#custom"
    command = "npm run dev:webpack"
    targetPort = 8079
    port = 8080
    publish = "dist"
    autoLaunch = false

루트 경로에 functions 폴더 생성 후 내부에 js 파일 생성
이 파일은 하나의 api 서버리스 함수로 작동
/.netlify/functions/파일명 으로 접근 가능

/.netlify/functions/파일명

서버에서는 fetch를 사용할 수 없음
따라서 axios를 사용해야 함

npm i axios

환경 변수들을 사용하여 key를 숨겨야 함
env 파일을 사용하기 위해 dotenv 설치

npm i -D dotenv

.env 파일에 key 등록

• 공백과 ""를 붙이지 않음

API_ENDPOINT=https://api주소/
API_KEY=키값

fetch 함수를 서버리스의 axios로 변경

• 첫번째 인자에 전달했던 url을 url 옵션에 할당
• body로 전달한 데이터를 event.body로 받아서 data 옵션에 할당

변경 전

// store/workspace.js

async function _request(options) {
    const { id = "" } = options;
    return await fetch(`api 주소`, {
        ...options,
        headers:{
            "Content-Type": "application/json",
            "x-username": "사용자 키"
        },    
    }).then(res => res.json());
}

변경 후

// store/workspace.js

async function _request(options) {
   return await fetch("/.netlify/functions/workspace", {
    method: "POST",
    body: JSON.stringify(options)
   }).then(res => res.json());
}

// function/workspace.js

require("dotenv").config(); // env 파일을 읽어서 process.env 라는 전역 변수로 넣어줌
const axios = require("axios");
const {API_ENDPOINT, API_KEY} = process.env;

exports.handler = async function (event) {
    const options = JSON.parse(event.body);
    const { id = "", method, body } = options;
    const { data } = await axios({
        url: `${API_ENDPOINT}${id}`,
        method,
        headers:{
            "Content-Type": "application/json",
            "x-username": API_KEY
        },
        data: body    
    });
    return {
        statusCode: 200,
        body: JSON.stringify(data)
    };
};

Guthub에 올라가지 않도록 .env 파일은 .gitignore 파일에 등록

배포 페이지에서 새로고침 할 때마다 404 에러가 발생할 때

이러한 경우 빌드 후 dist에 포함되게 지정한 static폴더 내부에 _redirects 파일을 생성 후 아래 내용을 작성하면 된다.

/* /index.html 200