ํ”ผ๋“œ๋กœ ๋Œ์•„๊ฐ€๊ธฐ
Day 53: CI/CD for React on AWS S3 & CloudFront (No Access Keys!) ๐Ÿš€
Dev.toDev.to
DevOps

Access Key ์—†๋Š” ์•ˆ์ „ํ•œ React ๋ฐฐํฌ, OIDC ๊ธฐ๋ฐ˜ CI/CD ํŒŒ์ดํ”„๋ผ์ธ ๊ตฌ์ถ•

Day 53: CI/CD for React on AWS S3 & CloudFront (No Access Keys!) ๐Ÿš€

Eric Rodrรญguez2026๋…„ 4์›” 9์ผ1๋ถ„intermediate

Context

AWS Console์„ ํ†ตํ•œ ์ˆ˜๋™ ํŒŒ์ผ ์—…๋กœ๋“œ ๋ฐฉ์‹์˜ ์šด์˜ ํšจ์œจ ์ €ํ•˜. GitHub Secrets์— ๊ณ ์ •๋œ Access Key๋ฅผ ์ €์žฅํ•˜๋Š” ๋ณด์•ˆ ์ทจ์•ฝ์  ์กด์žฌ.

Technical Solution

  • OIDC Identity Provider ์„ค์ •์„ ํ†ตํ•œ AWS IAM ์—ญํ•  ๊ธฐ๋ฐ˜์˜ ์ผ์‹œ์  ์ž๊ฒฉ ์ฆ๋ช… ํš๋“ ๋ฐฉ์‹
  • GitHub Actions ์›Œํฌํ”Œ๋กœ์šฐ ๋‚ด id-token ๊ถŒํ•œ ๋ถ€์—ฌ๋ฅผ ํ†ตํ•œ ๋ณด์•ˆ ๊ฐ•ํ™” ์„ค๊ณ„
  • aws s3 sync ๋ช…๋ น์–ด์˜ --delete ํ”Œ๋ž˜๊ทธ ํ™œ์šฉ์œผ๋กœ ์ด์ „ ๋นŒ๋“œ์˜ ์ž”์  ํŒŒ์ผ ์ œ๊ฑฐ ๋ฐ ์Šคํ† ๋ฆฌ์ง€ ์ตœ์ ํ™”
  • CloudFront Invalidation API ํ˜ธ์ถœ์„ ํ†ตํ•œ ์ „ ์„ธ๊ณ„ ์—ฃ์ง€ ๋กœ์ผ€์ด์…˜์˜ ์ตœ์‹  ์ฝ˜ํ…์ธ  ์ฆ‰์‹œ ๋ฐ˜์˜ ๊ตฌ์กฐ
  • React ๋นŒ๋“œ๋ถ€ํ„ฐ S3 ๋™๊ธฐํ™” ๋ฐ ์บ์‹œ ๋ฌดํšจํ™”๊นŒ์ง€ ์ด์–ด์ง€๋Š” ์™„์ „ ์ž๋™ํ™” ํŒŒ์ดํ”„๋ผ์ธ ๊ตฌํ˜„

Impact

  • ๋ฐฐํฌ ์†Œ์š” ์‹œ๊ฐ„ 45์ดˆ ๋‹ฌ์„ฑ
  • AWS Console ์กฐ์ž‘ ํšŸ์ˆ˜ 0ํšŒ ๊ตฌํ˜„

Key Takeaway

์ •์  ์ž๊ฒฉ ์ฆ๋ช…์„ ๋ฐฐ์ œํ•œ OIDC ๊ธฐ๋ฐ˜ ์ธ์ฆ ์ฒด๊ณ„ ๋„์ž…์œผ๋กœ CI/CD ํŒŒ์ดํ”„๋ผ์ธ์˜ ๋ณด์•ˆ์„ฑ๊ณผ ์šด์˜ ํšจ์œจ์„ ๋™์‹œ์— ํ™•๋ณดํ•˜๋Š” ์„ค๊ณ„ ์›์น™.


AWS ๋ฐฐํฌ ํŒŒ์ดํ”„๋ผ์ธ ๊ตฌ์ถ• ์‹œ Access Key ๋Œ€์‹  OIDC๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ณด์•ˆ ๋ฆฌ์Šคํฌ๋ฅผ ์ œ๊ฑฐํ•˜๊ณ , S3 ๋™๊ธฐํ™” ์‹œ --delete ์˜ต์…˜์„ ์ ์šฉํ•ด ๋ถˆํ•„์š”ํ•œ ์Šคํ† ๋ฆฌ์ง€ ๋น„์šฉ ์ฆ๊ฐ€๋ฅผ ๋ฐฉ์ง€ํ•  ๊ฒƒ

์›๋ฌธ ์ฝ๊ธฐ