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 클릭 (최초 생성시 말고 다시 또 생성시)

   

3. Configure 버튼 클릭해서 Repository access 부분 찾은 후, 배포하고자 하는 레포지토리 선택

   

4. Import 클릭

   

5. 수정할 부분 수정해주고 Deploy 클릭
   

6. 좀 기다리면 배포 링크 짜잔✨

   📎 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가 통과하는걸 확인 가능!