Step 0 : check on the summary

GCP App Engine

Let's just start from scratch with the new project, new repository :

Opening the new workspace in the ide, cloning the project, initializing Next.js application (see the guide for GCP Cloud Run )
Now, let's just open the doc on a new app creation
Enabling the API, as it's a new project.
The doc is cool, however I feel better with the 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.

Yes ! Now let's add the app.yaml from the reference, the minimal working version :

runtime: nodejs16

and the 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'

I've got the cloudbuild.yaml from the deploy to app engine doc
Enabling the API :

Service account permissions in the Cloud Build settings :

Trigger as for the Cloud Run (you may need to click on Manage Repositories, then on the dots right to the repository name and Add Trigger)

Let's commit, push and check. I have an error :

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

So I will go the IAM
And add Service Account User role to the cloudbuild account
Before :

After :

It worked, great !

OK, almost

Let's start the app on the port 8080, package.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"
  }
}

Commit - push - build, not so bad, but not so fast :

Checking logs in Cloud Shell :

gcloud app logs tail -s default

Looks like the app haven't been built :

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

Indeed, let's check the Building Node.js applications guide
and enhance 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'

Commit - push - build :

Almost there, mapping custom domain :

And finally :

Success!
If you have an experience to work on GCP and have a skill to craft the config files and turn the handles then it will be easier to go with App Engine, otherwise consider Cloud Run.

Blog

Serverless Containers vs Serverless Next.js SSR GCP App Engine

hexfloor

GCP App Engine

Join Our Newsletter. No Spam, Only the good stuff.

Related