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