github-actions-tutorial

๐Ÿ“„ CI/CD

: ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ ๋‹จ๊ณ„๋ถ€ํ„ฐ ๋ฐฐํฌ๋•Œ๊นŒ์ง€ ๋ชจ๋“  ๋‹จ๊ณ„๋ฅผ ์ž๋™ํ™”ํ•˜๋Š” ๊ณผ์ •

๐ŸŽฒ Point (ํฐ ํ‹€๋กœ ๋จผ์ € ์ƒ๊ฐํ•˜๊ธฐ)

  • CI - ์ƒˆ๋กœ์šด ๋ณ€๊ฒฝ ์‚ฌํ•ญ ๋จธ์ง€, ๋นŒ๋“œ, ํ…Œ์ŠคํŠธ ์ž๋™ํ™”
  • CD - ๋ฐฐํฌ ์ž๋™ํ™” (with AWS S3)

  • github actions: ์ž๋™ํ™”๋ฅผ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์ฃผ๋Š” ํ•˜๋‚˜์˜ ๊ฐ€์ƒ ์ปดํ“จํ„ฐ

โ–ช CI (Continuos Integration) - ์ง€์†์ ์ธ ํ†ตํ•ฉ

: ์ƒˆ๋กœ์šด ์ฝ”๋“œ์˜ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์ด ๋นŒ๋“œ ๋ฐ ํ…Œ์ŠคํŠธ ๋˜์–ด ๊ณต์œ  ๋ ˆํฌ์ง€ํ† ๋ฆฌ์— ์ง€์†์ ์œผ๋กœ(=์ž๋™์ ์œผ๋กœ)ํ†ตํ•ฉ๋˜๋Š” ๊ฒƒ

  • ์ฝ”๋“œ ๋ณ€๊ฒฝ์‚ฌํ•ญ์„ ์ฃผ๊ธฐ์ ์œผ๋กœ ๋นˆ๋ฒˆํ•˜๊ฒŒ ๋จธ์ง€ํ•ด์•ผ ํ•œ๋‹ค. = ์ž‘์€ ๋‹จ์œ„๋กœ ๋‚˜๋ˆ„์–ด ๋จธ์ง€๋ฅผ ์ง„ํ–‰ํ•œ๋‹ค.

  • CI๋ฅผ ์œ„ํ•ด ์ž‘์„ฑ๋œ ์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ†ตํ•ด ํ…Œ์ŠคํŠธ์˜ ๊ณผ์ •์ด ์ž๋™์œผ๋กœ ์ง„ํ–‰๋œ๋‹ค.

โ–ช CD (Continuous Delivery(or Deployment)) - ์ง€์†์ ์ธ ์ œ๊ณต(or ๋ฐฐํฌ)

image

  • Continuous Delivery๋Š” ๊ฐœ๋ฐœํ™˜๊ฒฝ ๋ฐฐํฌ๊นŒ์ง€ ์ž๋™ํ™”,
  • Continuous Deployment๋Š” Production ๋ ˆ๋ฒจ๊นŒ์ง€ ์ž๋™์œผ๋กœ deploy ํ•˜๋Š” ๊ฒƒ์„ ์˜๋ฏธ
  • CD๋Š” ๊ฐœ๋ฐœ์ž์˜ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์ด ๋ ˆํฌ์ง€ํ† ๋ฆฌ๋ฅผ ๋„˜์–ด, ๊ณ ๊ฐ์˜ ํ”„๋กœ๋•์…˜(Production) ํ™˜๊ฒฝ๊นŒ์ง€ ๋ฆด๋ฆฌ์ฆˆ ๋˜๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

CI/CD๋ฅผ ์œ„ํ•ด ํ”Œ๋žซํผ์„ ์‚ฌ์šฉํ•˜๋Š”๋ฐ ์„ค์น˜ํ˜•๊ณผ ํด๋ผ์šฐ๋“œํ˜•์ด ์žˆ๋‹ค.

๋Œ€ํ‘œ์ ์ธ ์„ค์น˜ํ˜• ํ”Œ๋žซํผ์€ Jenkins, ํด๋ผ์šฐ๋“œํ˜• CI/CD ํ”Œ๋žซํผ์€ Github Actions๊ฐ€ ์žˆ๋‹ค.

ํด๋ผ์šฐ๋“œ ์„œ๋น„์Šค? ํƒ€์‚ฌ ์ œ๊ณต์—…์ฒด๊ฐ€ ํ˜ธ์ŠคํŒ…ํ•˜์—ฌ ์ธํ„ฐ๋„ท์„ ํ†ตํ•ด ์‚ฌ์šฉ์ž์—๊ฒŒ ์ œ๊ณตํ•˜๋Š” ์ธํ”„๋ผ, ํ”Œ๋žซํผ ๋˜๋Š” ์†Œํ”„ํŠธ์›จ์–ด

โ–ช ์™œ CI/CD๋ฅผ ๊ตฌ์ถ•ํ• ๊นŒ? (CI/CD์˜ ์žฅ์ )

  • ๊ฐœ๋ฐœ ์ƒ์‚ฐ์„ฑ์„ ํ–ฅ์ƒ ์‹œ์ผœ์ค€๋‹ค.
  • ๋ฌธ์ œ์ ์„ ๋น ๋ฅด๊ฒŒ ๋ฐœ๊ฒฌํ•  ์ˆ˜ ์žˆ๋‹ค.
  • ๋ฐœ๊ฒฌ๋œ ๋ฒ„๊ทธ๋ฅผ ๋น ๋ฅด๊ฒŒ ์ˆ˜์ • ๋˜ํ•œ ๊ฐ€๋Šฅํ•˜๋‹ค.

  • ์ฝ”๋“œ์˜ ํ€„๋ฆฌํ‹ฐ ํ–ฅ์ƒ > ์ฝ”๋“œ์˜ ์œ ๋‹› ํ…Œ์ŠคํŠธ๊ฐ€ ๊ฐ€๋Šฅํ•˜๊ธฐ ๋•Œ๋ฌธ

๐Ÿ“„ What is Github Actions !

: Github์—์„œ ์ œ๊ณตํ•˜๋Š” ํด๋ผ์šฐ๋“œํ˜• CI/CD ํˆด

๐ŸŽฒ Point (์‚ฌ์šฉ ์ด์œ ๋ฅผ ๋ช…ํ™•ํžˆ ์ดํ•ดํ•˜๊ธฐ)

  • CI/CD ์ž๋™ํ™” ํŒŒ์ดํ”„๋ผ์ธ์„ ๊ตฌ์ถ•ํ•˜๊ธฐ ์œ„ํ•ด์„œ ์‚ฌ์šฉํ•œ๋‹ค.
  • ์ž๋™ํ™”๋ฅผ ์œ„ํ•ด github ์—์„œ ์ œ๊ณตํ•˜๋Š” ํ•˜๋‚˜์˜ ๊ฐ€์ƒ ์ปดํ“จํ„ฐ

โ–ช ์žฅ์ 

  • ํˆด(ex. Jekins)์„ ๋”ฐ๋กœ ์„ค์น˜ํ•˜์ง€ ์•Š๊ณ  Repository์—์„œ ๊ด€๋ฆฌ
  • ์‰ฌ์šด ์„ค์ •

โ–ช ์•Œ์•„์•ผ ํ•  ๊ฐœ๋… 5๊ฐ€์ง€

image

name: CI/CD

on:
  push: // push event
    branches:
      - main
   pull_request: // pr event
    branches:
      - main
  workflow_dispatch: // github actions ํŽ˜์ด์ง€์—์„œ workflow๋ฅผ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์„ ์ถ”๊ฐ€ํ•˜๋Š” ์ด๋ฒคํŠธ

jobs:
  helloWorld:
    runs-on: ubuntu-latest // runner
    steps:
      - run: echo HelloWorld
      - uses: actions/checkout@master
  1. Workflows

    • ํŠน์ •ํ•œ ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ–ˆ์„ ๋•Œ ์–ด๋–ค ์ผ์„ ์ˆ˜ํ–‰ํ•˜๋Š” ์ง€ ์•Œ๋ ค์ฃผ๋Š” ์ž๋™ํ™”๋œ ํ”„๋กœ์„ธ์Šค
    • ์—ฌ๋Ÿฌ Job์œผ๋กœ ๊ตฌ์„ฑ
  2. Events

    • github์—์„œ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋Š” ์ด๋ฒคํŠธ(main ๋ธŒ๋žœ์น˜๋กœ ๋จธ์ง€, ์ปค๋ฐ‹์„ ํ‘ธ์‰ฌ)
  3. Jobs

    • ํ•˜๋‚˜์˜ Runner์—์„œ ์‹คํ–‰๋  ์—ฌ๋Ÿฌ step ๋ชจ์Œ, workflow์˜ job๋“ค์€ ๋™์‹œ์— ์‹คํ–‰(๋ณ‘๋ ฌ๋กœ ์‹คํ–‰), step์€ ์ˆœ์ฐจ์ ์œผ๋กœ ์‹คํ–‰

    • ์—ฌ๋Ÿฌ step์œผ๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ์Œ.
    • ๋‹ค๋ฅธ Job์— ์˜์กดํ•  ์ˆ˜ ์žˆ๊ณ , ๋…๋ฆฝ์  ๋˜๋Š” ๋ณ‘๋ ฌ์ ์œผ๋กœ ์‹คํ–‰ ๊ฐ€๋Šฅ.
  4. Actions

    • github workflow ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ
    • ๋‚จ๋“ค์ด ๋งŒ๋“ค์–ด๋‘” ์ผ๋ จ์˜ step๋“ค์„ ๊ฐ€์ ธ๋‹ค ์”€.
    • use ํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉ 17 marketplace์— ์„ค์ •๋œ actions๊ฐ€ ๋งŽ์Œ. ๊ฐ€์ ธ๋‹ค์“ฐ๋ฉด ๋œ๋‹ค. 18 ์ง์ ‘ ์ฝ”๋“œ ์ˆ˜์ •์‹œ์—๋„ ํ™•์ธ๊ฐ€๋Šฅ
  5. Runners

    • ๋‚ด๊ฐ€ ์ง์ ‘ Job์„ ์‹คํ–‰์‹œํ‚ฌ ํ•„์š” ์—†์ด Job์„ ์‹คํ–‰์‹œํ‚ค๋Š” VM ๋จธ์‹ (๊ฐ€์ƒ ์ปดํ“จํ„ฐ)
  6. workflow dispatch 16

๐Ÿ“„ GitHub Actions์œผ๋กœ CI ํŒŒ์ดํ”„๋ผ์ธ ๊ตฌ์ถ•ํ•˜๊ธฐ

CRA์—๋Š” ๋ณ„๋„์˜ test ๊ธฐ๋Šฅ์ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— jest์™€ ๊ฐ™์€ ํ…Œ์ŠคํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์„ค์น˜ํ•  ํ•„์š”๊ฐ€ ์—†๋‹ค.

  • App.js
import "./App.css";

function App() {
  return <h1>Hello, World</h1>;
}

export default App;
  • App.test.js (ํ…Œ์ŠคํŠธ์ฝ”๋“œ ์˜ˆ์‹œ)
import { render, screen } from "@testing-library/react";
import App from "./App";

test("renders learn react link", () => {
  render(<App />); // App.js๊ฐ€ ๋ Œ๋”๋ง ๋˜๋Š”์ง€ ํ™•์ธ

  // h1 ํƒœ๊ทธ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋Š”์ง€ ํ…Œ์ŠคํŠธ
  const heading = screen.getByRole("heading");
  expect(heading).toBeInTheDocument();

  // App.js๊ฐ€ Hello, Deploy๋ผ๋Š” ๊ธ€์ž๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋Š”์ง€ ํ…Œ์ŠคํŠธ
  expect(heading.textContent).toBe("Hello, Deploy");
});
  • CICD.yml ํ”„๋กœ์ ํŠธ ๊ฒฝ๋กœ์— .github\workflows๋ผ๋Š” ํด๋”๋ฅผ ๋งŒ๋“ค์–ด ymlํŒŒ์ผ์„ ์ƒ์„ฑํ•œ๋‹ค.
name: CI/CD

on:
  push:
    branches:
      - main
   pull_request:
    branches:
      - main
  workflow_dispatch:

jobs:
  helloWorld:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - run: npm ci // clean install์˜ ์•ฝ์ž, npm package๋ฅผ ์„ค์น˜ํ•œ๋‹ค.
      - run: npm run test
      - run: echo SUCCESS

โœ” ์ž˜๋ชป๋œ ์ฝ”๋“œ๋กœ ํ…Œ์ŠคํŠธ ์ž๋™ํ™” ํ™•์ธํ•ด๋ณด๊ธฐ

Hello deploy๋ฅผ Hello World์œผ๋กœ ๋ฐ”๊พธ์–ด ํ…Œ์ŠคํŠธ.

import "./App.css";

function App() {
  return <h1>Hello, World</h1>;
}

export default App;

19

์–ด๋Š ๋ถ€๋ถ„์—์„œ test๋ฅผ ํ†ต๊ณผํ•˜์ง€ ๋ชปํ–ˆ๋Š”์ง€ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

โ–ช ์ •์ƒ ์ฝ”๋“œ๋กœ ํ…Œ์ŠคํŠธ ์ž๋™ํ™” ์‹คํ–‰ํ•˜๊ธฐ

20

๋ชจ๋“  step์ด ์ž‘๋™ํ•œ ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

โ–ช PRํ•  ๋•Œ ์ œ๋Œ€๋กœ test ๋˜๋Š”์ง€ ํ™•์ธํ•ด๋ณด๊ธฐ

  1. ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ๋ธŒ๋žœ์น˜(break-tests)์ƒ์„ฑ
  2. pushํ›„ pr ์ƒ์„ฑ 6

    ๋ฐ”๋กœ test๊ฒฐ๊ณผ๋ฅผ ์•Œ ์ˆ˜ ์žˆ๋‹ค. Detail์„ ํด๋ฆญํ•˜๋ฉด action์œผ๋กœ ๋„˜์–ด๊ฐ€ ํ•ด๋‹น work flow์—์„œ ์–ด๋””๊ฐ€ ์ž˜๋ชป๋˜์—ˆ๋Š”์ง€ ํ™•์ธ ํ•  ์ˆ˜ ์žˆ๋‹ค. 7

    PR๋ชฉ๋ก์—์„œ๋„ ํ™•์ธ ๊ฐ€๋Šฅํ•˜๋‹ค. 9

    ํ…Œ์ŠคํŠธ์‹œ ๋ฌธ์ œ๊ฐ€ ์—†์œผ๋ฉด ์ดˆ๋ก ๋ฑƒ์ง€๊ฐ€ ๋œจ๋Š” ๊ฒƒ์„ ํ™•์ธ ํ•  ์ˆ˜ ์žˆ๋‹ค.

๐Ÿ“Œ ์ฐธ๊ณ . github ํŽ˜์ด์ง€์—์„œ workflow ์ƒ์„ฑํ•˜๊ธฐ

  1. CI/CD๋ฅผ ์ ์šฉํ•  ํ”„๋กœ์ ํŠธ์˜ action ํƒญ์—์„œ node.js ํ…œํ”Œ๋ฆฟ์„ ์„ ํƒํ•œ๋‹ค. 1
  2. ๊ธฐ๋ณธ์ ์ธ ํ…œํ”Œ๋ฆฟ์—์„œ ๊ฐ์ž ์ƒํ™ฉ์— ๋งž๊ฒŒ ์ˆ˜์ •ํ•œ๋‹ค. 2

๐Ÿ“„ github actions๋ฅผ ์‚ฌ์šฉํ•ด CD ํŒŒ์ดํ”„๋ผ์ธ ๋งŒ๋“ค๊ธฐ (with AWS S3)

  • AWS: ์•„๋งˆ์กด์—์„œ ๋งŒ๋“  ํด๋ผ์šฐ๋“œ ์„œ๋น„์Šค
  • AWS S3: AWS์—์„œ ์ œ๊ณตํ•˜๋Š” ์ธํ„ฐ๋„ท ์Šคํ† ๋ฆฌ์ง€ ์„œ๋น„์Šค like vercel

1. AWS์—์„œ ํšŒ์›๊ฐ€์ž… ํ›„ ๋ฒ„ํ‚ท(= ์ €์žฅ์†Œ) ๋งŒ๋“ค๊ธฐ

1

AWS ๋ฆฌ์ „: ์–ด๋””์— ์žˆ๋Š” ์ปดํ“จํ„ฐ๋ฅผ ๋นŒ๋ ค ์“ฐ๋Š”๊ฐ€?

๊ฐ์ฒด ์†Œ์œ ๊ถŒ - ACL ๋น„ํ™œ์„ฑํ™” (๊ถŒ์žฅ) 2 3

:star: ์ค‘์š”. ํผ๋ธ”๋ฆญ ์—‘์„ธ์Šค ์ฐจ๋‹จ ํ•ด์ œ > ์šฐ๋ฆฌ๊ฐ€ ๋งŒ๋“œ๋Š” ์›น์— ๋ชจ๋‘๊ฐ€ ์ ‘๊ทผํ•˜๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด์„œ

์ฃผ์˜(๋นจ๊ฐ„ ์„ธ๋ชจ)๋ฐ•์Šค์—๋Š” ์ฒดํฌ.

๋ฒ„ํ‚ท ๋ฒ„์ „ ๊ด€๋ฆฌ - ๋น„ํ™œ์„ฑํ™” ์ฒดํฌ

๊ธฐ๋ณธ ์•”ํ˜ธํ™” - ๋น„ํ™œ์„ฑํ™” ์ฒดํฌ

๋ฒ„ํ‚ท ๋งŒ๋“ค๊ธฐ

4

2. ํ”„๋กœ์ ํŠธ build ์‹คํ–‰ํ•˜๊ณ  ๋ฒ„ํ‚ท์— ํŒŒ์ผ ์—…๋กœ๋“œํ•˜๊ธฐ

5

ํ”„๋กœ์ ํŠธ build ํด๋”์— ์žˆ๋Š” ํŒŒ์ผ์„ ์—…๋กœ๋“œ ํ•ฉ๋‹ˆ๋‹ค.

6

  • ์†์„ฑํƒญ์—์„œ ์ •์  ์›น ์‚ฌ์ดํŠธ ํ˜ธ์ŠคํŒ…์„ ํ™œ์„ฑํ™” ํ•ฉ๋‹ˆ๋‹ค.
    • ์ •์  ์›น ํŽ˜์ด์ง€: Client Side Rendering๋ฐฉ์‹์œผ๋กœ ์ง„ํ–‰๋˜๋Š” ์›น ํŽ˜์ด์ง€ (์ด๋ฏธ ์ €์žฅ๋œ html ๋ฌธ์„œ๋ฅผ ํด๋ผ์ด์–ธํŠธ์—๊ฒŒ ์ „์†ก)
    • ๋™์  ์›น ํŽ˜์ด์ง€: Server Side Rendering๋ฐฉ์‹์œผ๋กœ ์ง„ํ–‰๋˜๋Š” ์›น ํŽ˜์ด์ง€ (์‚ฌ์šฉ์ž์˜ ์š”์ฒญ ์ •๋ณด๋ฅผ ์ฒ˜๋ฆฌํ•œ ํ›„์— ์ œ์ž‘๋œ HTML๋ฌธ์„œ๋ฅผ ํด๋ผ์ด์–ธํŠธ์—๊ฒŒ ์ „์†ก)
    • ๋”ฐ๋ผ์„œ AWS S3 ๊ธฐ๋Šฅ์œผ๋กœ๋Š” Next.js๋กœ ๋งŒ๋“  ์›น ํŽ˜์ด์ง€๋ฅผ ํ˜ธ์ŠคํŒ…ํ•  ์ˆ˜ ์—†์Œ. AWS EC2๋ผ๋Š” ๊ธฐ๋Šฅ์ด ์žˆ๋‹ค๊ณ  ํ•จ.
  • ์ธ๋ฑ์Šค ๋ฌธ์„œ - ํŠน์ •ํ•œ ์›น์‚ฌ์ดํŠธ๋กœ ๋ฒ„ํ‚ท์— ์ ‘์†ํ•˜๋ฉด ์ฒ˜์Œ์œผ๋กœ ๋ณด์—ฌ์ค„ ๊ธฐ๋ณธ ํŽ˜์ด์ง€ 7

    ํ˜ธ์ŠคํŒ…์„ ํ™œ์„ฑํ™” ํ•˜๋ฉด ์ฃผ์†Œ๋ฅผ ๋ฐ›์Šต๋‹ˆ๋‹ค.

    ํ•˜์ง€๋งŒ ์ฒ˜์Œ์—” 403 Forbidden ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

    ์™œ? ๋‹ˆ๊ฐ€ ๋ˆ„๊ตฐ์ง€ ์•„๋Š”๋ฐ ๋‹Œ ๊ถŒํ•œ์ด ์—†๋‹ค. ๋ฒ„ํ‚ท์•ˆ์— ์žˆ๋Š” ๊ฐ์ฒด์— ์ ‘๊ทผํ•  ๊ถŒํ•œ์ด ์—†๋‹ค.

    ์ฐจ๋‹จ ํ’€์—ˆ๋Š”๋ฐ ์™œ? ์•„๊นŒ๋Š” ์ฐจ๋‹จ์„ ๊ฑฐ๋Š” ๊ฒƒ์„ ํ•ด์ œํ•œ๊ฒƒ.

    ์ฐจ๋‹จ์€ ํ’€๋ ธ์ง€๋งŒ ๊ถŒํ•œ์€ ๋”ฐ๋กœ ๋ถ€์—ฌํ•ด์ฃผ์–ด์•ผ ํ•œ๋‹ค.

    ๊ถŒํ•œ์„ ๋ถ€์—ฌํ•˜์ž

3. ์›นํŽ˜์ด์ง€์— ์ ‘๊ทผ ๊ถŒํ•œ์„ ๋ถ€์—ฌํ•œ๋‹ค.

๊ถŒํ•œ ํƒญ์— ๋“ค์–ด๊ฐ€์„œ ๋ฒ„ํ‚ท ์ •์ฑ…์œผ๋กœ ์ด๋™ํ•œ๋‹ค.

8

๋ฒ„ํ‚ท ์ •์ฑ…์—์„œ ์—‘์„ธ์Šค ๊ถŒํ•œ ์„ค์ •์ด ๊ฐ€๋Šฅํ•˜๋‹ค. Json ํŒŒ์ผ๋กœ ์ œ์ž‘

{
  "Version": "2012-10-17", // ์ •์ฑ…์„ ์„ค์ •ํ•˜๋Š” aws๋ฌธ๋ฒ•์˜ ๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ
  "Statement": [
    {
      "Sid": "PublicReadGetObject", // ์‚ฌ์ด๋“œ ์•„๋‹˜. S์•„์ด๋””์ž„. ๊ณ ์œ ํ•œ ID.
      "Effect": "Allow", // ๊ถŒํ•œ์„ ํ—ˆ์šฉํ• ์ง€ ๋ง์•„์•ผํ• ์ง€
      "Principal": "*", // ๋ˆ„๊ตฌํ•œํ…Œ ๊ถŒํ•œ์„ ํ—ˆ์šฉํ•  ๊ฒƒ์ธ์ง€
      "Action": "s3:GetObject", // ์–ด๋–ค ํ–‰๋™์„ ํ—ˆ๋ฝํ•  ๊ฒƒ์ธ์ง€
      "Resource": "arn:aws:s3:::<bucket-name>/*" // ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๋ฒ„ํ‚ท ๋˜๋Š” ํŒŒ์ผ ์ค‘ ๊ถŒํ•œ์„ ํ—ˆ์šฉํ•  ๋ฆฌ์†Œ์Šค
    }
  ]
}

9

๋ฒ„ํ‚ท ์ •์ฑ…์—์„œ ๊ถŒํ•œ์„ ๋ชจ๋‘์—๊ฒŒ ํ—ˆ์šฉํ•˜๋ฉด, 403 forbidden error๊ฐ€ ์‚ฌ๋ผ์ง€๊ณ  ์ž˜ ์ž‘๋™ํ•˜๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์—ฌ๊ธฐ๊นŒ์ง€ aws์— ํŒŒ์ผ์„ ์˜ฌ๋ ค์„œ ํ•œ ์ˆ˜๋™์ ์ธ ๋ฐฐํฌ!

4. ํ„ฐ๋ฏธ๋„์—์„œ AWS S3์— ๋ฐฐํฌํ•˜๊ณ  github actions๋กœ ์ž๋™ํ™”ํ•˜๊ธฐ!

์ž๋™ํ™”ํ•˜๊ธฐ ์œ„ํ•ด ํ„ฐ๋ฏธ๋„์—์„œ aws๋ฅผ ๋‹ค๋ฃฐ ์ˆ˜ ์žˆ๋„๋ก aws CLI๋ฅผ ์„ค์น˜ํ•œ๋‹ค. AWS ๊ณต์‹ DOC์—์„œ AWS CLI๋ฅผ ์„ค์น˜ํ•œ๋‹ค. ์„ค์น˜ ๋ฐฉ๋ฒ•: Windows(OS) PC์— AWS CLI ์„ค์น˜ํ•˜๊ธฐ

AWS CLI๋ž€? AWS Command Line Interface, ํ„ฐ๋ฏธ๋„์—์„œ AWS ์‹คํ–‰์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์ฃผ๋Š” ์˜คํ”ˆ ์†Œ์Šค ๋„๊ตฌ

10

์œ ์ €ํƒญ์„ ํด๋ฆญํ•ด ๋ณด์•ˆ์ž๊ฒฉ์ฆ๋ช… ํŽ˜์ด์ง€๋กœ ๋“ค์–ด๊ฐ€ ์—‘์„ธ์Šคํ‚ค ๋งŒ๋“ค๊ธฐ ๋ฒ„ํŠผ์„ ํด๋ฆญํ•œ๋‹ค. 11

์—‘์„ธ์Šคํ‚ค ๋งŒ๋“ค๊ธฐ ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ ๋‹จ๊ณ„๋ฅผ ์ง„ํ–‰ํ•˜๋ฉด ๋งŒ๋“ค์–ด์ง„ ์—‘์„ธ์Šคํ‚ค๋ฅผ ๋ณด์—ฌ์ค€๋‹ค.

  • ์—‘์„ธ์Šค ํ‚ค = ์‚ฌ์šฉ์ž์˜ ์•„์ด๋””
  • ๋น„๋ฐ€ ์—‘์„ธ์Šค ํ‚ค = ์‚ฌ์šฉ์ž์˜ ๋น„๋ฐ€๋ฒˆํ˜ธ :star: ์ค‘์š”! ๋น„๋ฐ€ ์—‘์„ธ์Šค ํ‚ค๋Š” ์ฒ˜์Œ ๋งŒ๋“  ์ƒํ™ฉ ์ดํ›„์—๋Š” ๋ณด์ด์ง€ ์•Š์œผ๋‹ˆ ๋”ฐ๋กœ ์ €์žฅํ•ด ๋‘์–ด์•ผ ํ•œ๋‹ค.

12

ํ„ฐ๋ฏธ๋„์—์„œ aws configure --profile <ํ”„๋กœํ•„ ์ด๋ฆ„>์„ ์ž…๋ ฅํ•ด ํ”„๋กœ์ ํŠธ ๋ฐฐํฌ์— ์‚ฌ์šฉ๋  ํ”„๋กœํ•„์„ ์„ค์ •ํ•œ๋‹ค.

  • Default region name: ap-northeast-2 // ์„œ์šธ

13

aws configure list-profiles๋ช…๋ น์–ด๋ฅผ ํ†ตํ•ด ์ƒ์„ฑ๋œ ํ”„๋กœํ•„์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

14

aws s3 sync build/ s3://<aws ํŽ˜์ด์ง€์—์„œ ์ƒ์„ฑํ•œ ๋ฒ„ํ‚ท ์ด๋ฆ„> --delete --profile <์‚ฌ์šฉํ•  ํ”„๋กœํ•„ ์ด๋ฆ„>
aws ํŽ˜์ด์ง€์—์„œ ์ž‘์„ฑํ•œ ๋ฒ„ํ‚ท์˜ ๊ฐ์ฒด๋ฅผ ๋ชจ๋‘ ์ง€์šฐ๊ณ  ํ˜„์žฌ ๋ฃจํŠธ์— ์žˆ๋Š” buildํŒŒ์ผ์„ ๋ชจ๋‘ ์—…๋กœ๋“œ ํ•œ๋‹ค.

15

aws ํŽ˜์ด์ง€์—์„œ๋„ ํŒŒ์ผ๋“ค์ด ์—…๋กœ๋“œ ๋œ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค. ํ”„๋กœ์ ํŠธ์˜ ๋‚ด์šฉ์ด ๋ณ€๊ฒฝ๋œ ๊ฒฝ์šฐ, buildํ•˜๊ณ  ๋‹ค์‹œ ๋ฒ„ํ‚ท์— ํŒŒ์ผ์„ ์—…๋กœ๋“œํ•˜๋ฉด ๋ณ€๊ฒฝ๋œ ๋‚ด์šฉ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

5. ๋ณธ๊ฒฉ์ ์œผ๋กœ CD ํŒŒ์ดํ”„๋ผ์ธ ๊ตฌ์ถ•ํ•˜๊ธฐ

name: CI/CD

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  CICD:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@main
      - run: npm ci
      - run: npm run test
      - run: echo SUCCESS
      - run: npm run build
      - name: deploy to s3
         uses: jakejarvis/s3-sync-action@master // ์ด๋ถ€๋ถ„์„ main์œผ๋กœ ๋ฐ”๊พธ๋ฉด error๋ฐœ์ƒ
         with:
            args: --delete // ๋ฒ„ํ‚ท์— ์žˆ๋Š” ๋ชจ๋“  ๊ฐ์ฒด ์‚ญ์ œ
         env: // ํ™˜๊ฒฝ๋ณ€์ˆ˜ ์„ธํŒ…
            AWS_S3_BUCKET: $
            AWS_ACCESS_KEY_ID: $
            AWS_SECRET_ACCESS_KEY: $
            AWS_REGION: 'ap-northeast-2'
            SOURCE_DIR: 'build'

์—‘์„ธ์Šค ํ‚ค ๋น„๋ฐ€๋ฒˆํ˜ธ๋ฅผ ์ˆจ๊ธฐ๊ธฐ ์œ„ํ•ด ๊นƒํ—™์—์„œ ์ž์ฒด์ ์œผ๋กœ ์ œ๊ณตํ•ด์ฃผ๋Š” ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•œ๋‹ค. 21

Settings> secrets/Actions > New repository secret ์ค‘์š”. ์ˆ˜์ •์€ ๊ฐ€๋Šฅํ•˜์ง€๋งŒ ์›๋ž˜ ์ €์žฅํ–ˆ๋˜ ๋‚ด์šฉ์€ ๋ณผ ์ˆ˜ ์—†๋‹ค. 22

ํ™˜๊ฒฝ๋ณ€์ˆ˜๋Š” ์ƒ์„ฑํ–ˆ๋˜ ๋ฒ„ํ‚ท ์ด๋ฆ„, ID, ๋น„๋ฐ€๋ฒˆํ˜ธ๋ฅผ ์„ค์ •ํ•˜๋ฉด ๋œ๋‹ค.

main ๋ธŒ๋žœ์น˜์— push๋ฅผ ๋‚ ๋ฆฌ๋ฉด 23

actionsํƒญ์—์„œ CD๊ฐ€ ์„ฑ๊ณต์ ์œผ๋กœ ๊ตฌ์ถ•๋œ ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

๐Ÿ“„ ํŒ€์›๋“ค๊ณผ ํ† ๋ก ํ•  ์ 

  • develope ๋ธŒ๋žœ์น˜์— push & prํ• ๋•Œ CI ์ž‘๋™

  • CD๋Š” ์–ด๋Š ์ด๋ฒคํŠธ์— ์ž‘๋™ํ•˜๋„๋ก ์„ค์ •ํ•ด์•ผ ํ•˜๋Š”์ง€?

์ถœ์ฒ˜

Leave a comment