DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

SaKKo
SaKKo

Posted on • Updated on

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.

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
Enter fullscreen mode Exit fullscreen mode

Create nuxt app

I like git, so let's commit first.

Commit initial code

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

Test our code

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.

Add port config

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

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

Add docker file

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" ]
Enter fullscreen mode Exit fullscreen mode

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.

Add google cloud build config

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

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Cloud build

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
Enter fullscreen mode Exit fullscreen mode

Run container on cloud run

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

Top comments (15)

Collapse
 
badgyy profile image
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?

Collapse
 
sakko profile image
SaKKo

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

Collapse
 
hazemkhaled profile image
Hazem Khaled

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

Collapse
 
gauravnavgire profile image
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 :)

Collapse
 
sakko profile image
SaKKo

happy to hear you find it useful. have fun

Collapse
 
roryjcurve profile image
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

Collapse
 
limjix profile image
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?

Collapse
 
sadiqpang profile image
Sadiqu Ali PK • Edited on

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?

Collapse
 
ben_the_husi profile image
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?

Collapse
 
rehamhabbas profile image
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".

Collapse
 
sub8s profile image
Subrahmanya S M • Edited on

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

Collapse
 
sakko profile image
SaKKo

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

Collapse
 
artjcdev profile image
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?

Collapse
 
sakko profile image
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

Collapse
 
sub8s profile image
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

12 Gorgeous UI Components for Your Design Inspiration

>> Check out this classic DEV post <<