[pre-project] vercel 프론트엔드 배포

JulyK9·2022년 11월 4일
1

pre-project

목록 보기
4/4

💡 내용

사용법 개요

  • vercel 계정 생성
  • github 계정으로 로그인
  • 배포할 레포지토리 추가(import)
  • 필요한 경우 환경변수 추가 입력
  • deploy를 누르면 build를 시작하며 배포가 진행됨

preview 배포와 production 차이

  • 기본적으로 main 브랜치에 대해 배포가 진행되며 완료되면 깃헙에 production으로 배포됨
  • 다른 브랜치(기능 작업을 위해 추가로 만든 브랜치 같은..)에 수정된 작업을 반영하여 그 해당 브랜치로 push하게되면 preview 배포가 진행됨
    => 배포 url 자체가 매번 새로(임시로) 생김, 즉 main 브랜치로 머지하기 전에 확인해볼 수 있는 거라고 보면 될 것 같음

프록시 설정 관련

  • vercel.json 파일을 생성하고 rewrites 라는 메서드를 통해 구현해야 하는 것 같은데
  • 이 부분은 직접 진행해보질 않아서 팀플 과제를 포크해서 직접 다시 해보거나 서버와 통신하는 미니 프로젝트를 통해 다시 한번 직접 진행해봐야 알 수 있겠다

좋은 점

  • 한번 연결이 되면 코드 작업 수정하여 반영시 자동 배포가 진행되며
  • 문제시 build 되는 과정을 확인해볼 수 있어 에러 발생시 문제 접근에 용이하다 생각됨

기타

  • build시 sourcemap 제거 관련 사항
    => 이유 : 내부 코드 노출 방지
    => 방법 : package.json에 GENERATE_SOURCEMAP=false 코드 추가
"scripts": {
    "start": "GENERATE_SOURCEMAP=false react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "gh-pages -d build",
    "predeploy": "npm run build",
    "winstart": "set \"GENERATE_SOURCEMAP=false\" && react-scripts start"
  },

🔑 레퍼런스

profile
느리지만 꾸준하게. 부족하거나 잘못된 부분은 알려주시면 감사하겠습니다.

0개의 댓글