pnpm build ๋ช
๋ น์ด๋ ํ๋ก์ ํธ๋ฅผ ํ๋ก๋์
ํ๊ฒฝ์ ๋ฐฐํฌํ ์ ์๋๋ก ์ต์ ํ๋ ์ฝ๋๋ก ๋น๋ํฉ๋๋ค. TypeScript๋ฅผ JavaScript๋ก ์ปดํ์ผํ๊ณ , ๋ถํ์ํ ์ฝ๋๋ฅผ ์ ๊ฑฐํ์ฌ ์คํ ์๋๋ฅผ ๋์
๋๋ค.
๊ธฐ๋ณธ ์ฌ์ฉ๋ฒ
dist ๋๋ ํ ๋ฆฌ์ ์ต์ ํ๋ JavaScript ํ์ผ์ด ์์ฑ๋ฉ๋๋ค.
ํ์ ๋ช ๋ น์ด
API์ Web์ ๋ถ๋ฆฌํด์ ๋น๋ํ ์ ์์ต๋๋ค.๋น๋ ๊ณผ์
๋น๋๋ ๋ค์ ๋จ๊ณ๋ก ์งํ๋ฉ๋๋ค:1. ๊ธฐ์กด ๋น๋ ๊ฒฐ๊ณผ๋ฌผ ์ ๊ฑฐ
์ด์ ๋น๋์ ์์ฌ ํ์ผ์ ๊นจ๋ํ๊ฒ ์ ๊ฑฐํฉ๋๋ค.dist/- API ๋น๋ ๊ฒฐ๊ณผ๋ฌผweb/dist/- Web ๋น๋ ๊ฒฐ๊ณผ๋ฌผweb-dist/- ๋ณต์ฌ๋ Web ๊ฒฐ๊ณผ๋ฌผ
2. API ๋น๋ ์ค์ ์ค๋น
API ๋น๋์ ์ฌ์ฉํ tsdown ์ค์ ํ์ผ์ ๊ฒฐ์ ํฉ๋๋ค.3. API ํ๋ก์ ํธ ๋น๋
TypeScript๋ฅผ JavaScript๋ก ์ปดํ์ผํฉ๋๋ค.1
๋น๋ ์์
๐ฆ API Server Building production-ready API /path/to/project2
์ปดํ์ผ ์คํ
bash tsc --noEmit && pnpm exec tsdown --config /path/to/tsdown.config.ts ๋น๋ ๋๊ตฌ:
tsdown + OXC/Rolldown3
์๋ฃ
โ build completed (2.5s) โ API build completed in 2.5s4. Web ํ๋ก์ ํธ ๋น๋ (์ ํ)
Web ํ๋ก์ ํธ๊ฐ ์๋ ๊ฒฝ์ฐ ๋น๋ํ๊ณ API ํ๋ก์ ํธ๋ก ๋ณต์ฌํฉ๋๋ค.1
๋น๋ ์์
๐ Web Application Building static web assets /path/to/project/web2
Vite ๋น๋
bash vite build ์ ์ ์์
์ ์ต์ ํํ๊ณ ๋ฒ๋ค๋งํฉ๋๋ค.3
ํ์ผ ๋ณต์ฌ
bash web/dist โ web-dist API ์๋ฒ์์ ์๋นํ ์ ์๋๋ก ๋ณต์ฌํฉ๋๋ค.4
์๋ฃ
โ build completed (8.2s) โ copy completed (0.1s) โ Web build completed in 8.3sweb/dist/- ์๋ณธ ๋น๋ ๊ฒฐ๊ณผweb-dist/- API ์๋ฒ์์ ์๋นํ ๋ณต์ฌ๋ณธ
๋น๋ ์ค์
API ๋น๋ ์ค์ ์ปค์คํฐ๋ง์ด์ง
ํ๋ก์ ํธ ๋ฃจํธ์tsdown.config.ts ํ์ผ์ ์์ฑํ์ฌ ๊ธฐ๋ณธ API ๋น๋๋ฅผ ์ค๋ฒ๋ผ์ด๋ํ ์ ์์ต๋๋ค.
tsdown.config.ts
๋น๋ ๊ฒฐ๊ณผ๋ฌผ
API ๋น๋ ๊ฒฐ๊ณผ
ํน์ง:- TypeScript โ JavaScript ๋ณํ
- ๋ฐ์ฝ๋ ์ดํฐ ๋ณํ ์๋ฃ
- ์์ค๋งต ํฌํจ (
.js.map) - Import ๊ฒฝ๋ก ํด์ ์๋ฃ
Web ๋น๋ ๊ฒฐ๊ณผ (์ ํ)
ํน์ง:- ์ฝ๋ ์์ถ (minification)
- ์์ ํด์ฑ (cache busting)
- Tree shaking (์ฌ์ฉํ์ง ์๋ ์ฝ๋ ์ ๊ฑฐ)
๋น๋ ์ต์ ํ
1. ํ์ ์ฒดํฌ ๋ถ๋ฆฌ
๋น๋ ์๋๋ฅผ ๋์ด๋ ค๋ฉด ํ์ ์ฒดํฌ๋ฅผ ๋ณ๋๋ก ์ํํ์ธ์.2. ์ฆ๋ถ ๋น๋
๋ณ๊ฒฝ๋ ํ์ผ๋ง ์ฌ๋น๋ํ๋ ค๋ฉด ๊ฐ๋ฐ ์๋ฒ๋ฅผ ์ฌ์ฉํ์ธ์.3. ์บ์ ํ์ฉ
tsdown์ ๋น๋ ๊ฐ ์์กด์ฑ ๋ถ์ ๊ฒฐ๊ณผ๋ฅผ ์ฌ์ฌ์ฉํฉ๋๋ค.๋ฌธ์ ํด๊ฒฐ
๋น๋ ์คํจ
๋ฌธ์ : TypeScript ์๋ฌ๋ก ๋น๋ ์คํจtsdown ์ค์ ์๋ฌ
๋ฌธ์ :tsdown.config.ts ์ค์ ์ค๋ฅ
Web ๋น๋ ์คํจ
๋ฌธ์ : Vite ๋น๋ ์๋ฌ๋น๋ ํ ์คํ
๋น๋๊ฐ ์๋ฃ๋๋ฉดstart ๋ช
๋ น์ด๋ก ํ๋ก๋์
์๋ฒ๋ฅผ ์คํํฉ๋๋ค.
- ๋น ๋ฅธ ์์: ์ปดํ์ผ์ด ์๋ฃ๋ JavaScript ์คํ
- ๋ฎ์ ๋ฉ๋ชจ๋ฆฌ: TypeScript ๋ณํ ์ค๋ฒํค๋ ์์
- ์์ค๋งต ์ง์: ์๋ฌ ๋ฐ์ ์ ์๋ณธ ํ์ผ ์์น ํ์
์ง์ ์คํ
pnpm start ๋์ Node.js๋ก ์ง์ ์คํํ ์๋ ์์ต๋๋ค:
--enable-source-maps: ์๋ฌ ๋ฐ์ ์ ์๋ณธ TypeScript ํ์ผ ์์น ํ์dist/index.js: ๋น๋๋ ์ํธ๋ฆฌํฌ์ธํธ
ํ๊ฒฝ ๋ณ์ ๋ก๋
ํ๊ฒฝ ๋ณ์๊ฐ ํ์ํ ๊ฒฝ์ฐ:CI/CD ์ค์
CI/CD ํ์ดํ๋ผ์ธ์ ๊ตฌ์ฑํ๋ฉด ์ฝ๋๋ฅผ ํธ์ํ ๋๋ง๋ค ์๋์ผ๋ก ๋น๋ํ๊ณ ๋ฐฐํฌํ ์ ์์ต๋๋ค. GitHub Actions, GitLab CI, Jenkins ๋ฑ ๋ค์ํ ๋๊ตฌ๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค.์ CI/CD๊ฐ ํ์ํ๊ฐ?
GitHub Actions
GitHub Actions๋ GitHub์ ํตํฉ๋ CI/CD ํ๋ซํผ์ ๋๋ค..github/workflows/ ๋๋ ํ ๋ฆฌ์ YAML ํ์ผ์ ์์ฑํ์ฌ ์ํฌํ๋ก์ฐ๋ฅผ ์ ์ํฉ๋๋ค.
.github/workflows/deploy.yml
1
์ฝ๋ ์ฒดํฌ์์
actions/checkout@v3์ ์ฌ์ฉํ์ฌ ์ ์ฅ์ ์ฝ๋๋ฅผ ๊ฐ์ ธ์ต๋๋ค.2
pnpm ์ค์น
pnpm/action-setup@v2๋ก pnpm ํจํค์ง ๋งค๋์ ๋ฅผ ์ค์นํฉ๋๋ค.3
Node.js ์ค์
actions/setup-node@v3์ผ๋ก Node.js๋ฅผ ์ค์นํ๊ณ pnpm ์บ์๋ฅผ ํ์ฑํํฉ๋๋ค. ์บ์ ๋๋ถ์ ์์กด์ฑ ์ค์น๊ฐ
ํจ์ฌ ๋น ๋ฆ
๋๋ค.4
์์กด์ฑ ์ค์น
pnpm install๋ก ํ๋ก์ ํธ ์์กด์ฑ์ ์ค์นํฉ๋๋ค.5
๋น๋
pnpm build๋ก ํ๋ก๋์
๋น๋๋ฅผ ์ํํฉ๋๋ค.6
๋ฐฐํฌ
๋น๋ ๊ฒฐ๊ณผ๋ฌผ์ ์๋ฒ๋ก ์
๋ก๋ํฉ๋๋ค. rsync, scp, FTP ๋ฑ ๋ค์ํ ๋ฐฉ๋ฒ ์ฌ์ฉ ๊ฐ๋ฅ.
ํ ์คํธ ์ถ๊ฐ
๋ฐฐํฌ ์ ์ ํ ์คํธ๋ฅผ ์คํํ์ฌ ๋ฒ๊ทธ๋ฅผ ์กฐ๊ธฐ์ ๋ฐ๊ฒฌํ ์ ์์ต๋๋ค:.github/workflows/deploy.yml
ํ๊ฒฝ๋ณ ๋ฐฐํฌ
Staging๊ณผ Production ํ๊ฒฝ์ ๋ถ๋ฆฌํ ์ ์์ต๋๋ค:Docker
Docker๋ฅผ ์ฌ์ฉํ๋ฉด ์ผ๊ด๋ ์คํ ํ๊ฒฝ์ ๋ณด์ฅํ ์ ์์ต๋๋ค. ๊ฐ๋ฐ, ์คํ ์ด์ง, ํ๋ก๋์ ๋ชจ๋ ๊ฐ์ ํ๊ฒฝ์์ ์คํ๋ฉ๋๋ค.Dockerfile
Docker Compose
๋ฐ์ดํฐ๋ฒ ์ด์ค์ ํจ๊ป ์คํํ๋ ค๋ฉด Docker Compose๋ฅผ ์ฌ์ฉํฉ๋๋ค:docker-compose.yml
์ฑ๋ฅ ๋น๊ต
ํ๋ก๋์ ๋น๋๋ ๊ฐ๋ฐ ์๋ฒ๋ณด๋ค ํจ์ฌ ๋น ๋ฅด๊ณ ํจ์จ์ ์ ๋๋ค.
ํ๋ก๋์
์ด ๋น ๋ฅธ ์ด์ :
- ๋ฏธ๋ฆฌ ์ปดํ์ผ๋จ: TypeScript๋ฅผ ์ค์๊ฐ์ผ๋ก ๋ณํํ์ง ์์
- ์ฝ๋ ์ต์ ํ: ๋ถํ์ํ ์ฝ๋ ์ ๊ฑฐ, ์์ถ
- HMR ์ค๋ฒํค๋ ์์: ํ์ผ ๊ฐ์ ๋ฐ ์ฌ๋ก๋ฉ ๋น์ฉ ์์
- ํ๋ก๋์ ๋ชจ๋: Node.js์ ์์กด์ฑ๋ค์ด ์ต์ ํ ๋ชจ๋๋ก ์คํ
์ค์ ์ฑ๋ฅ ์ธก์
๊ฐ๋ฐ ์๋ฒ์ ํ๋ก๋์ ๋น๋์ ์ฑ๋ฅ์ ์ง์ ๋น๊ตํด๋ณด์ธ์:๋ค์ ๋จ๊ณ
start
๋น๋๋ ์๋ฒ ์คํํ๊ธฐ
dev
๊ฐ๋ฐ ์๋ฒ๋ก ๋์๊ฐ๊ธฐ