πŸ–₯FrontEnd/ν”„λ‘ νŠΈμ—”λ“œ

TIL) 효율적인 개발 ν”„λ‘œμ„ΈμŠ€ CI/CD, CI/CDλ₯Ό μœ„ν•œ λ‹€μ–‘ν•œ Tools

hellohailie 2022. 8. 8. 13:52
λ°˜μ‘ν˜•

 

►배포 μžλ™ν™” νŒŒμ΄ν”„λΌμΈ : μ†ŒμŠ€ μ½”λ“œμ˜ 관리뢀터 μ‹€μ œ μ„œλΉ„μŠ€λ‘œμ˜ 배포 과정을 μ—°κ²°ν•˜λŠ” ꡬ쑰.

 

1. Source 단계 : 원격 μ €μž₯μ†Œμ— κ΄€λ¦¬λ˜κ³  μžˆλŠ” μ†ŒμŠ€ μ½”λ“œμ— λ³€κ²½ 사항이 일어날 경우, 이λ₯Ό κ°μ§€ν•˜κ³  λ‹€μŒ λ‹¨κ³„λ‘œ μ „λ‹¬ν•˜λŠ” μž‘μ—…μ„ μˆ˜ν–‰

2. Build 단계 : Source λ‹¨κ³„μ—μ„œ 전달받은 μ½”λ“œλ₯Ό 컴파일, λΉŒλ“œ, ν…ŒμŠ€νŠΈν•˜μ—¬ κ°€κ³΅ν•œλ‹€. 이 단계λ₯Ό 거쳐 μƒμ„±λœ 결과물을 λ‹€μŒ λ‹¨κ³„λ‘œ μ „λ‹¬ν•˜λŠ” μž‘μ—…μ„ μˆ˜ν–‰ν•œλ‹€. 

3. Deploy 단계 : Build λ‹¨κ³„λ‘œλΆ€ν„° 전달받은 결과물을  μ‹€μ œ μ„œλΉ„μŠ€μ— λ°˜μ˜ν•˜λŠ” μž‘μ—…μ„ μˆ˜ν–‰ν•œλ‹€. 

 


β–ΊCI/CD νŒŒμ΄ν”„λΌμΈ

βœ”οΈ 지속적 톡합 (CI : continuous integration)

νŒ€ ꡬ성원이 각자의 μž‘μ—…μ„ 자주 ν†΅ν•©ν•˜λŠ” μ†Œν”„νŠΈμ›¨μ–΄ 개발 방식.

Code : κ°œλ°œμžκ°€ μ½”λ“œλ₯Ό μ½”λ“œ μ €μž₯μ†Œμ— push & merge / λͺ¨λ“  κ°œλ°œνŒ€μ΄ μ½”λ“œ λ³€ν™” 확인가λŠ₯(투λͺ…함)

Build : μ½”λ“œ μ €μž₯μ†Œλ‘œλΆ€ν„° μ½”λ“œλ₯Ό κ°€μ Έμ™€μ„œ (μœ λ‹› ν…ŒμŠ€νŠΈ ν›„) build

Test : μ½”λ“œ λΉŒλ“œμ˜ 결과물이 λ‹€λ₯Έ μ»΄ν¬λ„ŒνŠΈμ™€ 잘 ν†΅ν•©λ˜λŠ”μ§€ 확인

 

** λΉŒλ“œλŠ” 개발자만 읽을 수 μžˆλŠ” μ†ŒμŠ€ μ½”λ“œλ₯Ό μ‹€ν–‰κ°€λŠ₯ν•œ μ½”λ“œ 및 ν”„λ‘œκ·Έλž¨μœΌλ‘œ λ³€ν™˜ν•˜λŠ” 과정이닀. 

λ²ˆλ“€λ§λ„ λΈŒλΌμš°μ €κ°€ μ†ŒμŠ€μ½”λ“œλ₯Ό 더 잘 읽을 수 있게 도와주기 λ•Œλ¬Έμ—, λΉŒλ“œ κ³Όμ • 쀑 ν•˜λ‚˜λ‘œ λ³Ό 수 μžˆλ‹€. (λΉŒλ“œλΌκ³  ν†΅μš©λ˜κΈ°λ„ 함.)

 

μž₯점

1. 개발 생산성 ν–₯상 = 주기적으둜 mergeλ₯Ό ν•˜κΈ° λ•Œλ¬Έμ— merge μΆ©λŒμ„ ν”Όν•  수 μžˆλ‹€. 

2. λ¬Έμ œμ μ„ λΉ λ₯΄κ²Œ 발견 = mergeλ˜λŠ” λͺ¨λ“  μ½”λ“œλ“€μ€ μžλ™μœΌλ‘œ build되고, test 되기 λ•Œλ¬Έμ— μ½”λ“œμ˜ κ²°ν•¨μ΄λ‚˜ λ¬Έμ œμ μ„ λΉ λ₯΄κ²Œ μ•Œ 수 μžˆλ‹€. 

3. 2μ—μ„œ 발견된 문제점 λΉ λ₯΄κ²Œ μˆ˜μ • κ°€λŠ₯ = 주기적으둜 mergeλ₯Ό ν•˜κΈ° λ•Œλ¬Έμ—, μ½”λ“œμ˜ λ³€κ²½ 사항이 μž‘κΈ° λ•Œλ¬Έμ— 문제λ₯Ό μˆ˜μ •ν•  λ•Œλ„ μž‘μ€ λ‹¨μœ„μ˜ λ¬Έμ œμ μ„ 확인 κ°€λŠ₯ν•΄μ„œ 버그λ₯Ό λΉ λ₯΄κ²Œ μˆ˜μ •ν•  수 μžˆλ‹€. 

4. μ½”λ“œμ˜ 퀄리티 ν–₯상 = CIλ₯Ό 잘 μš΄μ˜ν•˜κΈ° μœ„ν•΄μ„œ unit testλ₯Ό 포함해야 ν•˜κΈ° λ•Œλ¬Έμ΄λ‹€. 

 

βœ”οΈ 지속적 배포 (CD : continuous delivery / deployment)

지속적 톡합 과정이 μ›ν™œν•˜κ²Œ λλ‚˜λ©΄ λ°”λ‘œ κ³ κ°μ—κ²Œ λ°°ν¬ν•˜λŠ” 것.

Release : λΉŒλ“œκΉŒμ§€ λͺ¨λ‘ μ€€λΉ„λ˜μ—ˆκ³ , μ–΄λ–€ κΈ°λŠ₯이 κ°œλ°œλ˜μ—ˆλŠ”μ§€ λΉ„μ¦ˆλ‹ˆμŠ€ κ΄€κ³„μžλ“€κ³Ό 이야기λ₯Ό λ‚˜λˆ„λŠ” 단계.

μ–΄λ–€ κΈ°λŠ₯을 넣을지, ν•΄λ‹Ή λ¦΄λ¦¬μ¦ˆλŠ” 배포λ₯Ό ν• μ§€ 말지 κ²°μ •ν•˜λŠ” λ‹¨κ³„λ‘œ μ—¬λŸ¬ μ˜μ‚¬κ²°μ •μ΄ 이루어진닀. 

Deploy : 배포

Operation : 배포된 μ†Œν”„νŠΈμ›¨μ–΄λ₯Ό μ‹€μ œ μš΄μš©ν•˜λŠ” κ³Όμ •. 고객의 ν”Όλ“œλ°±μ„ μΆ©λΆ„νžˆ λ°›μ•„ κΈ°νšμ— λ°˜μ˜ν•œλ‹€. 

 

μš”μ¦˜μ—λŠ” 버전 릴리즈λ₯Ό 잘 기둝해두고 λ°”λ‘œλ°”λ‘œ λ°°ν¬ν•˜λŠ” 사둀가 μ¦κ°€ν•˜κ³  μžˆλ‹€. 


β–Ίκ²°λ‘ 

더 자주 μ½”λ“œλ₯Ό ν•©μΉ˜κ³ , 더 자주 결과물을 ν™•μΈν•˜μž, 더 자주 κ³ κ°μ—κ²Œ λ³΄μ—¬μ£Όμž!

=> μœ„μ˜ ν”„λ‘œμ„ΈμŠ€λ₯Ό μžλ™ν™”ν•΄μ•Όν•œλ‹€. 

hello world라도 있으면 main branch에 pull request에 merge ν•  λ•Œλ§ˆλ‹€ λ°°ν¬ν•˜λŠ”κ±Έ μΆ”μ²œν•¨.


β–ΊCI/CDλ₯Ό μœ„ν•œ λ‹€μ–‘ν•œ Tools!

 

Buildkite

GitHub Actions

GitLab CI/CD

Bitbucket Pipelines

circleci

Vercel

Netlify

 

 

πŸ˜ƒ 잘λͺ»λœ κ°œλ… 전달이 μžˆλ‹€λ©΄ λŒ“κΈ€ λΆ€νƒλ“œλ¦½λ‹ˆλ‹€. μ €μ˜ μ„±μž₯에 큰 도움이 λ©λ‹ˆλ‹€πŸ€“

λ°˜μ‘ν˜•