Deploying Nuxtjs on Google Cloud Run (Serverless)

Better cloud-build.yaml file pull older image before build. Save build time.

UPDATE

Cloud run now available in almost every region (including Singapore Hooooray!!!)

What and why?

I like NuxtJS and I use it a lot in many of my customer projects. I like it a lot and it's super easy to go serverless on Google Cloud Run. It's cheap and it support SSR as well. You should check pricing before you proceed though...

Prerequisite

I'm using MacOS. Please let me know if I'm missing anything.

• Install gcloud cli https://cloud.google.com/sdk/docs#mac
• Login to gcloud in command line by running gcloud auth login

There will be times in this tutorial when gcloud cli will ask you to enable things like cloud build / cloud run / etc. If you don't enable them, this tutorial won't work. If you do, make sure you know the upcoming cost.

Let's start

First, we will create an empty project. You might want to read this. https://nuxtjs.org/guide/installation

# or just run
npx create-nuxt-app cloud-run-demo

I like git, so let's commit first.

I want to know if it's working or not. Let's just try it out. Go into project directory and run npm run dev

Cloud run require process.env.PORT to be your application port. So let's change our server config. Also, please note that using express + cloud run require host to be 0.0.0.0 not localhost or 127.0.0.1.

  server: {
    port: process.env.PORT || 3000,
    host: "0.0.0.0",
    timing: false
  }

Add Dockerfile to build our project. You can change node version to match your project.

FROM node:13.6-alpine

ARG BUILD_ENV

RUN mkdir -p /usr/src/app
COPY package*.json /usr/src/app/
RUN cd /usr/src/app/; npm install
WORKDIR /usr/src/app
COPY . /usr/src/app

RUN npm run build

CMD [ "npm", "run", "start" ]

I like to config my cloud build in yaml. Let's do that by adding a file call cloud-build.yml (or anything else you like). You will need to change project-name to match your google gcloud-project-id. And container-name to whatever you want.

steps:
  - name: 'gcr.io/cloud-builders/docker'
    entrypoint: 'bash'
    args:
      - '-c'
      - |
        docker pull gcr.io/project-name/container-name:latest || exit 0
  - name: gcr.io/cloud-builders/docker
    timeout: 1200s
    args:
      [
        'build',
        '-f',
        'Dockerfile',
        '-t',
        'gcr.io/project-name/container-name',
        '--cache-from',
        'gcr.io/project-name/container-name:latest',
        '.',
      ]
timeout: 1200s
images:
  - gcr.io/project-name/container-name

Let's build our project on Google Cloud Build. don't forget to change project-name with your gcloud-project-id.

# build from yml config
gcloud builds submit --project "project-name" --config=./cloud-build.yaml

Finally let's deploy. Don't forget to change

• cloud-run-name service name (any name you like). It will show up on https://console.cloud.google.com/run.
• --region asia-northeast1 you can choose region to closest to your location.
• project-name to your gcloud-project-id
• --image gcr.io/project-name/container-name change it to match what you set in cloud-build.yaml

# deploying (rerun to redeploy)
gcloud beta run deploy cloud-run-name --region asia-northeast1 --project "project-name" --image gcr.io/project-name/container-name --platform managed

Now, you can visit that endpoint given in the console. Usually https://cloud-run-name-{some_hash}-uc.a.run.app

Or you can change the domain to something else. You should be able to find it here. https://console.cloud.google.com/run/domains

This is way too easy to deploy Serverless Nuxtjs app.

I believe you can do the same in both Nextjs or Gatsby as well. If you've done it, please share.

Again, let me know if I missed anything.

PLEASE GOOGLE, I NEED THIS IN SINGAPORE REGION.

SaKKo

Comments

[Badgyy]

Hello,

Im getting ERROR: (gcloud.builds.submit) interpreting ./cloud-build.yaml as build config: .steps[0].images: unused setting up all according to the tutorial, any idea to help?

[SaKKo]

sorry i just saw your question, can i see your yml?

[Hazem Khaled]

file created .yml, just rename the file then run the command again

[Ben]

Hi SaKKo, thanks for the tutorial this is what I was looking for.
However, I am getting this error:

Error response from daemon: Get gcr.io/v2/cloud-builder/docker/man... denied: Token exchange failed for project 'cloud-builder'. Please enable or contact project owners to enable the Google Container Registry API in Cloud Console at console.cloud.google.com/apis/api/... before performing this operation.

This API is enabled, I've checked. Any idea what's wrong?

[limjix]

Nice! I am also using the same method for my nuxt application. Love cloud run to the max!
Shoutout from Malaysia btw! Wish Cloud Run came nearer.

One thing I still can't figure out is why theres no need for nginx on cloud run containers. Any idea?

[Sadiqu Ali PK]

Hi,
Im getting
Deployment failed

ERROR: (gcloud.beta.run.deploy) Cloud Run error: Container failed to start. Failed to start and then listen on the port defined by the PORT environment variable. setting up all according to the tutorial, any idea to help?

[roryJcurve]

Thanks for this! got this up and running with no problem.

Ended up combining with firebase hosting (firebase.google.com/docs/hosting/c...) and now we have multiple apps running on the same domain ie our-domain/app1 and our-domain/app2

[Gaurav Navgire]

Hi Sakko, Thanks a ton for this tutorial. This worked just fine for me. I was looking for such kind of solution.
And yes I'm in process to figure out the Cloud Run pricing :)

[SaKKo]

happy to hear you find it useful. have fun

[Subrahmanya S M]

@sakko any early access program for Singapore region is available please post here :) (DM request @steren in Twitter )

[SaKKo]

oh~ there is an early access? how can I get it?

[Reham Habbas]

Got an error

Step #0: Pulling image: gcr.io/marketplace-304006/docker
Step #0: Using default tag: latest
Step #0: Error response from daemon: manifest for gcr.io/marketplace-304006/docker:latest not found: manifest unknown: Failed to fetch "latest" from request "/v2/marketplace-304006/docker/manifests/latest".

[u-jc]

Hello,

Please, for example, bring to the Cloud
Frontend -> Nuxt
Backend -> Nodejs + Express API (MYSQL and File storage doc, img, etc ,.)
How to do?

[SaKKo]

setup another server for your backend?
or if it support docker, you can deploy you APIs on Cloud Run, just make sure that your app export process.env.PORT to public

[Subrahmanya S M]

We connect via firebase domain hosting also , and how to enable caching for web app? Any solution available via firebase hosting or domain connect