Netlify 및 Vercel에 React, Angular, Svelte 및 Vue 배포

프로젝트 만들기

주요 프론트엔드 프레임워크에 대해 공식 프로젝트 생성기를 사용하거나 내 merced-spinup 도구(npm에서 확인)와 같은 다른 생성기를 사용하는 경우 중요하지 않습니다. Vercel 또는 Netlify를 배포하는 것은 매우 간단합니다!

수집해야 하는 정보

우리가 알아야 할 두 가지가 있습니다

빌드 명령: 빌드 단계를 트리거하는 명령입니다

.

출력 폴더: 이것은 빌드 명령이 최종 웹사이트를 남길 폴더입니다.

다음은 각 프레임워크의 주요 공식 템플릿에 대한 명령입니다.


뼈대
빌드 명령
출력 폴더


*반응
npm 실행 빌드
짓다

뷰
npm 실행 빌드
거리

모난
npm 실행 빌드
거리

날씬한
npm 실행 빌드
공개/빌드


*Created React App의 경우 빌드 스크립트 앞에 "CI="를 추가해야 합니다. 그렇지 않으면 netlify 또는 vercel에서 오류가 발생할 수 있습니다.

다른 템플릿의 경우

다른 템플릿을 사용하는 경우 package.json 스크립트 내부를 살펴보고 빌드 명령을 찾고 로컬에서 실행하여 출력이 생성되는 폴더를 확인합니다.

Github에 프로젝트 업로드

다음 단계는 github의 리포지토리로 코드를 푸시하는 것입니다. 리포지토리의 루트(최상위 수준)가 package.json 파일이 있는 디렉터리인지 확인하고 다른 Netlify에서 Vercel이 빌드 명령을 실행할 수 없는지 확인합니다. 프로젝트를 배포합니다. 리포지토리는 github, bitbucket 또는 gitlab에 업로드할 수 있습니다.

저장소 연결

Vercel 또는 Netlify에 로그온하고 저장소에 연결된 새 프로젝트를 생성합니다. 빌드 명령 및 출력 디렉토리를 요청할 때 올바른 항목을 입력하고 웹 사이트가 짜잔을 빌드할 때까지 잠시 기다리십시오! 귀하의 사이트가 배포되었습니다!

뿐만 아니라 github repo를 업데이트할 때마다 사이트가 자동으로 업데이트되며 Win!

라우터 구성

클라이언트 측 라우팅(React-Router 등)을 사용하는 경우 다음 추가 단계를 수행해야 합니다.

네틀리파이

리포지토리의 루트에서 netlify.toml을 만들고 다음 항목을 추가합니다.

netlify.toml

[[redirects]]
  from = "/*"
  to = "/index.html"

베르셀

귀하 또는 저장소의 루트에서 다음을 사용하여 vercel.json을 작성하십시오.

vercel.json

{
  "version": 2,
  "routes": [
    { "handle": "filesystem" },
    { "src": "/.*", "dest": "/index.html" }
  ]
}

결론

Vercel 및 Netlify의 프레임워크에 관계없이 프론트엔드 애플리케이션을 배포하는 것은 매우 쉽기 때문에 일부 애플리케이션을 빌드하십시오!