Serverless Containers vs Serverless Next.js SSR GCP App Engine
Tags: googlecloud, serverless, nextjs, react
Published: 2022-09-03 11:58:12

Step 0 : check on the [summary](https://dev.to/hexfloor/serverless-containers-vs-serverless-nextjs-ssr-on-aws-gcp-and-vercel-470d)

#GCP App Engine
Let's just start from scratch with the new project, new repository : 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wjyp7iz7peo8h9khiund.png)

Opening the new workspace in the ide, cloning the project, initializing `Next.js` application (see the guide for [GCP Cloud Run](https://dev.to/hexfloor/serverless-containers-vs-containerless-nextjs-ssr-gcp-cloud-run-4dgk) )
Now, let's just open the [doc on a new app creation](https://cloud.google.com/eclipse/docs/creating-new-webapp)
Enabling the API, as it's a new project.
The doc is cool, however I feel better with the [CLI doc](https://cloud.google.com/appengine/docs/standard/nodejs/console)

```
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](https://cloud.google.com/appengine/docs/standard/nodejs/config/appref), 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](https://cloud.google.com/build/docs/deploying-builds/deploy-appengine)
Enabling the API : 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ya94dm042y79hfobyhsb.png)

Service account permissions in the Cloud Build settings : 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w6axda6ndcs0ju34tthf.png)



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)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8qerrhqvwckv019d6jbc.png)

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](https://console.cloud.google.com/iam-admin/iam)
And add `Service Account User` role to the cloudbuild account
Before : 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ytser1gom1cyodjh9igp.png)
After : 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tkn7sblfwnsoheq58meb.png)
It worked, great !
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/su5llpuxs5pycek311zu.png)

OK, almost
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qd4ogxjpfx9fiu8qkbwh.png)


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 : 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/em21xy91khkzddcwn24w.png)
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](https://cloud.google.com/build/docs/building/build-nodejs#yarn)
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 : 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/of2kcyi7prn18xqixq63.png)

Almost there, [mapping custom domain](https://cloud.google.com/appengine/docs/legacy/standard/python/mapping-custom-domains) : 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q4cfmxnkgi6ap52bl4is.png)

And finally : 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wmfok5pcsvim9jv2ix90.png)

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.