Reactjs

Gatsby Netlify에 배포

조회 275 (작성일 2020.10.31 11:22)
- 음성
- 목록
- - 검색

이 가이드는 Netlify에서 다음 Gatsby 사이트를 배포하고 호스팅 하는 방법을 안내합니다.

https://www.gatsbyjs.com/docs/deploying-to-netlify/

Netlify는 Gatsby 사이트 배포를 위한 훌륭한 옵션입니다. Netlify는 코드를 자동화하여 성능이 뛰어나고 유지 관리가 용이 한 사이트 및 웹 앱을 만드는 통합 플랫폼입니다. 지속적 배포 (Git 트리거 빌드)를 제공합니다. 지능형 글로벌 CDN; 전체 DNS (사용자 지정 도메인 포함) 자동화 된 HTTPS; 자산 가속화; 그리고 훨씬 더.

무료 계층에는 무제한 개인 및 상업용 프로젝트, HTTPS, 공용 또는 개인 저장소의 지속적인 배포 등이 포함됩니다.

호스팅 설정

사이트를 호스팅 하는 방법에는 두 가지가 있습니다.

Git 저장소 설정
사이트 폴더 업로드

1. Git 저장소 설정

Netlify는 현재 GitHub, GitLab 및 Bitbucket에 대한 지원을 내장하고 있습니다. 이 접근 방식을 사용하면 원할 때마다 웹 사이트의 이전 버전으로 롤백 할 수 있습니다. 또한 변경할 때마다 수동으로 다시 빌드하고 업로드 할 필요 없이 코드를 각 리포지토리에 푸시하여 사이트를 재배포 할 수 있습니다. 저장소는 비공개 또는 공개 일 수 있습니다.

이제 Netlify에 로그인하면 화면 오른쪽 상단에 git에서 새 사이트 버튼이 표시됩니다. 그것을 클릭하고 웹 사이트를 호스팅하는 데 사용한 것과 동일한 git 공급자와 연결하고 Netlify가 귀하의 계정을 사용하도록 승인하십시오. 웹 사이트 저장소를 선택하면 아래 옵션을 사용하여 설정을 배포 할 수 있습니다.

배포 할 분기 : 모니터링 할 분기를 지정할 수 있습니다. 특정 분기로 푸시 하면 Netlify가 사이트를 구축하고 배포합니다. 기본값은 master입니다.
빌드 명령 : 위 브랜치로 푸시 할 때 Netlify에서 실행할 명령을 지정할 수 있습니다. 기본값은 npm run build입니다.
게시 디렉토리 : Netlify가 웹 사이트를 호스팅 하는 데 사용할 폴더 (예 : public, dist, build)를 지정할 수 있습니다. 기본값은 public입니다.
고급 빌드 설정 : 사이트에 빌드 할 환경 변수가 필요한 경우 고급 표시를 클릭 한 다음 새 변수 버튼을 클릭하여 지정할 수 있습니다.

사이트 배포 버튼을 클릭하면 Netlify가 지정한 빌드 및 배포 프로세스를 시작합니다. 배포 탭으로 이동하여 배포 로그에서 진행되는 프로세스를 볼 수 있습니다. 잠시 후 라이브 사이트 URL (예 : random-name.netlify.com)이 제공됩니다.

지속적인 배포

이제 사이트가 저장소에 연결되었으므로 Netlify는 사이트를 배포하고 Git 저장소에 푸시 할 때마다 게시합니다. 지속적인 배포는 Git 저장소를 사용할 때만 가능합니다.

2. 사이트 폴더 업로드

git을 사용하지 않고 Netlify에 사이트를 업로드하는 옵션도 있습니다.

프로덕션 빌드의 경우 gatsby 빌드 명령을 실행해야 합니다. Gatsby는 공용(public) 폴더에 프로덕션 사이트를 생성합니다. 빌드 프로세스 중에 CSS, JavaScript, HTML 및 이미지가 최적화 되어 이 폴더에 배치됩니다.

gatsby build

빌드가 완료되면 사이트를 Netlify에 업로드 할 준비가 된 것입니다. Netlify로 이동하여 어떤 방법으로 든 로그인하거나 등록하십시오. 로그인에 성공하면 아래와 같은 메시지가 표시됩니다.

Want to deploy a new site without connecting to Git?

          Drag and drop your site folder here

배포 프로세스를 시작하려면 Netlify 웹 사이트의 위 영역 위로 공용 폴더를 끌어서 놓기만 하면 됩니다. Netlify는 임의의 이름으로 새 사이트를 만든 다음 응용 프로그램 파일 업로드 및 호스팅을 시작합니다. 잠시 후 라이브 사이트 URL을 제공합니다. random-name.netlify.com.

alt text