.ENV 설정하기 (feat. Vercel)

▶ api key를 숨기기 위한 용도 (소스코드에서 숨기기 - 보안용)

▶ FE에선 코드가 전부 노출이 되기 때문에 api  key를 숨기는 것은 BE 개발자에게 요청해야 한다.

 

파일명 : startProject.sh

- 쉘

-한꺼번에 설치하는 방법

- 현업에서 자주 쓰이지는 않음.

npm init -y // npm 초기화
npm i -D parcel vercel // parcel, vercel(서버리스 함수를 작동시키기 위함)을 개발의존성(devDependencies)로 설치
mkdir src // 폴더 만들기
touch src/main.js
touch index.html
// Window 사용자는 touch 대신 echo

1. root 경로에 vercel.json 파일을 생성한다.

// vercel.json
{
    "devCommand": "npm run dev",
    "buildCommand": "npm run build"
}

// package.json
// 추가
"scripts": {
    "vercel": "vercel dev"
}

터미널에 'sh startProject.sh'를 입력해 실행한다.

 

 

root경로에 api폴더 생성

- vercel이 해당 프로젝트 안에 'api'라는 이름을 가진 폴더를 알아서 찾는다.

root 파일 트리

 

 

api폴더 안에 사용할 api의 이름이 될 파일을 생성 (통신할 파일)

npm i node-fetch@2

// node.js(서버환경)에서 fetch함수를 사용할 수 없기 때문에 설치해 준다.
// * 최신 버전인 버전 3은 ES Module을 지원하지 않기 때문에 버전 2로 설치해준다.

 

 

• ./api/movie.js -> 통신할 파일

// 설치한 node-fetch를 가져온다.
// 예시
import fetch from 'node-fetch'

const { OMDB_API_KEY } = process.env

export default async function handler(request, response) {
  const { title } = JSON.parse(request.body)
  const res = await fetch(`https://omdbapi.com/?apikey=${OMDB_API_KEY}&s=${title}`)
  const json = await res.json()
  response.status(200).json(json)
}

 

• ./src/main.js

// 예시
async function getMovies(title) {
    const res = await fetch('/api/movie', {
        method: 'POST'
        body: JSON.stringify({
            title
        })
    })
    const json =  await res.json()
    console.log(json)
}

async function getTodos() {
    const res = await fetch()
}
getMovies('frozen')

 

 

 

.ENV 설치

npm i -D dotenv

 

 

 

root경로에 .env 파일 생성

- (선택) vscode 확장 프로그램 중, 'DotENV'를 설치하면 .env파일에서도 코드 하이라이팅이 된다.

API_KEY = <실제 API 키> // ex) API_KEY = ab4d654e

// api키가 노출되는 파일에 아래와 같이 상수를 지정하고 fetch에 실제 api key대신 'API_KEY'로 지정한다.
// const { API_KEY } = process.env  예시 -> "./api/movie.js" 파일

 

 

 

깃에 올리기 전, '.gitignore'에 .env파일을 추가하여 깃에서 .env파일을 숨긴다.

.parcel-cache
node_modules
dist
.vercel
.env

 

 

 

Netlify 배포

깃 레포에 올린 프로젝트를 Netlify로 가져온 다음,

- key에 .env에 설정해 놓은 변수명을, Value에는 apikey값을 넣고 'Deploy site' 버튼을 클릭한다.