Gatsby를 AWS에 배포

Gatsby는 새로운 React 애플리케이션을 시작하고 실행하려는 개발자가 선택하는 도구로 빠르게 자리 잡고 있습니다.

For a walkthrough of how to do this in just 56 seconds, check out the video .

Gatsby가 즉시 제공하는 속도, 스마트 기본 구성 및 개발 용이성의 조합은 초기에 웹팩 구성을 수동으로 구성하는 Create React App으로 우리가 가져간 점프와 유사하게 이전보다 한 단계 발전했습니다. .

이 게시물에서는 Amplify Console을 사용하여 다음 Gatsby 사이트를 AWS에 배포하는 방법을 알아봅니다.

증폭이란 무엇입니까

Amplify는 단순한 클라이언트 프레임워크로 시작했지만 훨씬 더 발전했습니다. 이제 CLI, 콘솔 및 클라이언트 프레임워크로 구성됩니다.

CLI를 사용하면 명령줄에서 직접 새 클라우드 서비스를 만들고 구성할 수 있습니다. 경험은 이러한 서비스를 스캐폴드할 수 있다는 점에서 Rails과 유사하며 필요에 맞게 업데이트할 수 있는 독단적인 구성 세트가 제공됩니다.

클라우드 서비스를 만든 후에는 Amplify 클라이언트를 사용하여 이러한 서비스에 연결하고 상호 작용할 수 있습니다.

마지막으로, 애플리케이션을 시작할 준비가 되면 Amplify 콘솔은 호스팅 및 지속적인 배포와 관련된 도구 모음을 제공하여 진행합니다.

이 두 기술을 결합하는 방법을 살펴보겠습니다.

시작하기

시작하려면 Gatsby CLI 또는 npx &를 사용하여 새 Gatsby 프로젝트를 만든 다음 새 디렉터리로 변경합니다.

npx gatsby new GatsbyAmplify

cd GatsbyAmplify

애플리케이션이 생성되면 새 GitHub 리포지토리를 생성하고 프로젝트를 리포지토리로 푸시합니다.

git init

git remote add origin [email protected]:<username>/<projectname>.git

git add .

git commit -m 'initial commit'

git push origin master

증폭 콘솔

이제 GitHub 프로젝트가 생성되었으므로 Amplify Console 에 로그인할 수 있습니다.

여기에서 배포 아래에서 시작하기를 클릭할 수 있습니다.



다음으로 GitHub를 리포지토리로 선택하고 다음을 클릭합니다.



그런 다음 방금 만든 새 리포지토리의 mater 분기를 연결하고 다음을 클릭합니다.



이 보기에서 기본 빌드 설정을 검토하고 다음을 클릭하여 계속할 수 있습니다.



마지막으로 앱을 배포할 준비가 되면 배포를 검토하고 저장 및 배포를 클릭할 수 있습니다.



배포가 성공하면 다음과 같이 표시됩니다.



배포 세부 정보를 보려면 브랜치 이름(이 경우 마스터)을 클릭합니다.

이 보기에서는 앱을 볼 수 있는 링크와 다른 장치에서 앱의 스크린샷을 포함하여 배포에 대한 세부 정보를 볼 수 있습니다.

새 빌드 시작

이제 앱이 배포되었으므로 한 단계 더 나아가 보겠습니다. Amplify 콘솔은 마스터 브랜치를 자동으로 감시하고 새 코드가 병합될 때마다 새 빌드를 시작합니다. 이것을 테스트해 봅시다.
src/pages/index.js를 열고 다음 줄을 바꿉니다.

<h1>Hi people</h1>

이것으로:

<h1>Hello from Amplify</h1>

파일을 저장하고 마스터 브랜치에 변경 사항을 푸시합니다.

git add .

git commit -m 'updated heading'

git push origin master

이제 Amplify 콘솔로 돌아가면 새 빌드가 시작된 것을 볼 수 있습니다.



빌드가 완료되고 앱을 실행하면 이제 새 제목이 표시됩니다.

다음 단계

이제 Amplify 콘솔 작업에 익숙해졌으므로 다음 단계는 무엇입니까?

Gatsby 앱에 인증을 추가하는 데 관심이 있다면 내가 게시한 this Gatsby Auth Starter를 확인하십시오.

Gatsby 앱에 새 기능(예: 인증 또는 GraphQL API)을 추가하는 데 관심이 있는 경우 Amplify CLI & Amplify Client libraries 을 확인하십시오.

또한 여러 환경 또는 팀과 작업하는 데 관심이 있을 수 있습니다. 그렇다면 팀을 시작하고 실행하는 방법에 대한 the documentation을 확인하거나 제가 작성한 this post을 살펴보십시오.

My Name is . I am a Developer Advocate at Amazon Web Services working with projects like AWS AppSync and AWS Amplify. I specialize in cross-platform & cloud-enabled application development.