๐Ÿ“š .env ํŒŒ์ผ์ด๋ž€ ? + Google Api Key ์ˆจ๊ธฐ๊ธฐ

๋ฐ•์˜์€ยท2023๋…„ 3์›” 16์ผ
0

1. env๊ฐ€ ๋ญ๋ƒ!

  • ํ™˜๊ฒฝ ๋ณ€์ˆ˜ ํŒŒ์ผ
  • ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ์‹คํ–‰๋  ๋•Œ ๋„˜๊ธฐ๊ณ  ์‹ถ์€ ํŠน์ • ๊ฐ’์„ ๋‹ด๊ณ  ์žˆ๋Š” ๋ณ€์ˆ˜๊ฐ€ ๊ธฐ๋ก.
  • ๋ฏธ๋ฆฌ ์ •์˜๋œ ๊ฐ’์„ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ํ™œ์šฉํ•˜๊ณ  ์‹ถ์„ ๋•Œ ์ด .env ํŒŒ์ผ์„ ํ™œ์šฉ.
  • Api๋ฅผ ์‚ฌ์šฉํ•˜๊ฑฐ๋‚˜ ์ธ์ฆ ๊ด€๋ จ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•  ๋•Œ, key๋ฅผ ๋…ธ์ถœํ•˜์ง€ ์•Š๊ธฐ ์œ„ํ•ด ํ™˜๊ฒฝ ๋ณ€์ˆ˜ ํŒŒ์ผ์— key๋ฅผ ๋„ฃ์–ด์ฃผ๊ณ  ํ•„์š”ํ•  ๋•Œ ๊บผ๋‚ด์˜ฌ ์ˆ˜ ์žˆ์Œ.
    - ์›น,์•ฑ ๊ฐœ๋ฐœ์„ ํ•˜๋‹ค๋ณด๋ฉด ํฌํŠธ, DB๊ด€๋ จ ์ •๋ณด, API_KEY๋“ฑ.. ๊ฐœ๋ฐœ์ž ํ˜ผ์ž์„œ ๋˜๋Š” ํŒ€๋งŒ ์•Œ์•„์•ผ ํ•˜๋Š” ๊ฐ’ ์ฆ‰, git, ์˜คํ”ˆ์†Œ์Šค์— ์˜ฌ๋ฆฌ๋ฉด ์•ˆ๋˜๋Š” ๊ฐ’๋“ค์ด ์žˆ์Œ.
  • dotenv ํŒจํ‚ค์ง€ = ํ™˜๊ฒฝ๋ณ€์ˆ˜ ํŒŒ์ผ์„ ์™ธ๋ถ€์— ๋งŒ๋“ค์–ด URL,ํฌํŠธ, API_KEY๋“ฑ.. ์„ ์ €์žฅ์‹œ์ผœ ์†Œ์Šค์ฝ”๋“œ ๋‚ด์— ํ•˜๋“œ์ฝ”๋”ฉํ•˜์ง€ ์•Š๊ณ  ์‚ฌ์šฉ ํ•  ์ˆ˜ ์žˆ์Œ.
    - ํ™˜๊ฒฝ๋ณ€์ˆ˜๋ฅผ ์ •์˜ํ•˜์—ฌ ๋ณ€์ˆ˜๋กœ ๋ฐ›์•„์˜ค๋Š” ์ด์œ  : ๋ณด์•ˆ๊ณผ ์œ ์ง€๋ณด์ˆ˜์— ์šฉ์ด
  • .envํŒŒ์ผ์€ ํ”„๋กœ์ ํŠธ์˜ ์ตœ์ƒ์œ„ ๋ฃจํŠธ์— ์œ„์น˜ํ•œ๋‹ค.


2. .envํŒŒ์ผ ์‚ฌ์šฉ๋ฒ•

  • .env.{mode๋ช…}
  • .env.--- ํŒŒ์ผ์˜ ๋‚ด์šฉ์„ ์ˆ˜์ •ํ•˜๋ฉด npm ์œผ๋กœ ๋‹ค์‹œ ์‹œ์ž‘ํ•ด์•ผ๋จ.
  • process.env.REACT๏ผฟAPP๏ผฟ ๋Š” ์˜ˆ์•ฝ์–ด์ด๋ฏ€๋กœ, ๋‹ค๋ฅธ ์ด๋ฆ„์€ ์‚ฌ์šฉํ•˜๋ฉด React๊ฐ€ ์ธ์‹ํ•˜์ง€ ๋ชปํ•จ.

3. .env ํ™œ์šฉ ๋ชจ๋“ˆ - dotenv

  • nodeJS ์˜ ๋ชจ๋“ˆ๋กœ, npm ์„ ์‚ฌ์šฉํ•ด ์„ค์น˜ํ•˜๊ณ  ์‚ฌ์šฉ ํ•  ์ˆ˜ ์žˆ์Œ.
  • dotenv ๋ฅผ ์‚ฌ์šฉํ•ด ํ˜„์žฌ ๋””๋ ‰ํ† ๋ฆฌ์— ์œ„์น˜ํ•œ .env ํŒŒ์ผ๋กœ๋ถ€ํ„ฐ ํ™˜๊ฒฝ ๋ณ€์ˆ˜๋ฅผ ์ฝ์–ด๋ƒ„.
    npm install dotenv
  • require("dotenv").config();
    ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ์ž‘๋™๋  ๋•Œ ๊ฐ€์žฅ ๋จผ์ € ์‹คํ–‰๋˜๋Š” jsํŒŒ์ผ์˜ ์ตœ์ƒ๋‹จ์—์„œ config() ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœ ํ•˜๋ฉด .envํŒŒ์ผ์— ์ €์žฅ๋œ ํ™˜๊ฒฝ ๋ณ€์ˆ˜๋ฅผ process.env ๋ชจ๋“ˆ์„ ํ†ตํ•ด ๋ถˆ๋Ÿฌ์˜ฌ ์ˆ˜ ์žˆ๋‹ค.

4. ์‹คํ–‰ ํ™˜๊ฒฝ์— ๋”ฐ๋ฅธ .env๋ถ„๋ฆฌ๋ฐฉ๋ฒ•

  • .env : ๊ธฐ๋ณธ ์„ค์ • ํŒŒ์ผ

  • .env.local : .env ํŒŒ์ผ์„ ์˜ค๋ฒ„๋ผ์ด๋“œ(override)ํ•จ.
    ํ…Œ์ŠคํŠธ ํ™˜๊ฒฝ์„ ์ œ์™ธํ•˜๊ณ  ๋ชจ๋“  ํ™˜๊ฒฝ์—์„œ ์‚ฌ์šฉ.

  • .env.development, .env.test, .env.production : ๊ฐ ์‹คํ–‰ ํ™˜๊ฒฝ์— ๋”ฐ๋ผ ์‚ฌ์šฉ.

  • .env.development.local, .env.test.local, .env.production.local : ๊ฐ ์‹คํ–‰ ํ™˜๊ฒฝ์— ๋”ฐ๋ผ ์‚ฌ์šฉ๋˜๋Š” .env.{environment} ํŒŒ์ผ์„ ์˜ค๋ฒ„๋ผ์ด๋“œํ•œ๋‹ค.

  • gitignore์— ๋‹ค ์ ์šฉํ•˜์ž.


5. react-script ์‹คํ–‰์‹œ ์šฐ์„ ์ˆœ์œ„

  • npm start
    .env.development.local > .env.local > .env.development > .env
  • npm run build
    .env.production.local > .env.local > .env.production > .env
  • npm test
    .env.test.local > .env.test > .env


๐Ÿ‘‰ Google Api Key ์ˆจ๊ธฐ๊ธฐ

  1. .envํŒŒ์ผ์€ ํ”„๋กœ์ ํŠธ์˜ ์ตœ์ƒ์œ„ ๋ฃจํŠธ์— ์œ„์น˜ํ•˜๋„๋ก ํ•œ๋‹ค.
  2. gitignoreํŒŒ์ผ์— .env์ถ”๊ฐ€
  3. .envํŒŒ์ผ ์•ˆ์— ๋ฐ˜๋“œ์‹œ "REACT_APP_```์›ํ•˜๋Š”์ด๋ฆ„"์œผ๋กœ ์ด๋ฆ„์„ ์ง€์–ด์ฃผ๊ณ  KEY๋ฅผ ์ž‘์„ฑํ•œ๋‹ค.
    • ๐Ÿฅ๐Ÿฅ๐Ÿฅ REACT_APP_์œผ๋กœ ์‹œ์ž‘ํ•ด์•ผ react์—์„œ ์ธ์‹ํ•จ.
  4. html ํŒŒ์ผ์—์„œ๋Š” '%REACT_APP_์ด๋ฆ„%'์œผ๋กœ ์‚ฌ์šฉํ•˜๋ฉด ๋˜๊ณ , .js๋‚˜ .jsx์—์„œ๋Š” process.env.REACT_APP_์ด๋ฆ„์œผ๋กœ ์‚ฌ์šฉ

๐Ÿ‘‰ ์‚ฌ์šฉ ์˜ˆ์‹œ

// ๐Ÿ‘‰ react ์ผ ๋•Œ
// .env 
 REACT_APP_GOOGLE_API_KEY=Aa1Bb2Cc3Dd4Ee5Ff6Gg7Hh8Ii9Jj0
 NEXT_PUBLIC_GRAPHQL_PORTFOLIO_API_URL=https://pye-portfolio-api.co.kr/board/graphql


// component
import * as Apollo from '@apollo/client';
import { HttpLink } from '@apollo/client' ;   
		 // HttpLink : POST,  GET ์š”์ฒญ์„ ๋ชจ๋‘ ์ง€์›.
         // ์ž‘์—…๋ณ„๋กœ HTTP ์˜ต์…˜์„ ๊ตฌ์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค.
                  
const Link = new Apollo.HttpLink ( {  
	uri : process.env.NEXT_PUBLIC_GRAPHQL_PORTFOLIO_API_URL
 	//  + ์ถ”๊ฐ€ ์˜ต์…˜
} ) ;
        
const GoogleApiKey = new Apollo.HttpLink({
	uri : process.env.REACT_APP_GOOGLE_API_KEY
})  

const {data} = await axios.get(`${process.env.NEXT_PUBLIC_GRAPHQL_PORTFOLIO_API_URL}/todos`)
// ๐Ÿ‘‰ node.js์ผ ๋•Œ 
//.env
GOOGLE_API_KEY=Aa1Bb2Cc3Dd4Ee5Ff6Gg7Hh8Ii9Jj0
PORTFOLIO_API_URL=//pye-portfolio-api.co.kr/board/graphql

//callback.js
require('dotenv').config();
// ์ƒ๋‹จ์— dotenv๋ฅผ ๋ถˆ๋Ÿฌ์™€ config๋ฅผ ์‹คํ–‰ํ•ด์•ผ ํ™˜๊ฒฝ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

const GOOGLE_API_KEY = process.env.GOOGLE_API_KEY;
const PORTFOLIO_API_URL = process.env.PORTFOLIO_API_URL;
// ์ดํ›„์—๋Š” process.env๋กœ ๊บผ๋‚ด์“ธ ์ˆ˜ ์žˆ๋‹ค.```


์ฐธ๊ณ  : HttpLink + ์˜ต์…˜๋“ค : Apollo-Client Docs
์ฐธ๊ณ  : env๋ฅผ ์ด์šฉํ•œ ๋ณ€์ˆ˜์„ ์–ธ ๋ฐ ์‚ฌ์šฉ๋ฒ•
์ฐธ๊ณ  : ์‹คํ–‰ ํ™˜๊ฒฝ์— ๋”ฐ๋ฅธ env ๋ถ„๋ฆฌ ๋“ฑ
์ฐธ๊ณ 
์ฐธ๊ณ  : .envํŒŒ์ผ ๋งŒ๋“ค๊ธฐ
์ฐธ๊ณ  : .env ํŒŒ์ผ ๊ด€๋ฆฌ๋ถ€ํ„ฐ dotenv & DB๋ž‘ NodeJS ์—ฐ๊ฒฐํ•˜๊ธฐ
์ฐธ๊ณ  : envํŒŒ์ผ์— ๋Œ€ํ•˜์—ฌ

0๊ฐœ์˜ ๋Œ“๊ธ€