Azure Static Web Apps에 Gatsby 사이트 배포

이 문서에서는 Azure Static Web Apps에 Gatsby 웹 애플리케이션을 만들고 배포하는 방법을 보여줍니다. 최종 결과는 앱이 빌드되고 게시되는 방식을 제어하는 새로운 Static Web Apps(관련 GitHub Actions 포함)입니다.

이 자습서에서는 다음을 하는 방법을 알아볼 수 있습니다.

Azure를 구독하고 있지 않다면 시작하기 전에 Azure 체험 계정을 만듭니다.

필수 조건

Gatsby CLI(명령줄 인터페이스)를 사용하여 Gatsby 앱을 만듭니다.

터미널 열기
npx 도구를 사용하여 Gatsby CLI로 새 앱을 만듭니다. 몇 분이 걸릴 수 있습니다.
```
npx gatsby new static-web-app
```
새로 만든 앱으로 이동
```
cd static-web-app
```

Git 리포지토리 초기화

git init
git add -A
git commit -m "initial commit"

참고 항목

최신 버전의 Gatsby를 사용하는 경우 "engines": { "node": ">=18.0.0" }을 포함하도록 package.json을 수정해야 할 수 있습니다.

새 Azure Static Web Apps 리소스를 만들려면 GitHub에 리포지토리가 있어야 합니다.

gatsby-static-web-app이라는 https://github.com/new에서 빈 GitHub 리포지토리(추가 정보를 만들지 않음)를 만듭니다.
그런 다음, 방금 만든 GitHub 리포지토리를 로컬 리포지토리에 원격으로 추가합니다. 다음 명령에서 <YOUR_USER_NAME> 자리 표시자 대신 GitHub 사용자 이름을 추가해야 합니다.
```
git remote add origin https://github.com/<YOUR_USER_NAME>/gatsby-static-web-app
```
로컬 리포지토리를 GitHub로 푸시합니다.
```
git push --set-upstream origin main
```

다음 단계에서는 새 정적 사이트 앱을 만들어 프로덕션 환경에 배포하는 방법을 보여줍니다.

기본 탭에서 다음 값을 입력합니다.

속성	값
구독	Azure 구독 이름.
리소스 그룹	my-gatsby-group
이름	my-gatsby-app
플랜 유형	무료
Azure Functions API 및 스테이징 환경을 위한 영역	가장 가까운 지역을 선택합니다.
Source	GitHub

검토 + 만들기를 선택하여 세부 정보가 모두 올바른지 확인합니다.
만들기를 선택하여 App Service Static Web App 만들기를 시작하고 배포를 위한 GitHub Actions를 프로비전합니다.
배포가 완료되면 리소스로 이동을 선택합니다.
리소스 화면에서 URL 링크를 선택하여 배포된 애플리케이션을 엽니다. GitHub Actions가 완료되려면 1~2분 정도 기다려야 할 수 있습니다.

이 애플리케이션을 계속 사용하지 않을 경우 다음 단계를 통해 Azure Static Web App 리소스를 삭제할 수 있습니다.