Netlify / Vercel 배포

yhyem·2024년 3월 9일

멋쟁이사자처럼 11기 WEB 파트 React 강의자료 정리

목록 보기
8/8

빌드

yarn build

컴파일 된 코드를 실행할 수 있는 상태로 만드는 일

소스 코드 및 기타 리소스를 컴퓨터가 이해할 수 있는 형태로 변환하는 과정을 말합니다.

소스 코드를 실행 가능한 실행 파일, 라이브러리, 웹 애플리케이션 등으로 변환하여 애플리케이션을 구축하고 준비하는 작업이에요!

  1. 개발자가 작성한 코드를 컴파일
  2. 정적 파일을 번들링
  3. 애플리케이션의 의존성을 관리
  4. 필요한 리소스를 병합
  5. 최종 실행 파일 또는 배포 가능한 패키지를 생성

이렇게 빌드의 과정을 거치면 실행할 수 있는 하나의 완성된 파일을 가지게 됩니다

배포

빌드가 완성된 실행 가능한 파일을 사용자가 접근할 수 있는 환경에 배치시키는 일

애플리케이션을 실제 환경에 전달하여 실행되도록 하는 과정입니다.

  1. 빌드: 애플리케이션을 실행하기 위한 필요한 파일 및 구성 요소들을 준비하는 작업
  2. 설정: 애플리케이션이 올바르게 동작하기 위해 필요한 환경을 설정하는 작업 (ex. 환경 변수, 데이터 베이스 연결정보, 서버 설정등)
  3. 배포 환경 준비: 서버 인스턴스를 프로비저닝(서버를 설정하고 구성하여 사용할 수 있는 상태로 만드는 과정)하거나 호스팅 환경을 설정하는 작업입니다. (ex. 애플리케이션 실행할 서버 환경 준비)
  4. 애플리케이션 전달: 애플리케이션을 실행할 서버에 파일을 복사하거나, 호스팅 환경에 업로드하는 작업 (빌드한 파일 이나 패키지 전달)
  5. 실행 및 테스트: 애플리케이션이 올바르게 동작하는지 확인하는 작업
  6. 서비스 제공: 애플리케이션을 외부에 노출하고, 도메인이나 IP 주소에 연결하는 작업

CI/CD란?

  • CI란? 빌드/테스트 자동화 과정을 의미하는 용어로 개발자를 위한 자동화 프로세스 쉽게 GitHub에 특정 브랜치(master)에 새로운 커밋이 될 때 마다, 해당 코드를 바탕으로 빌드하고 사용자가 미리 만들어둔 테스트 코드를 실행하여 문제가 있는지 없는지를 체크하는 과정을 자동화 한 것입니다.
  • CD란? 배포 자동화 과정을 의미하는 용어로 지속적 서비스 제공(Continuous Delivery) 또는 지속적 배포(Continuous Deployment)를 의미
    기존에는 빌드 후 문제가 없다고 판단되면 실제 서버든, 클라우드 환경의 서버 환경에 합쳐진 코드(빌드 된 상태)를 올리는 과정을 하며 이를 배포한다 라고 합니다. 위에서 설명한 CI의 과정이 되어 있다면, 우리는 배포를 CI가 완료되는 시점에 자동으로 실행하면 됩니다. 이를 CD라고 합니다.

CI/CD 적용 전

1) 코드를 수정/추가 등을 하며 개발을 진행

2) 각자의 코딩 컨벤션에 따라 브랜치에 push 한다.

3) 해당 브랜치 코드에 문제가 없다고 판단되면 main branch에 병합한다.

4) 에러가 발생했다면 1)~3) 과정으로 에러를 고치고, 에러가 발생하지 않았다면 직접 배포를 진행한다.

CI/CD 적용 후

1) CI/CD 적용 전과 동일

2) push된 코드를 CI가 알아서 Build, Test, Lint(포맷팅)을 실행하고 결과를 알려준다.

3) 개발자들은 결과를 보고 에러가 난 부분을 수정한 후 main branch에 병합한다.

4) main branch를 감지하고 있던 CD 과정이 알아서 배포를 수행한다.

아래에서 실습할 Netlify, Vercel과 같은 경우에는 CI/CD가 자동으로 구축되어 있어서 이제 배포 하고 난 뒤에 새롭게 코드가 push 될 경우 알아서 새롭게 빌드하고 배포가 완료됩니다!

다들 들어봤을 AWS와 같은 경우에는 기본적인 인프라 서비스만 사용하는 경우에는 CI/CD가 기본적으로 구축되어 있지 않아요!

AWS는 CI/CD를 구축하기 위한 다양한 서비스를 제공하지만, 이러한 서비스를 조합하여 자신의 프로젝트에 맞는 CI/CD 파이프라인을 구축해야합니다.

ex) AWS CodePipeline, AWS CodeDeploy, AWS CodeCommit, AWS CodeBuild, AWS CodeStar

실습해 볼 Netlify, Vercel 같은 경우에는 정적 웹 사이트 및 싱글 페이지 애플리케이션을 위한 서버리스 배포 플랫폼으로, 정적 파일의 호스팅, 빌드 자동화, CDN 제공 등을 지원합니다.

  • 서버리스 배포 플랫폼? 개발자가 애플리케이션 코드를 서버에 직접 배포하거나 관리하는 대신, 인프라 구성 및 서버 관리를 추상화하여 개발자가 애플리케이션 코드에 집중할 수 있도록 도와주는 플랫폼
    코드를 실행하기 위해 필요한 인프라 자원 (예: 서버, 네트워크, 스토리지 등)을 자동으로 프로비저닝하고 관리

여기서 정적 웹사이트 및 싱글 페이지를 위한 애플리케이션이라고 설명하고 있지만 서버리스 배포 플랫폼을 통해 API 간의 통신을 가능하게 하여 동적인 기능을 추가할 수 있게 합니다.

이러한 플랫폼은 개발자에게 더 간편한 배포 경험을 제공하고, 전 세계적으로 분산된 CDN을 통해 빠른 속도와 성능을 제공하고 있습니다!

Netlify

서버 없이(정확히는 서버는 API랑 통신하고) 프론트엔드 스택으로만 구성된 정적 애플리케이션을 배포하는 용도로 최적화된 서비스

1. Netlify와 Github Repository 연동

  • Sites > Add new site > Import an existing project 클릭

  • GitHub 클릭

2. Github과 연동을 위해 권한을 요청을 한다.

  • Authorize Netlify 클릭

3. Authorize 완료 후 배포하고자하는 레파지토리 선택

4. 빌드를 위한 기본 설정

  • 배포할 브랜치 선택 (일반적으로 master or main 브랜치)
  • Build command : 빌드 커맨드(Build Command)가 있다면 설정
    → yarn 사용 : yarn build (빌드 명령어)

⭐ build를 해야지 배포가 가능한 파일로 만들 수 있는데, 이를 구현하기 위한 코드를 어떻게 할 것인지를 작성해줘야한다.

  • Publish directory : 정적 디렉토리(Public Directory)를 설정
  • yarn build 실행 후 생성되는 build 폴더를 publish directory로 설정

⭐ 배포할 파일을 정하라는 것이다. build를 하면 build 폴더가 생기기 마련인데, 그 폴더의 이름을 알려줘야한다.

CRA에서는 build라는 이름으로 폴더가 생성

5. 환경 변수 설정 위한 Show advanced 버튼 클릭



  • 환경 변수 설정 후 배포

if) 배포 실패 오류 뜰 경우

  • 공식문서

    경우에 따라 로컬로 실행할 때 빌드 실패를 유발하지 않는 경고 메시지로 인해 빌드가 실패할 수 있습니다. 이는 일부 라이브러리 및 빌드 도구가 CI(Continuous Integration) 환경에서 실행되고 있음을 감지할 때 경고를 다르게 처리하기 때문입니다.

    다른 많은 CI 툴 및 플랫폼과 마찬가지로 Netlify는 빌드 환경 변수 CI=true를 자동화된 환경에서 실행 중임을 나타내는 규칙으로 설정합니다. 대부분의 라이브러리는 CI 변수의 존재를 사용하여 진행률 스피너 애니메이션 또는 사용자 프롬프트 제거와 같은 동작 변경을 트리거합니다. 경우에 따라 라이브러리가 경고 메시지를 오류로 처리하여 빌드에 실패할 수도 있습니다.

    일반적으로 경고에 실패하도록 선택한 라이브러리는 사용자가 경고를 유발하는 문제를 해결하려고 할 것으로 가정합니다. 사용 사례에 적합하지 않은 경우 site build 명령의 시작 부분에 CI='를 추가하여 CI 변수를 재정의할 수 있습니다.

`Build command`에 `CI=false` 추가해서 수정

도메인 설정

⭐ 도메인? 사이트에 액세스하는 데 사용되는 전체 이름

ex) yoursitename.netlify.app, www.yourcustomdomain.com

if ) 개인 도메인을 설정하고 싶다면?

netlify로 배포하게 되면 기본적으로 .netlify.app 붙은채로 배포됩니다.

이미 소유한 도메인 이름을 가져오거나 새 도메인 이름을 구입할 수 있습니다. 도메인을 구입하면 자동으로 DNS 설정을 구성하고 도메인에 대한 와일드카드 인증서를 프로비저닝합니다.

  • 공식문서
    1. 팀의 도메인/도메인 추가 또는 등록을 페이지로 이동하고 선택합니다 .
    2. 등록하려는 도메인을 입력하고 확인을 선택합니다 .
    3. 도메인에 이미 소유자가 있는 경우 새 도메인을 선택하고 2단계를 반복합니다.
    4. 도메인을 사용할 수 있는 경우 1년 등록 가격이 표시됩니다. 팀을 위해 등록된 결제 방법을
      사용하거나 결제 방법을 추가하거나 업데이트할 수 있습니다.
    5. 결제를 승인하고 새 도메인을 등록하려면 지금 도메인 등록을 선택합니다 .

Git에서 해당 프로젝트에 push를 하게되면 Netlify에도 자동으로 프로젝트가 빌드 및 배포 가능

Vercel

Login – Vercel

1. 본인의 github 계정 인증 후, 배포를 원하는 레포지토리를 선택하고 [import]

2. 프로젝트명, 빌드를 위한 명령어를 설정

3. 환경변수 설정

4. Deploy

  • vercel.app 이 도메인에 붙는 것을 볼 수 있음
  • 바꾸고 싶으면 도메인을 추가로 구입해서 등록해야함!

Git에서 해당 프로젝트에 push를 하게되면 Vercel에도 자동으로 프로젝트가 빌드 및 배포 가능

profile
yhyem
이전 포스트

전역 상태 관리란?

0개의 댓글