Netlify에서 저렴한 JAMstack로 사이트 배포

본고에서 저는 귀하의 사이트를 어떻게 배치하는지 설명하고자 합니다. 개인 블로그와 같은 간단한 사이트든 소형 전자상거래와 같은 더욱 복잡한 사이트든 모두 저예산을 사용하고 미세한 CI/CD를 거친 것처럼 배치해야 합니다.
나는 이미 많은 사이트에서 이 창고를 사용한 적이 있는데, 이것은 매우 유용하다. 왜냐하면 사이트와 내용 자체의 코드는 모두 같은 VCS (버전 제어 시스템) 에 저장되어 있기 때문에 내용 변화의 추적도 있기 때문이다.
JavaScript와 React의 모든 단계를 이해하는 개발자는 본문의 절차를 따를 수 있습니다.
이전에 나는 글을 한 편 썼는데, 그 중에서 나는 하나를 만들었다. 그리고 여기서 우리는 사이트 응용 프로그램의 방식으로 이 프로젝트를 배치할 것이다.

GitLab을 사용하여 Netlify 구성

Netlify는

An intuitive git-based workflow. A powerful serverless platform.

실제로 당신이 해야 할 일은 저장소를 연결하고 응용 프로그램을 구축하는 방법을 설명하는 것입니다.입문급은 당신의 개인 프로젝트나 소규모 사이트에 충분한 기능을 제공한 후에 당신은 수요에 따라 서로 다른 비용 지불 서비스를 개발하고 사용할 수 있습니다.
우선, 프로젝트를 Git 서비스에 저장해야 한다. 이 서비스는 GitHub, GitLab 또는 Bitbucket이 될 수 있다.이 모든 기능은 Netlify 를 지원합니다.나는 무한한 사유 저장소를 무료로 사용할 수 있기 때문에 GitLab을 사용해 왔다. 그러나 최근에 상황이 바뀌었고, GitHub도 무료로 사유 환매를 제공했다.때로는 사이트의 내용과 구조를 공공 저장소에 넣고 싶지 않기 때문이다.

그리고 GitLab의 설명에 따라 코드를 올립니다.

git remote add origin [email protected]:username/projectpath.git
git push origin master

현재create your account in Netlify GitLab 계정으로 등록을 선택하면 GitLab에서 프로젝트를 검사하기 쉽습니다.
대시보드 또는 사이트 탭에서 "Git에서 새 사이트"버튼을 찾으면 저장소의 Git 서비스를 선택하는 페이지로 안내됩니다.소스를 선택하면 자격 증명을 요청하고 Netlify 저장소에 대한 액세스 권한을 부여하는 팝업 창이 열립니다.

이제 게시할 웹 사이트의 원본을 포함하는 저장소를 검색하고 선택할 수 있습니다.

세 번째 단계에서 Netlify는 저장소의 지점을 가져옵니다. 기본적으로 master 선택되지만, 다른 지점을 선택할 수 있습니다.그 다음에 매우 중요한 단계는 응용 프로그램을 구축하는 데 사용할 명령을 작성하는 것이다. 왜냐하면 우리의 응용 프로그램은 게이츠비 응용 프로그램이기 때문에build 명령은

gatsby build

동시에 입력Publish directorypublic에 쓰기

Deploy Site Netlify 를 클릭하여 애플리케이션을 구축하고 배치하는 프로세스를 시작할 때, 현재 특정한 사이트를 관리하기 위한 대시보드가 있습니다.기본적으로 Netlify는 웹 사이트에 무작위 이름을 만들고, 이 이름은 https://*.netlify.app 형식의 하위 영역에서 사용되며, 나중에 설정할 수 있습니다.

또한 Netlify는 플러그인, AWS Lambda 기능, 인증(Identity), 폼, 미디어 저장 및 분석 등 웹 사이트에 위탁 관리를 제외한 다른 서비스를 제공합니다.

도메인 구성

보시다시피 제 사이트 이름은 objective-fermi-eca7f7이지만 기억하기 쉬운 사이트로 바꿀 수 있습니다.사이트 설정 > 도메인 관리로 이동

새 이름은 항상 netlify.app의 하위 도메인에 사용되므로 웹 사이트에서 기본적으로 HTTPS를 사용합니다.
너도 자신의 도메인 이름을 사용할 수 있다. 이것은 두 가지 방식으로 실현할 수 있다.Netlify를 통해 도메인을 구매할 수 있습니다. Netlify는 도메인 기록을 처리하고 사용자 정의 도메인을 Netlify 하위 도메인으로 가리키기 시작합니다.

단, 만약에 하나의 필드를 가지고 있거나 다른 DNS 공급자를 사용한다면, documentation of Netlify regarding that configuration 의 설명에 따라 a기록 (apex domain) 을 설정해야 합니다. 이것은 두 가지 다른 방식으로 완성할 수 있습니다. 구체적으로는 DNS 공급자에 달려 있습니다.

환경 변수

이제 우리 프로그램에서 우리는 API에서 온 데이터를 사용하고 코드에 기밀을 저장하지 않는다는 것을 가정해 봅시다. 그러면 우리는 어떻게 기밀을 구축에 전달합니까?
따라서 환경 변수를 사용하여 사이트 설정 > 구축 및 배치 > 환경에 들어간 다음 편집 변수를 누르면 환경 변수를 추가하거나 편집하거나 삭제할 수 있습니다.우리의 프로젝트는 게이츠비로 개발되었기 때문에 변수명의 접두사는 반드시 GATSBY_이어야 한다.

Netlify 양식 사용

어떤 사이트에서든 방문자는 사이트 소유자와 연락할 수 있다. 보통 '연락' 표를 통해 연락하거나 투표를 해야 할 수도 있지만, 이 표들은 반드시 백엔드 어딘가에서 처리해야 한다. 우리가 알고 있는 바와 같이 현재 우리는 없다.
만약 우리가 맞춤형 업무 논리를 실현해야 한다면, 우리는 AWS Lambda 함수를 바탕으로 하는 Functions 특성을 사용할 수 있다.그러나 우리는 본문에서 그것들을 토론할 생각은 없다. 왜냐하면 우리는 더욱 간단한 표 처리를 사용하고 싶기 때문이다.

Netlify 문서에 따르면 <form> 탭에 속성 data-netlify="true" 을 추가하기만 하면 탭에는 name 속성이 필요합니다. 탭마다 다른 name 이 있어야 합니다. Netlify는 받은 정보를 추적하고 name="form-name hhidden 입력을 포함하며, 저희 폼의 이름을 값으로 사용하기 때문입니다.

스팸메일 타격

그러나 이렇게 하면 스팸메일을 많이 받을 수 있기 때문에, 우리는 항상 HTML에 더 많은 설정을 추가해야 한다.<form> 표시줄에 다른 속성netlify-honeypot="bot-field"을 추가합니다. 이 값bot-field은 당신이 선택한 것이지만, 이 값은 폼의 숨겨진 입력에 존재해야 합니다.마지막으로 양식은 다음과 같습니다.

<form name="contact-form" action="/form-success/" method="POST" netlify-honeypot="bot-field" data-netlify="true">

<!-- Any other fields and HTML markup -->

  <input type="hidden" name="form-name" value="contact-form" />
  <input type="hidden" name="bot-field" />

  <div>
    <button type="submit">Send</button>
  </div>
</form>

Netlify가 폼을 처리한 후에 사용자를 이 경로로 다시 지정하기 위해서 action 속성을 추가했습니다. Gatsby에서 페이지를 만들고 사용자 정의 성공 메시지를 표시할 수 있습니다.
AJAX를 사용하여 폼을 제출할 수도 있습니다. check out this 또는 reCAPTCHA 2 challenge 을 사용하면 안전성을 향상시키고 싶을 뿐입니다.
주의: 표에 사용 제한이 있습니다. check out the pricing

다른 분기 배포에 대한 미리 보기

마지막!사이트에 대한 변경 사항을 직접 발표하고 싶지 않을 수도 있습니다. 코드에 포함되지 않은 내용이나 완료되지 않은 작업이 있기 때문일 수도 있지만, 서버에서 코드를 테스트하거나 다른 사람이 당신의 일을 볼 수 있도록 허락해야 합니다.
따라서 구축 프로그램의 배치 상하문을 허용하고 다른 선택한 지점에서 미리 보기를 만들 수 있습니다. 그리고 선택한 지점에 영향을 미치거나 통합하거나 전송하면 새로운 구축을 촉발할 수 있습니다.

또한 웹 사이트에 사용자 정의 필드를 설정한 후 모든 지점에 하위 필드를 설정할 수 있습니다.

결론

본고에서 소개한 모든 기능은 무료로 사용할 수 있으며 사이트의 도메인 이름 비용만 지불하면 더욱 싸게 사용할 수 있다. 이것은 공급자와 최고급 도메인 이름에 달려 있다.
나는 네가 그것을 좋아하고 많은 항목을 만들 수 있기를 바란다. 왜냐하면 네가 필요로 하기 때문이다😃