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 runninggcloud 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 yourgcloud-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
Top comments (15)
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?sorry i just saw your question, can i see your yml?
file created .yml, just rename the file then run the command again
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?
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?
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?
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
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 :)
happy to hear you find it useful. have fun
@sakko any early access program for Singapore region is available please post here :) (DM request @steren in Twitter )
oh~ there is an early access? how can I get it?
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".
Hello,
Please, for example, bring to the Cloud
Frontend -> Nuxt
Backend -> Nodejs + Express API (MYSQL and File storage doc, img, etc ,.)
How to do?
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
We connect via firebase domain hosting also , and how to enable caching for web app? Any solution available via firebase hosting or domain connect