0단계: 확인

GCP 앱 엔진

새 프로젝트인 새 저장소로 처음부터 시작하겠습니다.



ide에서 새 작업 공간 열기, 프로젝트 복제, 응용 프로그램 초기화Next.js(에 대한 가이드 참조)
이제 doc on a new app creation을 열어보겠습니다.
새 프로젝트이므로 API를 사용 설정합니다.
문서는 멋지지만 CLI doc을 사용하면 기분이 더 좋아집니다.

gcloud config set project nextgcp-361410
Updated property [core/project].

gcloud app create
You are creating an app for project [nextgcp-361410].
WARNING: Creating an App Engine application for a project is irreversible and the region
cannot be changed. More information about regions is at
<https://cloud.google.com/appengine/docs/locations>.

Please choose the region where you want your App Engine application located:
Please enter your numeric choice:  11

Creating App Engine application in project [nextgcp-361410] and region [europe-west]....done.                      
Success! The app is now created. Please use `gcloud app deploy` to deploy your first app.

예 ! 이제 최소 작업 버전인 reference 에서 app.yaml 를 추가해 보겠습니다.

runtime: nodejs16

및 cloudbuild.yaml:

steps:
  - name: 'gcr.io/google.com/cloudsdktool/cloud-sdk'
    entrypoint: 'bash'
    args: ['-c', 'gcloud config set app/cloud_build_timeout 1600 && gcloud app deploy']
timeout: '1600s'

deploy to app engine doc에서 cloudbuild.yaml를 얻었습니다.
API 활성화:



Cloud Build 설정의 서비스 계정 권한:



Cloud Run에 대해 트리거(리포지토리 관리를 클릭한 다음 리포지토리 이름 오른쪽에 있는 점과 트리거 추가를 클릭해야 할 수 있음)



커밋하고 푸시하고 확인합시다. 오류가 있습니다.

ERROR: (gcloud.app.deploy) PERMISSION_DENIED: You do not have permission to act as '[email protected]'
- '@type': type.googleapis.com/google.rpc.ResourceInfo
  description: You do not have permission to act as this service account.
  resourceName: [email protected]
  resourceType: serviceAccount

그래서 나는 IAM
그리고 cloudbuild 계정에 Service Account User 역할을 추가합니다.
전에 :

후에 :

잘 되었어요!


좋아, 거의


포트 8080package.json에서 앱을 시작하겠습니다.

{
  "name": "nextgcp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start -p 8080",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "12.2.5",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "eslint": "8.23.0",
    "eslint-config-next": "12.2.5"
  }
}

커밋 - 푸시 - 빌드, 나쁘지는 않지만 그렇게 빠르지는 않습니다.


Cloud Shell에서 로그 확인:

gcloud app logs tail -s default

앱이 빌드되지 않은 것 같습니다.

2022-09-03 11:12:56 default[20220903t110848]  "GET / HTTP/1.1" 500
2022-09-03 11:12:56 default[20220903t110848]  ready - started server on 0.0.0.0:8080, url: http://localhost:8080
2022-09-03 11:12:57 default[20220903t110848]  info  - SWC minify release candidate enabled. https://nextjs.link/swcmin
2022-09-03 11:12:57 default[20220903t110848]  {"severity": "WARNING", "message": "App is listening on port 8080. We recommend your app listen on the port defined by the PORT environment variable to take advantage of an NGINX layer on port 8080."}\nError: Could not find a production build in the '/workspace/.next' directory. Try building your app with 'next build' before starting the production server. https://nextjs.org/docs/messages/production-start-no-build-id

과연, Building Node.js applications guide를 확인해 보자.
및 향상cloudbuild.yaml:

steps:
- name: node
  entrypoint: yarn
  args: ['install']
- name: node
  entrypoint: yarn
  args: ['run', 'build']
- name: 'gcr.io/google.com/cloudsdktool/cloud-sdk'
  entrypoint: 'bash'
  args: ['-c', 'gcloud config set app/cloud_build_timeout 1600 && gcloud app deploy']
timeout: '1600s'

커밋 - 푸시 - 빌드:



거의 다 왔습니다. mapping custom domain :



그리고 마지막으로 :



성공!
GCP 작업 경험이 있고 구성 파일을 제작하고 핸들을 돌리는 기술이 있다면 App Engine을 사용하는 것이 더 쉬울 것입니다. 그렇지 않으면 Cloud Run을 고려하십시오.