Posted on

Q. ν”„λ‘ νŠΈμ—”λ“œ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ€ μ–΄λ–»κ²Œ 배포λ₯Ό ν•΄μ•Όν• κΉŒ?

μ˜€λž˜μ „λΆ€ν„° κΈ°λ³Έμ μœΌλ‘œλŠ” λ°±μ—”λ“œ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ—μ„œ ν”„λ‘ νŠΈ UI ꡬ성을 μœ„ν•œ 에셋듀을 κ΄€λ¦¬ν•˜κ³  ν•¨κ»˜ λΉŒλ“œλ˜μ–΄ λ°°ν¬λ˜λŠ” 방식을 μ·¨ν•΄μ™”λ‹€. κ·ΈλŸ¬λ‚˜, λ°±μ—”λ“œ κ°œλ°œμžμ™€ ν”„λ‘ νŠΈμ—”λ“œ 개발자둜 λ‚˜λˆ„μ–΄μ§€λ”λ‹ˆ ν•˜λ‚˜μ˜ μ„œλΉ„μŠ€λ₯Ό κ΅¬μ„±ν•˜λŠ” ν”„λ‘ νŠΈμ—”λ“œ μ• ν”Œλ¦¬μΌ€μ΄μ…˜κ³Ό λ°±μ—”λ“œ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ΄ λ‚˜λˆ„μ–΄μ§€κ³  각 μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ κ°œλ°œν•  수 μžˆλŠ” ν™˜κ²½μ΄ λ§Œλ“€μ–΄μ§€κ³  μžˆλ‹€. 보톡 λ°±μ—”λ“œ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ λΉŒλ“œν•˜λ©΄μ„œ UI 에셋 νŒŒμΌλ“€μ„ ν¬ν•¨ν•˜λ―€λ‘œ 배포 과정은 λ°±μ—”λ“œ κ°œλ°œμžκ°€ λ‹΄λ‹Ήν–ˆλ˜ 쑰직이 λ§Žμ•˜μ„ 것 κ°™λ‹€.

λ§Œμ•½, 쑰직 κ΅¬μ„±μœΌλ‘œ 인해 ν”„λ‘ νŠΈμ—”λ“œ μ• ν”Œλ¦¬μΌ€μ΄μ…˜ κ°œλ°œμ„ μœ„ν•œ ν”„λ‘ νŠΈμ—”λ“œ νŒ€μ΄ μžˆλŠ” 곳이라면 ν”„λ‘ νŠΈμ—”λ“œ κ°œλ°œμžκ°€ 배포λ₯Ό 직접 μˆ˜ν–‰ν•  μˆ˜λ„ μžˆμ–΄λ³΄μΈλ‹€. νšŒμ‚¬λ§ˆλ‹€ μΌν•˜λŠ” 방식은 λ‹€λ₯Ό 수 있기 λ•Œλ¬Έμ— λ¦΄λ¦¬μ¦ˆμ— λŒ€ν•œ 뢀뢄은 QA μ—”μ§€λ‹ˆμ–΄κ°€ λ‹΄λ‹Ήν•˜κΈ°λ„ ν•œλ‹€. μ•„λ¬΄νŠΌ Vite 기반 ν”„λ‘œμ νŠΈλ₯Ό λ°°ν¬ν•˜λŠ” λ°©μ•ˆμ— λŒ€ν•΄μ„œ μ •λ¦¬ν•΄λ³΄μž.

Deploying a Static Site
It is important to note that vite preview is intended for previewing the build locally and not meant as a production server.

둜컬 ν™˜κ²½μ—μ„œ 정적 νŽ˜μ΄μ§€λ₯Ό 배포할 수 μžˆλŠ” μ›Ή μ„œλ²„λ₯Ό μ‹€ν–‰ν•˜λŠ” preview λͺ…λ Ήμ–΄λ₯Ό μ œκ³΅ν•˜μ§€λ§Œ μœ„μ™€ 같이 ν”„λ‘œλ•μ…˜ ν™˜κ²½μ„ μœ„ν•œ 배포 μ„œλ²„λŠ” μ•„λ‹˜μ— μ£Όμ˜ν•΄μ•Όν•œλ‹€. 기본적인 κ°œλ…μ€ 정적 배포λ₯Ό μœ„ν•œ λΉŒλ“œ νŒŒμΌμ„ λ§Œλ“€κ³ λ‚˜μ„œ λ°±μ—”λ“œ μ„œλ²„ λ˜λŠ” μ›Ή μ„œλ²„λ₯Ό 톡해 정적 νŒŒμΌμ— λŒ€ν•œ 응닡을 μ²˜λ¦¬ν•˜λŠ” 것이닀.

λ‘λ²ˆμ§Έ 방식은 일반적으둜 많이 μ‚¬μš©λ˜λŠ” 편으둜 λ°±μ—”λ“œ μ„œλ²„κ°€ μŠ€ν”„λ§ λΆ€νŠΈ ν”„λ‘œμ νŠΈλΌλ©΄ 정적 λ¦¬μ†ŒμŠ€ κ²½λ‘œμ— 포함될 수 μžˆλ„λ‘ ν•˜λ©΄ λœλ‹€. λ°±μ—”λ“œ μ• ν”Œλ¦¬μΌ€μ΄μ…˜ λΉŒλ“œ μ‹œ ν΄λž˜μŠ€νŒ¨μŠ€μ— ν¬ν•¨λ˜μ–΄λ„ 되고 μ• ν”Œλ¦¬μΌ€μ΄μ…˜ ν”„λ‘œνΌν‹°λ₯Ό 톡해 νŠΉμ • 파일 경둜λ₯Ό 지정해도 λœλ‹€. λ³Έ κΈ€μ—μ„œ μ •λ¦¬ν•˜κ³ μž ν•˜λŠ” 건 첫번째 λ°©μ‹μœΌλ‘œ ν”„λ‘œλ•μ…˜ 배포λ₯Ό μœ„ν•œ 정적 νŒŒμΌμ„ λΉŒλ“œν•˜κ³ λ‚˜μ„œ Nginx와 같은 μ›Ήμ„œλ²„λ₯Ό 톡해 정적 νŒŒμΌμ„ λ°°ν¬ν•˜λŠ” 것이닀.

Nginx μ›Ήμ„œλ²„μ—μ„œ 정적 νŒŒμΌμ„ λ°°ν¬ν•˜κ³  λ°±μ—”λ“œ API μš”μ²­μ— λŒ€ν•΄μ„œλŠ” λ¦¬λ²„μŠ€ ν”„λ‘μ‹œ ꡬ성을 ν•˜λ©΄ λœλ‹€. λ¦¬λ²„μŠ€ ν”„λ‘μ‹œ κ΅¬μ„±μ˜ μž₯점은 λ°±μ—”λ“œ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ 포트λ₯Ό 감좜 수 있게 λ˜μ–΄ μ‘°κΈˆμ€ λ³΄μ•ˆμ μΈ 인프라 ꡬ성이 될 수 μžˆλ‹€λŠ” 것이닀. 참고둜 Vite 개발 μ„œλ²„μ—μ„œλ„ ν”„λ‘μ‹œ ꡬ성을 ν•  수 있게 μ œκ³΅ν•œλ‹€.

Nginx μ›Ήμ„œλ²„λ‘œ Vite 정적 파일 배포

vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    manifest: true,
    target: "esnext",
  },
  plugins: [vue()],
});
Windows Terminal
$ yarn --cwd 'frontend' install
$ yarn --cwd 'frontend' run build --mode production
vite v4.4.11 building for production...

λΉŒλ“œ λͺ…λ Ήμ–΄λ₯Ό μˆ˜ν–‰ν•˜λ©΄ μ•„λž˜μ™€ 같이 dist 폴더 μ•„λž˜μ— 정적 νŒŒμΌλ“€μ΄ μƒμ„±λœλ‹€.

  • dist/assets : 정적 에셋 λͺ¨μŒ
  • dist/index.html : μ§„μž…μ (EntryPoint) 파일
  • manifest.json : λ§€λ‹ˆνŽ˜μŠ€νŠΈ 파일

μƒμ„±λœ 정적 λΉŒλ“œ νŒŒμΌλ“€μ„ nginx.conf 의 static ν΄λ”λ‘œ λŒ€μ²΄ν•˜μ—¬ ν…ŒμŠ€νŠΈλ₯Ό ν•΄λ³΄μž. μ œλŒ€λ‘œ λ™μž‘ν•˜μ§€ μ•Šμ„ν…λ° Nginx의 μ„€μ • 파일의 ꡬ성이 λ°±μ—”λ“œ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μœΌλ‘œ 기본적인 μš”μ²­μ„ μ „λ‹¬ν•˜λ„λ‘ λ˜μ–΄μžˆκΈ° λ•Œλ¬Έμ΄λ‹€. / κ²½λ‘œμ— λŒ€ν•΄μ„œλŠ” index.html을 μ‘λ‹΅ν•˜λ„λ‘ λ³€κ²½ν•΄μ•Όν•˜κ³  λ°±μ—”λ“œμ— λŒ€ν•œ μš”μ²­μ΄ λ‚˜μ€‘μ— μ „λ‹¬λ˜λ„λ‘ μˆ˜μ •ν•΄μ•Όν•œλ‹€.

nginx-vite.conf
server {
  index index.html;
  root /etc/nginx/static;
  try_files $uri /index.html =404;

  # λ¦¬λ²„μŠ€ ν”„λ‘μ‹œ
  location ~ ^/(api|version) {
      proxy_pass http://backend;
      proxy_redirect off;
      proxy_buffering off;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

      access_log /var/log/nginx/access.log;
  }
}

기본적인 μš”μ²­μ— λŒ€ν•΄μ„œλŠ” static 폴더 κΈ°μ€€μœΌλ‘œ 정적 νŒŒμΌμ„ μ‚¬μš©ν•΄ μ‘λ‹΅ν•˜λ©° /api 및 /version 에 λŒ€ν•΄μ„œλ§Œ λ°±μ—”λ“œ μ• ν”Œλ¦¬μΌ€μ΄μ…˜ μš”μ²­μœΌλ‘œ μ²˜λ¦¬λ˜λ„λ‘ μˆ˜μ •ν–ˆλ‹€. 이제 μ•„λž˜μ™€ 같이 데λͺ¨ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ΄ μ •μƒμ μœΌλ‘œ 보이며 /version에 λŒ€ν•œ μš”μ²­μ„ μ „λ‹¬ν•˜λ©΄ λ°±μ—”λ“œ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ—μ„œ ν•΄λ‹Ή κ²½λ‘œκ°€ λ§€ν•‘λ˜μ§€ μ•Šμ•„μ„œ μŠ€ν”„λ§ λΆ€νŠΈμ˜ ν™”μ΄νŠΈλΌλ²¨ νŽ˜μ΄μ§€λ‘œ 404 응닡을 λ³Ό 수 μžˆλ‹€. ν”„λ‘ νŠΈ μš”μ²­κ³Ό λ°±μ—”λ“œ μš”μ²­μ„ 효율적으둜 ꡬ뢄할 수 μžˆλŠ” λ°©μ•ˆμ€ 더 μ—°κ΅¬ν•˜κ³  찾아보고 ν•™μŠ΅ν•΄μ•Όν•  뢀뢄이닀.

사싀 상 λ°±μ—”λ“œ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ— ν”„λ‘ νŠΈμ—”λ“œμ— λŒ€ν•œ 정적 νŒŒμΌμ„ ν¬ν•¨μ‹œν‚€λŠ” 게 κ°„λ‹¨ν•˜μ§€λ§Œ 정적 νŒŒμΌμ„ λ°°ν¬ν•˜λŠ” κ²½λŸ‰μ˜ μ›Ή μ„œλ²„λ₯Ό λ‘λŠ” 게 λ°±μ—”λ“œ μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ λΆ€ν•˜λ₯Ό 쀄일 수 μžˆλŠ” λ°©μ•ˆμ΄λ‹€. 정적 νŒŒμΌμ— λŒ€ν•œ μš”μ²­μ„ μ²˜λ¦¬ν•˜κΈ° μœ„ν•΄μ„œ μŠ€λ ˆλ“œ ν’€μ—μ„œ μŠ€λ ˆλ“œλ₯Ό μ‚¬μš©ν•˜λŠ” 것은 생각보닀 영ν–₯이 클 μˆ˜λ„ μžˆλ‹€. 선택은 μ—¬λŸ¬λΆ„μ˜ λͺ«μ΄λ‹€.