개요

이번에는 React 기반의 정적 사이트 생성기인 Gatsby와 사이트를 게시하는 Netlify를 활용하여 폭 속도로 웹 애플리케이션을 배포하는 방법에 대해 씁니다.
※블로그는 템플릿 그대로 배포하고 있습니다.

프로젝트 만들기

Gatsby는 템플릿을 선택하여 프로젝트를 만들 수 있습니다.
이번에는 Netlify 템플릿이 있기 때문에 그쪽을 이용해 갑니다.
다른 템플릿은 여기에서 찾을 수 있습니다.

# GatsbyのCLIのインストール
npm install -g gatsby-cli

# プロジェクトの作成
# gatsby new [プロジェクト名] [GatsbyのテンプレートのGitHubのurl]
gatsby new ferretdayo.blog.io https://github.com/netlify-templates/gatsby-starter-netlify-cms

Netlify에 배포

아래 URL을 방문하여 Netlify에 배포할 준비를 하세요.
htps : // 아 p. 네 tぃfy. 이 m/s rt/에서 pぉy? Reposhi와 ry = htps : // Geteu b. 이 m / as chin G Reen /
액세스하면 이 화면이 표시됩니다.



여기 페이지에서 해주는 것은 다음 두 가지입니다.
1. GitHub와 Netlify의 협력
2. GitHub에 Netlify에 배포하는 리포지토리도 생성

여기에 리포지토리 이름을 입력하면 GitHub에 리포지토리가 만들어집니다.


그런 다음 대시보드가 ​​표시되고 Getting started 와 같이 진행합시다.

1. Your site is deployed

작성한 리포지토리에 대해 push합시다.

cd [作成したGatsbyのプロジェクト名]
git init
git remote add origin [対象のレポジトリのURL]
git push origin master

2. Custom domain is set

도메인이 없는 경우에는 하지 않아도 됩니다.
내가 이름 .com으로 도메인을 얻는 경우에 쓰고 있으므로 이름 .com이 아닌 분은 주의하십시오.

1. 우선, 이쪽으로부터 소유하고 있는 도메인을 입력합시다!
htps : // 어 p. 네 tぃfy. 코 m / 아코 톤 t / d ns / 세츠 p


2. 다음 DNS 레코드의 설정을 그대로 두십시오.


3. 이름 .com 측의 네임 서버를 설정합니다.
Netlify에서 다음의 4개를 네임서버 변경해 주세요라고 하기 때문에, 이름.com의 네임서버를 변경합니다.


따라서 .com 이름 ネームサーバの変更에서 설정합니다.


4.Netlify 측에서 DNS 레코드를 만듭니다.Settings > Domain Management 에서 DNS 설정 페이지를 엽니다.Check DNS configuration 를 클릭하면 모달이 나오므로 Create DNS Records 를 눌러 DNS 레코드를 생성합니다.


생성 후에는 다음과 같이 DNS 레코드가 증가하고 있다고 생각합니다.


이것으로 설정이 끝납니다.

3. Secure your site with HTTPS

버튼 누르면 Let's Encript로 HTTPS 설정을 해줍니다. 매우 간단합니다.

배포한 앱 확인

설정한 도메인에 액세스하면 안전하게 배포되었다고 생각합니다.