Netlify에서의 프론트엔드 워크플로우

이제 Netlify 빌드 스크립트를 설정했으니, Netlify와 함께하는 개발 워크플로우가 어떻게 진행될지 살펴보겠습니다.

개발 브랜치에서 작업하기

새로운 작업을 할 때는 브랜치를 만드는 것이 좋은 습관입니다.

프로젝트 루트에서 다음 명령어를 실행하세요.

$ git checkout -b "new-feature"

이 명령어는 new-feature라는 새 브랜치를 생성합니다.

앱 업데이트를 배포하는 과정을 테스트하기 위해 몇 가지 간단한 변경을 해보겠습니다.

사용자에게 명확한 행동 유도를 위해 랜딩 페이지에 로그인과 회원가입 버튼을 추가할 것입니다.

이를 위해 src/containers/Home.js 파일의 renderLander 함수를 수정합니다.

function renderLander() {
  return (
    <div className="lander">
      <h1>Scratch</h1>
      <p className="text-muted">간단한 노트 앱</p>
      <div className="pt-3">
        <Link to="/login" className="btn btn-info btn-lg mr-3">
          로그인
        </Link>
        <Link to="/signup" className="btn btn-success btn-lg">
          회원가입
        </Link>
      </div>
    </div>
  );
}

그리고 React-Router에서 Link 컴포넌트를 헤더 부분에 임포트합니다.

import { Link } from "react-router-dom";

이제 랜딩 페이지는 다음과 같이 보일 것입니다.

이 변경 사항을 Git에 커밋합니다.

$ git add .
$ git commit -m "랜딩 페이지 업데이트"

브랜치 배포 생성

이 변경 사항을 별도의 환경에서 미리 볼 수 있도록 Netlify에서 브랜치 배포를 활성화해야 합니다. 사이트 설정 사이드바에서 빌드 및 배포를 선택하세요.

그리고 설정 편집을 클릭하세요.

브랜치 배포를 모두로 설정하고 저장을 클릭하세요.

이제 재미있는 부분이 시작됩니다. 이 변경 사항을 개발 환경에 배포하여 바로 테스트할 수 있습니다. Git에 푸시하기만 하면 됩니다.

$ git push -u origin new-feature

이제 Netlify 프로젝트 페이지로 이동하면 새로운 브랜치 배포가 진행 중인 것을 볼 수 있습니다. 배포가 완료될 때까지 기다린 후 클릭하세요.

배포 미리보기를 클릭하세요.

그러면 앱의 새로운 버전이 실행되는 것을 확인할 수 있습니다!

이제 프론트엔드 앱의 이 버전을 테스트할 수 있습니다. 이 버전은 개발 버전의 백엔드 API에 연결되어 있습니다. 이렇게 하면 프로덕션 사용자에게 영향을 주지 않고 변경 사항을 테스트하고 확인할 수 있습니다.

프로덕션에 배포하기

이제 변경 사항에 만족한다면, master 브랜치에 병합하기만 하면 프로덕션에 배포할 수 있습니다.

$ git checkout master
$ git merge new-feature
$ git push

Netlify에서 이 배포가 진행되는 것을 확인할 수 있습니다.

배포가 완료되면, 여러분의 변경 사항이 실시간으로 반영됩니다!

프로덕션 환경에서 롤백하기

어떤 이유로든 프로덕션 환경의 빌드가 마음에 들지 않는다면, 롤백할 수 있습니다.

이전 프로덕션 배포를 클릭하세요.

그리고 Publish deploy를 클릭합니다. 이렇게 하면 이전 버전이 다시 배포됩니다.

이제 끝입니다! 여러분은 Create React App을 서버리스로 빌드하고 배포하는 CI/CD 파이프라인을 갖추게 되었습니다.