μ΅œμ‹  λ·° CLI의 λΉŒλ“œ ν™˜κ²½ κ·œμΉ™

이번 μ±•ν„°μ—μ„œλŠ” λ·° CLI 버전 3 μ΄μƒμ—μ„œλ§Œ μ μš©λ˜λŠ” λͺ‡ 가지 λΉŒλ“œ ν™˜κ²½ κ·œμΉ™μ„ μ•Œμ•„λ³΄κ² μŠ΅λ‹ˆλ‹€.

μ• ν”Œλ¦¬μΌ€μ΄μ…˜ λͺ¨λ“œ

λ·° CLI 3μ—μ„œλŠ” λ‹€μŒκ³Ό 같이 크게 3가지 λͺ¨λ“œκ°€ μžˆμŠ΅λ‹ˆλ‹€.

  • development : ν”„λ‘œν† νƒ€μ΄ν•‘ 및 개발 μš©λ„. npm run serve λͺ…λ Ήμ–΄λ‘œ μ‹€ν–‰ν•  λ•Œμ˜ λͺ¨λ“œ
  • production : μƒμš©ν™” 및 배포 μš©λ„. npm run build λͺ…λ Ήμ–΄λ‘œ μ‹€ν–‰ν•  λ•Œμ˜ λͺ¨λ“œ
  • test : ν…ŒμŠ€νŠΈ μš©λ„. npm run test:unit λͺ…λ Ήμ–΄λ‘œ μ‹€ν–‰ν•  λ•Œμ˜ λͺ¨λ“œ

μœ„μ˜ λͺ¨λ“œλŠ” NODE_ENV λ³€μˆ˜ 값과도 연관이 μžˆμŠ΅λ‹ˆλ‹€. 개발 λͺ¨λ“œλ‘œ μ‹€ν–‰ν•œ κ²½μš°μ—λŠ” μžλ™μœΌλ‘œ NODE_ENV 값이 development둜 섀정이 되고, 배포 λͺ¨λ“œλ‘œ μ‹€ν–‰ν•œ κ²½μš°μ—λŠ” production으둜 μ„€μ •λ©λ‹ˆλ‹€.

μ• ν”Œλ¦¬μΌ€μ΄μ…˜ λͺ¨λ“œμ— 따라 λ·° CLIκ°€ ν•΄μ£ΌλŠ” 일?

λ·° CLI둜 μƒμ„±ν•˜μ—¬ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ μ œμž‘ν•˜κ²Œ 되면 기본적으둜 μ›ΉνŒ©μ„ μ‚¬μš©ν•©λ‹ˆλ‹€. λ”°λΌμ„œ, λͺ¨λ“œμ— 따라 μ›ΉνŒ©μ˜ 섀정이 λ‹¬λΌμ§‘λ‹ˆλ‹€. 예λ₯Ό λ“€λ©΄, 개발 λͺ¨λ“œμΌ λ•ŒλŠ” μ›ΉνŒ© 데브 μ„œλ²„λ₯Ό μ‹€ν–‰ν•˜κΈ° λ•Œλ¬Έμ— λΉ λ₯΄κ²Œ λΉŒλ“œ ν•˜λ©΄μ„œ ν”„λ‘œν† νƒ€μ΄ν•‘ ν•΄λ‚˜κ°ˆ 수 있고 μƒμš© λͺ¨λ“œμΌ λ•ŒλŠ” μ›ΉνŒ©μœΌλ‘œ λΉŒλ“œλœ 파일의 이름에 해쉬 값을 λΆ™μ—¬ 캐싱과 같은 이점을 λˆ„λ¦΄ 수 μžˆμŠ΅λ‹ˆλ‹€.

ν™˜κ²½ λ³€μˆ˜ 파일 κ·œμΉ™

λ·° CLI 3μ—μ„œλŠ” ν”„λ‘œμ νŠΈ 루트 폴더에 μ•„λž˜μ™€ 같은 κ·œμΉ™μœΌλ‘œ ν™˜κ²½ λ³€μˆ˜ νŒŒμΌμ„ 생성할 수 μžˆμŠ΅λ‹ˆλ‹€.

.env                # λͺ¨λ“  λͺ¨λ“œμ— μ μš©λ˜λŠ” ν™˜κ²½ λ³€μˆ˜ 파일
.env.local          # λͺ¨λ“  λͺ¨λ“œμ— μ μš©λ˜λ‚˜ 개인만 μ‚¬μš©ν•˜λŠ” 파일(git에 μ˜¬λΌκ°€μ§€ μ•ŠμŒ)
.env.[mode]         # νŠΉμ • λͺ¨λ“œμ— ν•΄λ‹Ήν•˜λŠ” ν™˜κ²½ λ³€μˆ˜ 파일
.env.[mode].local   # νŠΉμ • λͺ¨λ“œμ— ν•΄λ‹Ήν•˜μ§€λ§Œ 개인이 μ‚¬μš©ν•˜λŠ” 파일(git에 μ˜¬λΌκ°€μ§€ μ•ŠμŒ)

μ—¬κΈ°μ„œ λ§ν•˜λŠ” λͺ¨λ“œλŠ” μ•žμ—μ„œ μ‚΄νŽ΄λ΄€λ˜ μ• ν”Œλ¦¬μΌ€μ΄μ…˜ λͺ¨λ“œλ₯Ό μ˜λ―Έν•©λ‹ˆλ‹€. 예λ₯Ό λ“€μ–΄, μƒμš© 버전에 ν•΄λ‹Ήν•˜λŠ” ν™˜κ²½ λ³€μˆ˜ νŒŒμΌμ€ μ•„λž˜μ™€ κ°™μŠ΅λ‹ˆλ‹€.

.env.production

ν™˜κ²½ λ³€μˆ˜ 파일 적용 μˆœμ„œ

μ•„λž˜μ™€ 같이 개발 ν™˜κ²½μΈμ§€ 배포 ν™˜κ²½μΈμ§€μ— 따라 μ—¬λŸ¬ 개의 ν™˜κ²½ λ³€μˆ˜ νŒŒμΌμ„ 뢄리할 μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€.

  • .env
  • .env.development
  • .env.production
# .env
VUE_APP_URL=https://domain.com
# .env.development
VUE_APP_URL=https://localhost:8080
# .env.production
VUE_APP_URL=https://123.123.123.123:9090

μ΄λ•Œ 배포 λͺ¨λ“œμΈ npm run build λͺ…λ Ήμ–΄λ₯Ό μž…λ ₯ν•˜κ²Œ 되면 .env.production 파일의 λ‚΄μš©μ΄ κ°€μž₯ 높은 μš°μ„ μˆœμœ„λ₯Ό κ°–κ²Œ λ©λ‹ˆλ‹€. λ”°λΌμ„œ, μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ—μ„œ μ‚¬μš©ν•œ VUE_APP_URL 값은 μ•„λž˜μ™€ 같이 μ„€μ •λ©λ‹ˆλ‹€.

// main.js
console.log(VUE_APP_URL) // https://123.123.123.123:9090

μœ„μ²˜λŸΌ νŠΉμ • λͺ¨λ“œμ— ν•΄λ‹Ήν•˜λŠ” ν™˜κ²½ λ³€μˆ˜μ˜ 파일의 값이 κ°€μž₯ 높은 μš°μ„ μˆœμœ„λ₯Ό κ°–κ²Œ λ©λ‹ˆλ‹€.

λ§Œμ•½ .env.development, .env.production λ“±μ˜ 파일이 μ—†λ‹€λ©΄ .env νŒŒμΌμ— μ„€μ •ν•œ 값이 μ΅œμ’… 값이 λ©λ‹ˆλ‹€.

κ°œλ°œν•  λ•ŒλŠ” 둜컬 ν™˜κ²½ λ³€μˆ˜λ₯Ό μ‚¬μš©

μ•žμ˜ κ·œμΉ™λ“€μ„ μΈμ§€ν•œ μƒνƒœμ—μ„œ νŒ€ 곡용으둜 μ‚¬μš©ν•˜λŠ” ν™˜κ²½ λ³€μˆ˜ 이외에 개인적으둜 ν™˜κ²½ λ³€μˆ˜λ₯Ό μ„€μ •ν•˜μ—¬ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

.env.development # νŒ€ 곡용 ν™˜κ²½ λ³€μˆ˜
.env.development.local # 개인 디버깅 λ˜λŠ” 개발용 ν™˜κ²½ λ³€μˆ˜

νŒ€ 곡용으둜 μ‚¬μš©ν•˜λŠ” μ• ν”Œλ¦¬μΌ€μ΄μ…˜ μ„€μ • 값듀은 .env.development νŒŒμΌμ— κ΄€λ¦¬ν•˜κ³ , 개인적으둜 둜컬 λ˜λŠ” νŠΉμ • μ„œλ²„ 디버깅을 μœ„ν•΄ .env.development.local νŒŒμΌμ— κ΄€λ¦¬ν•˜λ©΄ μ’‹μŠ΅λ‹ˆλ‹€.

# .env.development
VUE_APP_URL=http://internal.server.address:8080
# .env.development.local
VUE_APP_URL=http://localhost:8081

μœ„μ™€ 같이 ν™œμš©ν•˜λŠ” 경우 .local νŒŒμΌμ€ git에도 μ˜¬λΌκ°€μ§€ μ•ŠκΈ° λ•Œλ¬Έμ— νŽΈν•˜κ²Œ API μ—”λ“œν¬μΈνŠΈ(URL)λ₯Ό λ°”κΏ”μ„œ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.