[TIL] Day72 #CI/CD #Vercel

Beanxxยท2022๋…„ 8์›” 8์ผ
2

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
72/120
post-thumbnail

2022.08.08(Mon)

[TIL] Day72
[SEB FE] Day73

โ˜‘๏ธย ๋ฐฐํฌ ์ž๋™ํ™”

: 1๋ฒˆ ํด๋ฆญ / ๋ช…๋ น์–ด ์ž…๋ ฅ์„ ํ†ตํ•ด ์ „์ฒด ๋ฐฐํฌ ๊ณผ์ •์„ ์ž๋™์œผ๋กœ ์ง„ํ–‰ํ•˜๋Š” ๊ฒƒ

  • ์‹œ๊ฐ„ ์ ˆ์•ฝ
  • Human Error ๋ฐฉ์ง€
    • Human Error? ์‚ฌ๋žŒ์ด ์ˆ˜๋™์ ์œผ๋กœ ๋ฐฐํฌ ๊ณผ์ •์„ ์ง„ํ–‰ํ•˜๋Š” ์ค‘์— ์ƒ๊ธฐ๋Š” ์‹ค์ˆ˜

๐Ÿ”ทย ๋ฐฐํฌ ์ž๋™ํ™” Pipeline

  • Pipeline? ์†Œ์Šค ์ฝ”๋“œ ๊ด€๋ฆฌ๋ถ€ํ„ฐ ์‹ค์ œ ์„œ๋น„์Šค๋กœ์˜ ๋ฐฐํฌ ๊ณผ์ •์„ ์—ฐ๊ฒฐํ•˜๋Š” ๊ตฌ์กฐ
    • ์ „์ฒด ๋ฐฐํฌ ๊ณผ์ •์„ ์—ฌ๋Ÿฌ ๋‹จ๊ณ„๋กœ ๋ถ„๋ฆฌ (๋‹จ๊ณ„๋ณ„ ์ˆœ์ฐจ์ ์œผ๋กœ ์ฃผ์–ด์ง„ ์ž‘์—…(Actions)๋“ค ์ˆ˜ํ–‰)
  1. Source๋‹จ๊ณ„: ์›๊ฒฉ ์ €์žฅ์†Œ ์†Œ์Šค ์ฝ”๋“œ์— ๋ณ€๊ฒฝ ์‚ฌํ•ญ ๋ฐœ์ƒ โ†’ ์ด๋ฅผ ๊ฐ์ง€ํ•˜๊ณ  ๋‹ค์Œ ๋‹จ๊ณ„๋กœ ์ „๋‹ฌํ•˜๋Š” ์ž‘์—… ์ˆ˜ํ–‰
  2. Build๋‹จ๊ณ„: ์ „๋‹ฌ๋ฐ›์€ ์ฝ”๋“œ๋ฅผ ์ปดํŒŒ์ผ, ๋นŒ๋“œ, ํ…Œ์ŠคํŠธํ•˜์—ฌ ๊ฐ€๊ณต & ์ƒ์„ฑ๋œ ๊ฒฐ๊ณผ๋ฌผ์„ ๋‹ค์Œ ๋‹จ๊ณ„๋กœ ์ „๋‹ฌํ•˜๋Š” ์ž‘์—… ์ˆ˜ํ–‰
  3. Deploy๋‹จ๊ณ„: ์ „๋‹ฌ๋ฐ›์€ ๊ฒฐ๊ณผ๋ฌผ์„ ์‹ค์ œ ์„œ๋น„์Šค์— ๋ฐ˜์˜ํ•˜๋Š” ์ž‘์—… ์ˆ˜ํ–‰

๐Ÿ™Œย CI/CD Pipeline

  • CI(์ง€์†์  ํ†ตํ•ฉ): Plan โ†’ Code โ†’ Build โ†’ Test โ†’
  • CD(์ง€์†์  ๋ฐฐํฌ): Release โ†’ Deploy โ†’ Operate โ†’ Plan

๐Ÿ”ธย ์ง€์†์  ํ†ตํ•ฉ (CI; continuous integration)

: ํŒ€ ๊ตฌ์„ฑ์›์ด ๊ฐ์ž์˜ ์ž‘์—…์„ ์ž์ฃผ ํ†ตํ•ฉํ•˜๋Š” SW ๋ฐฉ์‹

โœ”๏ธย ๋ชจ๋“  ์ฝ”๋“œ ๋ณ€ํ™”๋ฅผ ํ•˜๋‚˜์˜ Repository์—์„œ ๊ด€๋ฆฌํ•˜๋Š” ๊ฒƒ๋ถ€ํ„ฐ ์‹œ์ž‘~!
โœ”๏ธย ์žฆ์€ Pull Repust & Merge๋กœ ์ฝ”๋“œ๋ฅผ ์ž์ฃผ ํ†ตํ•ฉ (๊ธฐ๋ณธ์ ์ธ ํ…Œ์ŠคํŠธ๋„ ์ž‘๋™ ๊ฐ€๋Šฅ)
๐Ÿ‘‰ย ๊ฐ ๊ฐœ๋ฐœํ•œ ์ฝ”๋“œ๋ฅผ ์ด๋ฅธ ์‹œ์ ์— ์ž์ฃผ ํ•ฉ์น˜๊ณ , ์ž์ฃผ ํ…Œ์ŠคํŠธ ํ•ด๋ณผ ์ˆ˜ ์žˆ์Œ!! โ†’ ํšจ์œจ์ ์ธ ๊ฐœ๋ฐœ ๐Ÿ‘

  • Code: ๊ฐœ๋ฐœ์ž๊ฐ€ ์ฝ”๋“œ๋ฅผ ์ฝ”๋“œ ์ €์žฅ์†Œ์— Push
  • Build: ์ฝ”๋“œ ์ €์žฅ์†Œ๋กœ๋ถ€ํ„ฐ ์ฝ”๋“œ๋ฅผ ๊ฐ€์ ธ์™€์„œ (Unit Test ํ›„) Build
  • (Test): ์ฝ”๋“œ Build ๊ฒฐ๊ณผ๋ฌผ์ด ๋‹ค๋ฅธ ์ปดํฌ๋„ŒํŠธ์™€ ์ž˜ ํ†ตํ•ฉ๋˜๋Š”์ง€ ํ™•์ธ

โœ‹ย Build? ๊ฐœ๋ฐœ์ž๋งŒ ์ฝ์„ ์ˆ˜ ์žˆ๋Š” ์†Œ์Šค ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ ๊ฐ€๋Šฅํ•œ ์ฝ”๋“œ/ํ”„๋กœ๊ทธ๋žจ์œผ๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ๊ณผ์ •
โœ‹ย ๋ฒˆ๋“ค๋ง? ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์†Œ์Šค ์ฝ”๋“œ๋ฅผ ๋” ์ž˜ ์ฝ์„ ์ˆ˜ ์žˆ๊ฒŒ ๋„์™€์คŒ์œผ๋กœ, ๋นŒ๋“œ ๊ณผ์ • ์ค‘ ํ•˜๋‚˜!

  1. New Repository ์ƒ์„ฑ
  2. git remote add [myRepo] [์ƒˆ๋กœ์šด Repository URL]
  3. git push myRepo [branch name]

๐Ÿ”ธย ์ง€์†์  ๋ฐฐํฌ (CD; continuous delivery/deployment)

: CI ๊ณผ์ •์ด ์›ํ™œํžˆ ๋๋‚˜๋ฉด ๋ฐ”๋กœ ๊ณ ๊ฐ์—๊ฒŒ ๋ฐฐํฌํ•˜๋Š” ๊ฒƒ (ex- Github Page)

  • Release: Build๊นŒ์ง€ ๋ชจ๋‘ ์ค€๋น„ ์™„๋ฃŒ! โ†’ ์–ด๋–ค ๊ธฐ๋Šฅ์ด ๊ฐœ๋ฐœ๋˜์—ˆ๋Š”์ง€ ๋น„์ฆˆ๋‹ˆ์Šค ๊ด€๊ณ„์ž๋“ค๊ณผ ์ด์•ผ๊ธฐ ๋‚˜๋ˆ„๋Š” ๋‹จ๊ณ„
  • Deploy: ์‹ค์ œ ๋ฐฐํฌ ๋‹จ๊ณ„
  • Operation: ๋ฐฐํฌ๋œ SW๋ฅผ ์‹ค์ œ ์šด์šฉํ•˜๋Š” ๊ณผ์ • (๊ณ ๊ฐ ํ”ผ๋“œ๋ฐฑ์„ ๋ฐ›์•„ ๊ธฐํš์— ๋ฐ˜์˜)

โ˜‘๏ธย Vercel

: Front-end ๋ฐฐํฌ๋ฅผ ์ž๋™ํ™”ํ•˜๊ณ , ๊ทธ ์™ธ ์—ฌ๋Ÿฌ ์ถ”๊ฐ€ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜๋Š” ๋ฐฐํฌ ํ”„๋ ˆ์ž„์›Œํฌ

๐Ÿ”ทย Client ๋ฐฐํฌ with CI/CD

  1. Vercel ํšŒ์›๊ฐ€์ž… (Github๊ณผ ์—ฐ๋™)

  2. New Project ๋ฒ„ํŠผ ๋ˆ„๋ฅด๊ณ  Add Github Account ํด๋ฆญ (์ตœ์ดˆ ์ƒ์„ฑ์‹œ ๋ง๊ณ  ๋‹ค์‹œ ๋˜ ์ƒ์„ฑ์‹œ)

  1. Configure ๋ฒ„ํŠผ ํด๋ฆญํ•ด์„œ Repository access ๋ถ€๋ถ„ ์ฐพ์€ ํ›„, ๋ฐฐํฌํ•˜๊ณ ์ž ํ•˜๋Š” ๋ ˆํฌ์ง€ํ† ๋ฆฌ ์„ ํƒ

  2. Import ํด๋ฆญ

  1. ์ˆ˜์ •ํ•  ๋ถ€๋ถ„ ์ˆ˜์ •ํ•ด์ฃผ๊ณ  Deploy ํด๋ฆญ
  1. ์ข€ ๊ธฐ๋‹ค๋ฆฌ๋ฉด ๋ฐฐํฌ ๋งํฌ ์งœ์ž”โœจ

    ๐Ÿ“Žย https://react-express-crud-project.vercel.app/

โž• index.test.js ์งœ๋ณด๊ธฐ

// index.test.js
// test ํ†ต๊ณผ์‹œ์— ๋ฐฐํฌ๋˜๋„๋ก testcase ์ž‘์„ฑ
import { render } from "@testing-library/react";
import "@testing-library/jest-dom/extend-expect";

import App from "./App";

describe("Bare minimum requirement", () => {
  describe("App.js ์ปดํฌ๋„ŒํŠธ ์œ ๋‹› ํ…Œ์ŠคํŠธ", () => {
    test('H1 ์—˜๋ฆฌ๋จผํŠธ์— "My Agora States" ํ…์ŠคํŠธ ๋…ธ๋“œ๊ฐ€ ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.', () => {
      const { container } = render(<App />);
      const h1 = container.querySelector("h1");
      expect(h1.textContent).toBe("My Agora States"); // h1 ํƒœ๊ทธ ์•ˆ์˜ ๋‚ด์šฉ์ด ์ด๊ฑฐ๋ฉด test๊ฐ€ ํ†ต๊ณผ๋˜๋„๋ก~!
    });
  });
});

โœจ Vercel์—์„œ Deploy ํ›„์— Build log๋ฅผ ํ™•์ธํ•ด๋ณด๋ฉด ์œ„์˜ test code๊ฐ€ ํ†ต๊ณผํ•˜๋Š”๊ฑธ ํ™•์ธ ๊ฐ€๋Šฅ!

profile
FE developer

0๊ฐœ์˜ ๋Œ“๊ธ€