App Engine을 사용하여 Google Cloud Platform에 React 앱 배포
시작하려면 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
Reference
이 문제에 관하여(App Engine을 사용하여 Google Cloud Platform에 React 앱 배포), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/marwan01/deploy-a-react-app-to-google-cloud-platform-using-app-engine-5fok텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)