Google 애플리케이션 엔진에 Create React 애플리케이션 배포

구축된 응용 프로그램을 실시간 서비스에 배치하는 과정은 많은 초보자들을 두려워하게 할 수 있다.이 강좌에서는 Create React App을 사용하여 구축된 React 응용 프로그램을 배포하는 과정을 설명합니다.이를 실현하는 데 필요한 절차와 이 두 가지 도구를 결합시켜 훌륭한 실시간 응용 프로그램을 만드는 방법을 살펴봅시다.

이 프레젠테이션에서 우리는 내가 국립공원 Pal팀의 일원으로 개발한 응용 프로그램을 사용할 것이다. 이것은 완전한 창고 응용 프로그램으로 앞부분에서 하나의 노드를 통해React를 실현할 것이다.js 서버는 Express를 백엔드로 사용합니다.Create-React 응용 프로그램의 가장 좋은 기능 중 하나는 백엔드 서버에서 제공할 정적 HTML 파일을 컴파일하는 것입니다.우선 구글 클라우드 애플리케이션 엔진을 설치하자.
우선, 구글 클라우드 플랫폼 계정을 만듭니다. 고맙게도 구글은 새로운 사용자에게 300달러의 계정 신용을 제공하여 당신의 응용 프로그램을 시작하고 실행할 수 있습니다!계정을 만들면 응용 프로그램에 새 항목을 만들 수 있습니다.너는 마음대로 너의 프로젝트에 이름을 붙일 수 있지만, 나는 네가 너의 사이트나 응용 프로그램에 따라 이름을 붙일 것을 건의한다.구글은 당신의 프로젝트를 설정하는 데 1분이 걸리지만, 일단 완성되면, 당신의 응용 엔진 실례를 만들어야 합니다.영역, 언어 및 환경을 선택하라는 메시지가 표시됩니다.이 프레젠테이션에서 나는 미국 중부 지역 Node를 선택했다.js 언어, 그리고 유연한 환경.다음은 참조할 수 있는 화면의 모양입니다.

일단 이 단계가 완성되면 구글 클라우드를 완성할 수 있습니다. 다음은 GoogleReact 응용 프로그램에서 성공적으로 배치할 수 있도록 변경해야 합니다.
Create-React 응용 프로그램 구조의 재미있는 부분은 로컬에서 프런트엔드 호스트를 만들 수 있고 백엔드를 만들고 로컬에서 관리할 수 있다는 것입니다.이것은 개발에 매우 유용하다. 왜냐하면 프런트엔드와 백엔드는 로컬 장치 내의 서로 다른 포트에 위탁되어 있기 때문이다. 그러나 언제 대중에게 응용 프로그램을 배치할지 결정할 때, 이것은 골치 아픈 문제가 된다.노드를 사용하여 Google App Engine에 애플리케이션을 배포하는 것이 가장 간단합니다.js 서버, 그리고 express를 통해 정적 HTML 파일을 제공합니다.네가 어떻게 이 점을 했는지 우리에게 보여 주어라.
응용 프로그램의 배치 버전을 설정하려면 React 응용 프로그램의 파일 구조를 변경해야 합니다.프로젝트의 홈 디렉터리에 별도의 백엔드 폴더를 만들어야 합니다.여기에서 모든 백엔드 파일을 이 폴더로 이동해야 합니다.이것은 구글 응용 프로그램 엔진에 배치된 폴더가 될 것이다.파일 구조는 다음 그림과 유사해야 합니다.

대단합니다. 우리가 최종적으로 응용 프로그램을 배치하기 전에, 지금 우리는 마지막 몇 가지 절차에 들어갔습니다.우리는 파일에 서비스를 제공하기 위해 주 서버 파일에 한 줄을 더 추가해야 한다.require 문 뒤에 있는 파일에서 코드에 다음 줄을 추가합니다.

app.use(express.static(__dirname + '/public/build'));

번영지금 우리 진짜 밥 하고 있어!Create React App은 훌륭한 내장 기능을 가지고 있습니다. React 코드를 구축 폴더에 쉽게 컴파일할 수 있습니다. 저희 노드에서 이 구축 폴더의 정적 파일에 서비스를 제공할 것입니다.js 서버는 우리가 위의 메인 서버 파일에 추가한 코드 줄을 통과합니다.이곳은 사람을 곤혹스럽게 할 수 있으니 반드시 따라해야 한다.터미널에서 다음 명령을 실행하여 React 코드를 컴파일해야 합니다.

npm run build

컴파일이 완료되면 파일은build라는 폴더에 저장됩니다.

이제 백엔드 폴더로 돌아가서public라는 새 폴더를 만들어야 합니다.이 폴더를 만든 후 전체 생성 폴더를 새로 만든 공용 폴더로 복사합니다.완성된 후에 우리가 해야 할 일은 응용 프로그램을 추가하는 것이다.yaml 파일은 우리 백엔드 폴더의 메인 디렉터리에 있습니다. 이것은 구글 응용 프로그램 엔진에 필요한 것입니다.이 예에서 응용 프로그램의 구조는yaml 파일은 다음과 같습니다.

runtime: nodejs
env: flex

manual_scaling:
  instances: 1
resources:
  cpu: 1
  memory_gb: 0.5
  disk_size_gb: 10

마지막으로, 그러나 가장 중요하지 않은 것은 아닐 것입니다. 터미널에서 다음 명령을 실행하기를 원할 것입니다

gcloud app deploy

응용 프로그램을 처음 배치하는 데는 시간이 걸릴 수 있습니다.인내심을 가지고 기다려 구글 단말기의 지시에 따라 조작하세요.일단 모든 것이 완성되면, 당신은 응용 프로그램의 새로운 URL을 얻을 수 있습니다.브라우저에서 URL을 탐색하고 새로 배포된 응용 프로그램을 보십시오!
나는 이 블로그가 당신에게Create-React 응용 프로그램과 구글 클라우드 플랫폼을 결합시켜 좋은 응용 프로그램을 만들고 배치하는 방법을 알려줄 수 있기를 바랍니다.만약 당신에게 또 어떤 문제가 있다면, 언제든지 질문하세요. 처음에 이것은 사람을 곤혹스럽게 하는 과정일 수도 있지만, 몇 번의 배치를 거친 후에 당신은 자신이 전문가라고 느낄 것입니다.