Deploying Nuxtjs on Google Cloud Run (Serverless)
Tags: nuxt, serverless, vue, cloudrun
Published: 2019-04-21 10:47:53

---
title: Deploying Nuxtjs on Google Cloud Run (Serverless)
published: true
description: Deploying Nuxtjs on Google Cloud Run. Quickest and easiest way to deploy Nuxtjs.
tags: nuxtjs,serverless,vuejs,cloudrun
---

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
```

![Create nuxt app](https://dev-to-uploads.s3.amazonaws.com/i/4o4fkd4u850mnfw3ej34.png)

I like git, so let's commit first.

![Commit initial code](https://dev-to-uploads.s3.amazonaws.com/i/ug5ahaw8p6j959yh9e7d.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/to3d4yrmcnh64tcgcljj.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/xab2smxfo93fybqao3fd.png)

```
  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.

![Add docker file](https://dev-to-uploads.s3.amazonaws.com/i/4vh5vvfmu66vm5br8mv4.png)

```docker
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.

![Add google cloud build config](https://dev-to-uploads.s3.amazonaws.com/i/etxkj0dht6c3y3lgehpe.png)

```yaml
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
```

![Cloud build](https://dev-to-uploads.s3.amazonaws.com/i/cs6u0iwnf3rywfebdbq1.png)

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
```

![Run container on cloud run](https://dev-to-uploads.s3.amazonaws.com/i/9ipfylmjqlcxd7kf8a1x.png)

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