Deploy your Next.js Application on Google App Engine in minutes.

Standard | Flexible Environment | Solving Cold Start Problem

Dipesh K.C.
Dec 22, 2020 · 6 min read

Hello Developers 👋. In this article, I will demonstrate how easily we can deploy the Next.js Application on Google App Engine within minutes.

Visit my other article if you want to deploy your Next.js Application on Firebase Platform using Cloud Function with Firebase Hosting.

Image for post
Image for post

2. Preparing a basic Next.js App

Let’s prepare a simple Next.js application to deploy on the google app Engine.

npx create-next-app
Image for post
Image for post

I will name my project as next-gae-deploy .

Image for post
Image for post

This is the initial folder structure we get by running the above command.

Now lets edit pages/index.js file to write a basic sample code to deploy.

Running App Locally

If we run yarn dev on our project, it runs successfully as expected.

Starting Deployment Process

Let's start by configuring the project on the google cloud Console.

Step1: Visit here and make a new project with your project name and organization.

Image for post
Image for post

Step 2: Under Compute section of your dashboard. Click on App Engine. Then click on Create Application.

Image for post
Image for post

Step 3: Select the desired region for you and click on Create app .

Image for post
Image for post

Step 4: Since we need Nodejs server for our Nextjs Application, we select Node.js as our language. There are two environments i.e. Standard and Flexible to choose from. For this article, I will show configuration with both standard and flexible. For now, we will go with the Standard environment. You can visit here for detailed comparisons.

Image for post
Image for post

Step 5: Enable billing.

Image for post
Image for post

That’s what we need to do for the cloud console configuration. Now we can get back to our code.

The main file we need to add is app.yml on the root of the project.

app.yaml

You configure your App Engine app’s settings in the app.yaml file. This file specifies how URL paths correspond to request handlers and static files. The app.yaml file also contains information about your app's code, such as the runtime and the latest version identifier.

The syntax of app.yaml is the YAML format.

Here I will show three different configurations. You can choose according to your requirements.

Configuration 1(Simple Standard Setup)

Let me explain this code briefly.

  • [Line 1]: There are two environments available to choose from i.e. Standard and Flexible. You can visit here for detailed comparisons. We will use the Standard environment.
  • [Line 2]: We need a Node.js server for handling our Nextjs project for cases like SSR. Here we go with the latest available Nodejs runtime i.e. nodejs14.
  • [Line 3]: Every App Engine application includes a default service. We can also deploy multiple projects in the same google app engine project with the help of different services.
  • [Line 4–7]: The handlers provides a list of URL patterns and descriptions of how they should be handled. But in our case, there are none of the static mappings. In our case For every request, /.* we want GAE to rely on Nextjs to indicate what files to load. So we mention script:auto for this use case. Similarly, Requests for a URL that match this handler that does not use HTTPS are automatically redirected to the HTTPS URL with the same path with the use of secure: always option.

Configuration 2 (Solves the cold start problem with Standard Environment)

In the previous configuration, we will feel a cold start if there is no request for a while[even 15–20 minutes]. Then the request after the first request will take around 10 seconds [waiting for the full duration of the new instance to be started].

Here we use warmup requests to reduce request and response latency during the time when your app’s code is being loaded to a newly created instance.

  • Line[3]: There are F1, F2, F4, F4_1G different options for instance_class in case of automatic scaling. You can select as per your requirements. Visit here for more details.
  • Line[7–9]: We have added automatic scaling here. Visit here for a more detailed explanation.

The min-idle-instances make reference to the instances that are ready to support your application in case you receive high traffic or CPU intensive tasks

The min_instances which are the instances used to process the incoming request immediately.

For this property to work we must make sure that warmup request is enabled. We have enabled on Line[5–6]. You can also create your handler that does any warmup logic that is needed by your app to the requests that are sent to the warmup requests URL i.e. /_ah/warmup. Visit here for example.

Configuration 3 (Flexible Environment)
Nextjs Features like Image Component with Optimization, Incremental Static Regeneration requires nextjs cache folder to be read/written on runtime. But our Standard Environment has read and write access only to the /tmp directory. So in such cases, we can use a flexible Environment. Basic Configuration is shown below. You can tweak them as per your requirements following this official documentation.

Note: This Setup has no cold start problem because it has a minimum 1 instance running(default:2)

  1. For default service
https://PROJECT_ID.REGION_ID.r.appspot.com

2. For custom service

https://SERVICE_ID-dot-PROJECT_ID.REGION_ID.r.appspot.com

.gcloudignore

We can create this file on the root of the project to indicate if we don't want to deploy certain files.

package.json

We will include start script[Line 8]. GAE runs on port 8080 and uses the start script by default in the package.json file.

Image for post
Image for post
//Before running this command,you need to install google cloud SDK.Follow this link1. yarn build
2. gcloud app deploy --project nextjs-deploy
OR you may add this script in your package.json"deploy": "yarn build && gcloud app deploy --project nextjs-deploy"and simply run yarn deploy
Image for post
Image for post

Option1: You can view logs by running the following command.

gcloud app logs tail -s default — project nextjs-deploy

Option2: Visiting your google console Dashboard

Under COMPUTE section of your project dashboard➡️ Select App Enine ➡️ Select Services➡️ Under your desired service ➡️ Under the Diagnose column select debug option on Tools Dropdown.

If you get lost on any part you can check my Github project.

That’s it for this article. This is the end of our short journey to deploying Next.js Application on Google App Engine. Hope this will help you with your project. Any kind of suggestions would be highly appreciable. Happy Coding ☺.

Image for post
Image for post

wesionaryTEAM

Visionary Development Team. We ❤︎ Technology!

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store