#DevHack: Vercel에서 분기에 대한 도메인 구성

Pimp Your Own Bike이라는 이름의 맞춤형 자전거 스티커 판매를 위한 새로운 온라인 스토어 출시를 준비하기 위해. 내 웹사이트를 main 브랜치에 병합하기 전에 테스트할 수 있는지 확인하고 싶었습니다. 사전 정의된 사용자 지정 도메인을 사용하는 것이 가장 쉬운 방법입니다.



Azure에서는 일반적으로 웹앱의 슬롯을 사용합니다. 각 슬롯은 대상 환경(예: 개발)을 정의합니다. PYOB의 경우 Vercel을 사용하고 싶었습니다. 나는 그들의 서비스와 UI의 단순함을 좋아합니다. 모든 기능이 훌륭하게 작동하고 필요한 모든 기능이 함께 제공됩니다.

환경 및 해당 변수

Vercel은 세 가지 유형의 환경과 함께 제공됩니다.

프로덕션: 프로덕션 환경에 사용하는 분기를 나타냅니다. 예를 들어, main .

미리보기: 스테이징 환경이며 main 분기 이외의 다른 분기를 참조합니다.

개발: 이것은 로컬 개발을 위한 것이며 각 팀 구성원이 개발 변수를 자신의 컴퓨터에 쉽게 복사할 수 있습니다.

내 시나리오에서 이는 내 main 분기가 production 에 연결됨을 의미합니다. 내 dev 및 staging 환경은 preview 환경 및 해당 환경 변수와 관련됩니다.



Azure에서는 각 분기에 대해 환경 변수를 별도로 구성한다는 의미입니다. 설명서에는 여러 스테이징 환경을 사용하려는 경우 변수 접두사를 사용하는 것이 가장 좋다고 나와 있습니다.

Info: Staging environment variables

솔직히 말해서 이것은 다양한 지점을 유지해야 할 때 최적이 아닙니다. 대부분의 사이트에서는 이 정도면 충분합니다.

시스템 환경 변수

최근에 릴리스된 UI 개선 사항 내에서 시스템 환경 변수는 구성하기가 더 편합니다. 이전에는 사용하려는 각 변수를 수동으로 구성해야 했습니다. 이제 모든 항목을 자동으로 노출할 수 있을 뿐만 아니라 드롭다운 목록에서 선택할 수도 있습니다. 그렇게 하면 설명서를 찾을 필요가 없습니다.

Info: System environment variables

각 분기에 대한 사용자 지정 URL 구성

각 분기에 고유한 URL을 생성하는 경우 Vercel UI에서는 매우 간단합니다. 프로젝트 설정으로 이동하여 도메인에서 새 도메인을 추가하기만 하면 됩니다. 도메인은 dev.pimpyourownbike.com와 같은 하위 도메인일 수도 있습니다(도메인이 이미 구성된 경우).



도메인을 사용할 수 있게 되면 도메인을 수정하여 Git 분기를 지정할 수 있습니다.

Info: Once you do a new push to your branch, it will automatically start the CI/CD for that branch.

환경 변수를 사용한 방법

작업/테스트 중인 환경을 쉽게 파악하기 위해 VERCEL_GIT_COMMIT_REF 를 사용했습니다. 이 변수는 브랜치 이름에 해당하며 각 환경에서 다른 배너를 표시하는 데 사용됩니다.



코드에서는 다음과 같이 보입니다.

{
  (process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_REF !== "main") && (
    <Alert key="dev-alert" bgClass="bg-purple-700" txtClass="text-white">
      <b className="capitalize">{process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_REF}!</b>
    </Alert>
  )
}

게시일: https://www.eliostruyf.com/devhack-configuring-domains-branches-vercel/

즐거운 환경 구성