App Engine을 사용하여 Google Cloud Platform에 React 앱 배포

전제 조건:

Node

활성화된 Google Cloud Platform account

gcloud CLI

시작하려면 npx를 사용하여 create-react-app을 사용하여 새 React 앱을 생성합니다.

npx create-react-app <app-name>

npx가 React 앱에 필요한 모든 파일을 생성했으면 다음을 수행하여 제대로 실행되는지 확인합니다.

cd <app-name>
npm start

즐겨찾는 브라우저에서 http://localhost:3000으로 이동합니다.
다음과 유사한 화면이 표시됩니다.



이제 앱이 실행 중이므로 프로덕션 빌드를 만들어 보겠습니다. 이렇게 하려면 다음을 실행하십시오.

npm run build

이 시점에서 React 관점에서 할 일이 없습니다. 다음 단계는 App Engine에서 새 프로젝트를 구성하는 것입니다. 그런 다음 Google Cloud SDK를 사용하여 새로 빌드한 React 앱을 GCP에 배포하기만 하면 됩니다.



다음은 GCP App Engine에서 새 프로젝트를 구성하는 첫 번째 부분을 수행하는 방법을 안내하는 일련의 스크린샷입니다.













단계를 성공적으로 수행했다면 위의 마지막 사진과 같은 Google App Engine 대시보드를 볼 수 있어야 합니다. 이것이 App Engine 웹 콘솔과 관련된 마지막 작업이었습니다. 이제 gcloud CLI 사용에 중점을 둘 것입니다. 다음을 실행하여 가지고 있는지 확인하십시오.

gcloud -v

설치하는 데 문제가 있는 경우 여기official guide가 있습니다.
이제 React 앱 폴더로 이동합니다. gcloud CLI가 앱을 App Engine에 배포하는 데 사용할 프로젝트 폴더의 루트에 새 app.yaml 파일을 만들어야 합니다. 파일을 생성한 후 다음 콘텐츠를 파일에 추가합니다(official source).

runtime: nodejs
env: flex
# This sample incurs costs to run on the App Engine flexible environment.
  # The settings below are to reduce costs during testing and are not appropriate
# for production use. For more information, see:
# https://cloud.google.com/appengine/docs/flexible/nodejs/configuring-your-app-with-app-yaml
manual_scaling:
  instances: 1
resources:
  cpu: 1
memory_gb: 0.5
disk_size_gb: 10

파일을 저장했는지 확인하고 이제 CLI를 사용할 준비가 되었습니다.

gcloud init

단계에 따라 계정, 지역을 추가하고 방금 생성한 프로젝트를 선택해야 합니다.

성공적으로 초기화되면 최종 최종 배포 명령을 실행할 수 있습니다.

gcloud app deploy

몇 분 후 "Deployed service [default] to"에 링크가 표시됩니다.



배포된 React 앱을 찾으려면 브라우저에서 방문하십시오. 여기 내 것이 있습니다.
챔프 축하해! 훌륭해! 🎉🎉🎉

다음은 이 기사에 사용된 React 앱과 YAML 파일이 포함된 git repo에 대한 link입니다. 읽어 주셔서 감사합니다! 💟📖

원본 출처: https://medium.com/better-programming/deploy-a-react-app-to-google-cloud-platform-using-google-app-engine-3f74fbd537ec