Use the brand new Cloud Run service to turn any Docker 🐋 image into a serverless microservice on Google Cloud Platform. In this demo, we dockerize and deploy a server-rendered Nuxt/Vue app to Firebase Hosting https://fireship.io/lessons/firebase-microservices-with-cloud-run/

Cloud Run https://cloud.google.com/run/
Nuxt https://nuxtjs.org/
Firebase Microservices https://firebase.google.com/docs/hosting/cloud-run

#cloudrun #docker #serverless
2024-02-04T06:50:22.061Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
3d58d96c-8657-4d8d-8945-9928c27d2e2a
83ae4a7a9fd2f530cdd036d3bc82c719c077e53e83c837ac186d16640d6ef781
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Yesterday, GCP announced a very exciting new product called Cloud Run.
It's a service that allows you to convert any back end code written in any programming language with any dependencies into a serverless function.
This means you can deploy fully managed microservices that will to automatically, while only paying for the actual resources that you use.
In today's video, I'll show you how to take a server side rendered JavaScript cation, containerize it with Docker, deploy it to Cloud Run, and then hook it up to Firebase Hosting.
If you're new here, like and subscribe, and you can grab the full walkthrough from Fireship IO.
Out.
I'm really excited about Cloud Run because it's the service I've been wishing for ever since I started working with serverless functions.
The single biggest problem with serverless has always been the limitation of the runtime.
Most Cloud providers only offer a few different programming languages, and if you need any special dependencies in your runtime, then you're basically out of luck.
Your only real option at that point is to provision a virtual machine or use something like App Engine to deploy your code.
And those resources are always online, which means you're always paying for them, and you also have to worry about scaling them up and down.
Cloud Run is basically the best of both worlds and really the future of cloud computing in general in my opinion.
All you have to do as a developer is write your code and then wrap it in a Docker image.
The one thing to keep in mind though is that your code needs to be stateless.
In other words, you can't be saving permanent files to the file system or be running a SQL database and expect to have access to that data later.
That That shouldn't be a problem because you should be building stateless applications anyway while using things like Cloud Storage, Firestore, or Cloud SQL to manage your persistent data.
Now Now let's take a look at a few things that you might wanna start using Cloud Run for.
The first thing is server side rendering JavaScript applications.
I'm going to show you how to do this with Nuxt JS and Vue, but the same principles apply to Angular Universal or Next.
Js with React.
You could also hypothetically use it to build a more traditional web application like, say, WordPress or Ruby on Rails as long as you keep the database outside of the container.
And I find this one really interesting because that means you could have a WordPress site hosted on Firebase Hosting.
And another use case for Cloud Run would just be to create RESTful APIs or even GraphQL APIs.
And feel free to do it in whatever programming language you want.
Now let's go ahead and take a look at a full example from start to finish.
We're going to take this Nuxt JS app, which is just a Vue app that's server side rendered with Express JS.
We'll create a Docker image for it and then deploy it as a microservice to Cloud Run.
And as a final touch, I'll show you how to integrate it with Firebase Hosting.
To follow along with this lesson, you'll need to have Docker installed on your local system as well as the Google Cloud SDK.
First, we need to create an app or a microservice that we can deploy.
I'll be using Nuxt JS for this demo, and the reason I chose Nuxt is because it's really easy to get started with server side rendering.
From the command line, we run npx create nuxt app, and and then it will give us a handful of options that we can run through.
Mostly, we'll just select the defaults here.
The only important thing is to select universal as the rendering mode.
From there, we can open it up in Versus Code and then run npm run dev to serve the app locally.
That's just running an Express JS server with Node, and you should see something that looks like this in the browser on localhost 3000.
I'm not going to spend any time changing the underlying Nuxt code.
It's already ready to go.
We just need to Dockerize it.
I'm I'm not going to get into the fundamentals of Docker in this video, but you can think of an image as an executable of your application.
We create this image by defining a Docker file, and in that file, we define a series of steps required to build the actual virtual machine or container that runs our code.
So even if you've never used Docker or it's actually very intuitive and easy to write a Dockerfile because you're basically just doing the same things that you would normally do from the command line to run your app.
Go ahead and create a Dockerfile in the root of the application, and the first step in any Dockerfile is to define the base image.
This is usually just a minimal operating system like a Linux distro, or For our case, since we're building a Node app, we'll use the Node 10 image, which is just a Linux distro with Node version 10 installed.
You can think of the steps in a Dockerfile similar to the steps that you would run from the command line.
For Cloud Run, we're going to set the working directory as user source app.
That's kind of like CD ing into a directory, and then we'll set an environment variable called port.
This environment variable is very important in this case because Cloud Run is going to be looking for this port and expose it so you can actually interact with the service after it's deployed.
And we'll also define a host environment variable because Nuxt will be looking for the host in the port to determine how to serve the app.
The next thing we'll do is Copy the package JSON files into the working directory, and then we'll run npm install only for our production dependencies.
From there, we'll copy all the source code from our local project to the working directory.
Then we'll run npm build to build the production Nuxt app and then npm start, which is the command that actually starts the service in this container.
So that's our entire Dockerfile.
Now that we have that complete, we want to build the image itself.
We can run Docker build and then point to the directory that contains the Dockerfile.
That's going to build out the image in a series of steps or layers, and now Docker knows how to reproduce our code so it can scale to an infinite number of containers.
After that's done, you'll notice it gives us an image ID down here at the bottom.
You can use that ID to run the container locally, which is generally a good idea just to make sure everything's working before you deploy it.
You can do that with Docker run, and then you should see the same Nuxt app being served on local host 8080.
Now that we know that everything's working properly, we need to tag this image and then upload it to the container registry on GCP.
We can do that by first running Docker tag followed by the image ID and then followed by gcr.io slash your project ID slash whatever you wanna call this service.
That associates the image with this URL, then you can run Docker push to actually upload it to that URL.
That's going to take a few minutes, but but when it's finished, you can go to the GCP console and see it in the container registry.
And just a side note, you can use Cloud Build to entirely automate this process if you don't want to do it manually like I just showed you, and I made a video all about that a few weeks ago.
The next step is to take this image and deploy it as a microservice with Cloud Run.
Head over to the container registry on GCP and verify that the image that you just uploaded is available there.
From there, head over to Cloud Run, and we'll create a new service by clicking on the create service button.
That will give us the option to select a container image URL, which we can do for our Nuxt server.
Then just give it a name and a location, and then make sure to check the button for allow unauthenticated invocations.
This is a public app, so we want anybody to be able to access the service.
It'll take a few minutes to finish, but when it's done, you should be able to see the logs coming from the container.
And then you'll see a URL that we can use to access the service over HTTP and if we open it in a browser, we should see the same exact Nuxt app that we were working with locally.
Now at this point, we could map the service domain to our own custom domain, and that can be done directly through the Cloud Run console.
But Cloud Run is also integrated with Firebase, so we can actually map the service to our Firebase hosting account.
At this point, I'm assuming you have the Firebase command line tools installed, then run firebase init hosting from inside of the Nuxt app.
You can select all the default options, then choose no when asked if it's a single page application.
Firebase will automatically create a public directory.
You wanna go ahead and keep that directory, but delete the index HTML that's inside it.
Firebase Hosting will give a higher priority to this index HTML file than it will to rewrites.
And what we're actually doing here is rewriting all of our traffic to that microservice endpoint.
We do that by going into the Firebase JSON file, add a rewrites array, and then define an object that has a property of source, which points to star star, which will just capture all of the routes in this app, and then a second property called run which will point to the service ID or the service name that we defined in Cloud Run.
From there, we just need to run Firebase deploy only hosting.
And now we have a Nuxt app deployed to Firebase Hosting with full server side rendering.
And like I mentioned earlier, you can do the same thing with Angular Universal or React Next or whatever you want.
But more importantly, Cloud Run basically removes all the limitations that we used to face when building serverless apps.
I'm gonna go ahead and wrap things up there, but expect more Cloud Run videos in the future because that opens the door to all kinds of interesting possibilities.
If this video helped you, please like and subscribe, and consider becoming a pro member at FireShip IO to get access to even more content.
Thanks for watching, and I will talk to you soon.

Speaker 0: Yesterday, GCP announced a very exciting new product called Cloud Run. It's a service that allows you to convert any back end code written in any programming language with any dependencies into a serverless function. This means you can deploy fully managed microservices that will to automatically, while only paying for the actual resources that you use. In today's video, I'll show you how to take a server side rendered JavaScript cation, containerize it with Docker, deploy it to Cloud Run, and then hook it up to Firebase Hosting. If you're new here, like and subscribe, and you can grab the full walkthrough from Fireship IO.

Out. I'm really excited about Cloud Run because it's the service I've been wishing for ever since I started working with serverless functions. The single biggest problem with serverless has always been the limitation of the runtime. Most Cloud providers only offer a few different programming languages, and if you need any special dependencies in your runtime, then you're basically out of luck. Your only real option at that point is to provision a virtual machine or use something like App Engine to deploy your code.

And those resources are always online, which means you're always paying for them, and you also have to worry about scaling them up and down. Cloud Run is basically the best of both worlds and really the future of cloud computing in general in my opinion. All you have to do as a developer is write your code and then wrap it in a Docker image. The one thing to keep in mind though is that your code needs to be stateless. In other words, you can't be saving permanent files to the file system or be running a SQL database and expect to have access to that data later.

That That shouldn't be a problem because you should be building stateless applications anyway while using things like Cloud Storage, Firestore, or Cloud SQL to manage your persistent data. Now Now let's take a look at a few things that you might wanna start using Cloud Run for. The first thing is server side rendering JavaScript applications. I'm going to show you how to do this with Nuxt JS and Vue, but the same principles apply to Angular Universal or Next. Js with React.

You could also hypothetically use it to build a more traditional web application like, say, WordPress or Ruby on Rails as long as you keep the database outside of the container. And I find this one really interesting because that means you could have a WordPress site hosted on Firebase Hosting. And another use case for Cloud Run would just be to create RESTful APIs or even GraphQL APIs. And feel free to do it in whatever programming language you want. Now let's go ahead and take a look at a full example from start to finish.

We're going to take this Nuxt JS app, which is just a Vue app that's server side rendered with Express JS. We'll create a Docker image for it and then deploy it as a microservice to Cloud Run. And as a final touch, I'll show you how to integrate it with Firebase Hosting. To follow along with this lesson, you'll need to have Docker installed on your local system as well as the Google Cloud SDK. First, we need to create an app or a microservice that we can deploy.

I'll be using Nuxt JS for this demo, and the reason I chose Nuxt is because it's really easy to get started with server side rendering. From the command line, we run npx create nuxt app, and and then it will give us a handful of options that we can run through. Mostly, we'll just select the defaults here. The only important thing is to select universal as the rendering mode. From there, we can open it up in Versus Code and then run npm run dev to serve the app locally.

That's just running an Express JS server with Node, and you should see something that looks like this in the browser on localhost 3000. I'm not going to spend any time changing the underlying Nuxt code. It's already ready to go. We just need to Dockerize it. I'm I'm not going to get into the fundamentals of Docker in this video, but you can think of an image as an executable of your application.

We create this image by defining a Docker file, and in that file, we define a series of steps required to build the actual virtual machine or container that runs our code. So even if you've never used Docker or it's actually very intuitive and easy to write a Dockerfile because you're basically just doing the same things that you would normally do from the command line to run your app. Go ahead and create a Dockerfile in the root of the application, and the first step in any Dockerfile is to define the base image. This is usually just a minimal operating system like a Linux distro, or For our case, since we're building a Node app, we'll use the Node 10 image, which is just a Linux distro with Node version 10 installed. You can think of the steps in a Dockerfile similar to the steps that you would run from the command line.

For Cloud Run, we're going to set the working directory as user source app. That's kind of like CD ing into a directory, and then we'll set an environment variable called port. This environment variable is very important in this case because Cloud Run is going to be looking for this port and expose it so you can actually interact with the service after it's deployed. And we'll also define a host environment variable because Nuxt will be looking for the host in the port to determine how to serve the app. The next thing we'll do is Copy the package JSON files into the working directory, and then we'll run npm install only for our production dependencies.

From there, we'll copy all the source code from our local project to the working directory. Then we'll run npm build to build the production Nuxt app and then npm start, which is the command that actually starts the service in this container. So that's our entire Dockerfile. Now that we have that complete, we want to build the image itself. We can run Docker build and then point to the directory that contains the Dockerfile.

That's going to build out the image in a series of steps or layers, and now Docker knows how to reproduce our code so it can scale to an infinite number of containers. After that's done, you'll notice it gives us an image ID down here at the bottom. You can use that ID to run the container locally, which is generally a good idea just to make sure everything's working before you deploy it. You can do that with Docker run, and then you should see the same Nuxt app being served on local host 8080. Now that we know that everything's working properly, we need to tag this image and then upload it to the container registry on GCP.

We can do that by first running Docker tag followed by the image ID and then followed by gcr.io slash your project ID slash whatever you wanna call this service. That associates the image with this URL, then you can run Docker push to actually upload it to that URL. That's going to take a few minutes, but but when it's finished, you can go to the GCP console and see it in the container registry. And just a side note, you can use Cloud Build to entirely automate this process if you don't want to do it manually like I just showed you, and I made a video all about that a few weeks ago. The next step is to take this image and deploy it as a microservice with Cloud Run.

Head over to the container registry on GCP and verify that the image that you just uploaded is available there. From there, head over to Cloud Run, and we'll create a new service by clicking on the create service button. That will give us the option to select a container image URL, which we can do for our Nuxt server. Then just give it a name and a location, and then make sure to check the button for allow unauthenticated invocations. This is a public app, so we want anybody to be able to access the service.

It'll take a few minutes to finish, but when it's done, you should be able to see the logs coming from the container. And then you'll see a URL that we can use to access the service over HTTP and if we open it in a browser, we should see the same exact Nuxt app that we were working with locally. Now at this point, we could map the service domain to our own custom domain, and that can be done directly through the Cloud Run console. But Cloud Run is also integrated with Firebase, so we can actually map the service to our Firebase hosting account. At this point, I'm assuming you have the Firebase command line tools installed, then run firebase init hosting from inside of the Nuxt app.

You can select all the default options, then choose no when asked if it's a single page application. Firebase will automatically create a public directory. You wanna go ahead and keep that directory, but delete the index HTML that's inside it. Firebase Hosting will give a higher priority to this index HTML file than it will to rewrites. And what we're actually doing here is rewriting all of our traffic to that microservice endpoint.

We do that by going into the Firebase JSON file, add a rewrites array, and then define an object that has a property of source, which points to star star, which will just capture all of the routes in this app, and then a second property called run which will point to the service ID or the service name that we defined in Cloud Run. From there, we just need to run Firebase deploy only hosting. And now we have a Nuxt app deployed to Firebase Hosting with full server side rendering. And like I mentioned earlier, you can do the same thing with Angular Universal or React Next or whatever you want. But more importantly, Cloud Run basically removes all the limitations that we used to face when building serverless apps.

I'm gonna go ahead and wrap things up there, but expect more Cloud Run videos in the future because that opens the door to all kinds of interesting possibilities. If this video helped you, please like and subscribe, and consider becoming a pro member at FireShip IO to get access to even more content. Thanks for watching, and I will talk to you soon.
Yesterday, GCP announced a very exciting new product called Cloud Run. It's a service that allows you to convert any back end code written in any programming language with any dependencies into a serverless function. This means you can deploy fully managed microservices that will to automatically, while only paying for the actual resources that you use.
software development
In today's video, I'll show you how to take a server side rendered JavaScript cation, containerize it with Docker, deploy it to Cloud Run, and then hook it up to Firebase Hosting. If you're new here, like and subscribe, and you can grab the full walkthrough from Fireship IO. Out. I'm really excited about Cloud Run because it's the service I've been wishing for ever since I started working with serverless functions. The single biggest problem with serverless has always been the limitation of the runtime. Most Cloud providers only offer a few different programming languages, and if you need any special dependencies in your runtime, then you're basically out of luck.
Your only real option at that point is to provision a virtual machine or use something like App Engine to deploy your code. And those resources are always online, which means you're always paying for them, and you also have to worry about scaling them up and down. Cloud Run is basically the best of both worlds and really the future of cloud computing in general in my opinion. All you have to do as a developer is write your code and then wrap it in a Docker image. The one thing to keep in mind though is that your code needs to be stateless. In other words, you can't be saving permanent files to the file system or be running a SQL database and expect to have access to that data later. That That shouldn't be a problem because you should be building stateless applications anyway while using things like Cloud Storage, Firestore, or Cloud SQL to manage your persistent data.
internet
software development
software
data management
infrastructure
computers
networking
Now Now let's take a look at a few things that you might wanna start using Cloud Run for. The first thing is server side rendering JavaScript applications. I'm going to show you how to do this with Nuxt JS and Vue, but the same principles apply to Angular Universal or Next. Js with React. You could also hypothetically use it to build a more traditional web application like, say, WordPress or Ruby on Rails as long as you keep the database outside of the container. And I find this one really interesting because that means you could have a WordPress site hosted on Firebase Hosting. And another use case for Cloud Run would just be to create RESTful APIs or even GraphQL APIs.
And feel free to do it in whatever programming language you want. Now let's go ahead and take a look at a full example from start to finish. We're going to take this Nuxt JS app, which is just a Vue app that's server side rendered with Express JS. We'll create a Docker image for it and then deploy it as a microservice to Cloud Run.
software
And as a final touch, I'll show you how to integrate it with Firebase Hosting. To follow along with this lesson, you'll need to have Docker installed on your local system as well as the Google Cloud SDK. First, we need to create an app or a microservice that we can deploy. I'll be using Nuxt JS for this demo, and the reason I chose Nuxt is because it's really easy to get started with server side rendering. From the command line, we run npx create nuxt app, and and then it will give us a handful of options that we can run through. Mostly, we'll just select the defaults here. The only important thing is to select universal as the rendering mode. From there, we can open it up in Versus Code and then run npm run dev to serve the app locally. That's just running an Express JS server with Node, and you should see something that looks like this in the browser on localhost 3000. I'm not going to spend any time changing the underlying Nuxt code. It's already ready to go. We just need to Dockerize it. I'm I'm not going to get into the fundamentals of Docker in this video, but you can think of an image as an executable of your application. We create this image by defining a Docker file, and in that file, we define a series of steps required to build the actual virtual machine or container that runs our code. So even if you've never used Docker or it's actually very intuitive and easy to write a Dockerfile because you're basically just doing the same things that you would normally do from the command line to run your app. Go ahead and create a Dockerfile in the root of the application, and the first step in any Dockerfile is to define the base image. This is usually just a minimal operating system like a Linux distro, or For our case, since we're building a Node app, we'll use the Node 10 image, which is just a Linux distro with Node version 10 installed. You can think of the steps in a Dockerfile similar to the steps that you would run from the command line. For Cloud Run, we're going to set the working directory as user source app. That's kind of like CD ing into a directory, and then we'll set an environment variable called port. This environment variable is very important in this case because Cloud Run is going to be looking for this port and expose it so you can actually interact with the service after it's deployed. And we'll also define a host environment variable because Nuxt will be looking for the host in the port to determine how to serve the app. The next thing we'll do is Copy the package JSON files into the working directory, and then we'll run npm install only for our production dependencies.
From there, we'll copy all the source code from our local project to the working directory. Then we'll run npm build to build the production Nuxt app and then npm start, which is the command that actually starts the service in this container. So that's our entire Dockerfile. Now that we have that complete, we want to build the image itself.
software development
We can run Docker build and then point to the directory that contains the Dockerfile. That's going to build out the image in a series of steps or layers, and now Docker knows how to reproduce our code so it can scale to an infinite number of containers. After that's done, you'll notice it gives us an image ID down here at the bottom. You can use that ID to run the container locally, which is generally a good idea just to make sure everything's working before you deploy it. You can do that with Docker run, and then you should see the same Nuxt app being served on local host 8080. Now that we know that everything's working properly, we need to tag this image and then upload it to the container registry on GCP. We can do that by first running Docker tag followed by the image ID and then followed by gcr.io slash your project ID slash whatever you wanna call this service. That associates the image with this URL, then you can run Docker push to actually upload it to that URL. That's going to take a few minutes, but but when it's finished, you can go to the GCP console and see it in the container registry. And just a side note, you can use Cloud Build to entirely automate this process if you don't want to do it manually like I just showed you, and I made a video all about that a few weeks ago. The next step is to take this image and deploy it as a microservice with Cloud Run. Head over to the container registry on GCP and verify that the image that you just uploaded is available there. From there, head over to Cloud Run, and we'll create a new service by clicking on the create service button. That will give us the option to select a container image URL, which we can do for our Nuxt server. Then just give it a name and a location, and then make sure to check the button for allow unauthenticated invocations. This is a public app, so we want anybody to be able to access the service. It'll take a few minutes to finish, but when it's done, you should be able to see the logs coming from the container. And then you'll see a URL that we can use to access the service over HTTP and if we open it in a browser, we should see the same exact Nuxt app that we were working with locally. Now at this point, we could map the service domain to our own custom domain, and that can be done directly through the Cloud Run console. But Cloud Run is also integrated with Firebase, so we can actually map the service to our Firebase hosting account. At this point, I'm assuming you have the Firebase command line tools installed, then run firebase init hosting from inside of the Nuxt app. You can select all the default options, then choose no when asked if it's a single page application. Firebase will automatically create a public directory.
You wanna go ahead and keep that directory, but delete the index HTML that's inside it. Firebase Hosting will give a higher priority to this index HTML file than it will to rewrites. And what we're actually doing here is rewriting all of our traffic to that microservice endpoint. We
blogging
do that by going into the Firebase JSON file, add a rewrites array, and then define an object that has a property of source, which points to star star, which will just capture all of the routes in this app, and then a second property called run which will point to the service ID or the service name that we defined in Cloud Run. From there, we just need to run Firebase deploy only hosting. And now we have a Nuxt app deployed to Firebase Hosting with full server side rendering. And like I mentioned earlier, you can do the same thing with Angular Universal or React Next or whatever you want. But more importantly, Cloud Run basically removes all the limitations that we used to face when building serverless apps.
I'm gonna go ahead and wrap things up there, but expect more Cloud Run videos in the future because that opens the door to all kinds of interesting possibilities. If this video helped you, please like and subscribe, and consider becoming a pro member at FireShip IO to get access to even more content. Thanks for watching, and I will talk to you soon.
youtube
streaming
video gaming
media
social media
netflix
Yesterday, GCP announced a very exciting new product called Cloud Run. It's a service that allows you to convert any back end code written in any programming language with any dependencies into a serverless function. This means you can deploy fully managed microservices that will to automatically, while only paying for the actual resources that you use. In today's video, I'll show you how to take a server side rendered JavaScript cation, containerize it with Docker, deploy it to Cloud Run, and then hook it up to Firebase Hosting. If you're new here, like and subscribe, and you can grab the full walkthrough from Fireship IO. Out. I'm really excited about Cloud Run because it's the service I've been wishing for ever since I started working with serverless functions. The single biggest problem with serverless has always been the limitation of the runtime. Most Cloud providers only offer a few different programming languages, and if you need any special dependencies in your runtime, then you're basically out of luck. Your only real option at that point is to provision a virtual machine or use something like App Engine to deploy your code. And those resources are always online, which means you're always paying for them, and you also have to worry about scaling them up and down. Cloud Run is basically the best of both worlds and really the future of cloud computing in general in my opinion. All you have to do as a developer is write your code and then wrap it in a Docker image. The one thing to keep in mind though is that your code needs to be stateless. In other words, you can't be saving permanent files to the file system or be running a SQL database and expect to have access to that data later. That That shouldn't be a problem because you should be building stateless applications anyway while using things like Cloud Storage, Firestore, or Cloud SQL to manage your persistent data. Now Now let's take a look at a few things that you might wanna start using Cloud Run for. The first thing is server side rendering JavaScript applications. I'm going to show you how to do this with Nuxt JS and Vue, but the same principles apply to Angular Universal or Next. Js with React. You could also hypothetically use it to build a more traditional web application like, say, WordPress or Ruby on Rails as long as you keep the database outside of the container. And I find this one really interesting because that means you could have a WordPress site hosted on Firebase Hosting. And another use case for Cloud Run would just be to create RESTful APIs or even GraphQL APIs. And feel free to do it in whatever programming language you want. Now let's go ahead and take a look at a full example from start to finish. We're going to take this Nuxt JS app, which is just a Vue app that's server side rendered with Express JS. We'll create a Docker image for it and then deploy it as a microservice to Cloud Run. And as a final touch, I'll show you how to integrate it with Firebase Hosting. To follow along with this lesson, you'll need to have Docker installed on your local system as well as the Google Cloud SDK. First, we need to create an app or a microservice that we can deploy. I'll be using Nuxt JS for this demo, and the reason I chose Nuxt is because it's really easy to get started with server side rendering. From the command line, we run npx create nuxt app, and and then it will give us a handful of options that we can run through. Mostly, we'll just select the defaults here. The only important thing is to select universal as the rendering mode. From there, we can open it up in Versus Code and then run npm run dev to serve the app locally. That's just running an Express JS server with Node, and you should see something that looks like this in the browser on localhost 3000. I'm not going to spend any time changing the underlying Nuxt code. It's already ready to go. We just need to Dockerize it. I'm I'm not going to get into the fundamentals of Docker in this video, but you can think of an image as an executable of your application. We create this image by defining a Docker file, and in that file, we define a series of steps required to build the actual virtual machine or container that runs our code. So even if you've never used Docker or it's actually very intuitive and easy to write a Dockerfile because you're basically just doing the same things that you would normally do from the command line to run your app. Go ahead and create a Dockerfile in the root of the application, and the first step in any Dockerfile is to define the base image. This is usually just a minimal operating system like a Linux distro, or For our case, since we're building a Node app, we'll use the Node 10 image, which is just a Linux distro with Node version 10 installed. You can think of the steps in a Dockerfile similar to the steps that you would run from the command line. For Cloud Run, we're going to set the working directory as user source app. That's kind of like CD ing into a directory, and then we'll set an environment variable called port. This environment variable is very important in this case because Cloud Run is going to be looking for this port and expose it so you can actually interact with the service after it's deployed. And we'll also define a host environment variable because Nuxt will be looking for the host in the port to determine how to serve the app. The next thing we'll do is Copy the package JSON files into the working directory, and then we'll run npm install only for our production dependencies. From there, we'll copy all the source code from our local project to the working directory. Then we'll run npm build to build the production Nuxt app and then npm start, which is the command that actually starts the service in this container. So that's our entire Dockerfile. Now that we have that complete, we want to build the image itself. We can run Docker build and then point to the directory that contains the Dockerfile. That's going to build out the image in a series of steps or layers, and now Docker knows how to reproduce our code so it can scale to an infinite number of containers. After that's done, you'll notice it gives us an image ID down here at the bottom. You can use that ID to run the container locally, which is generally a good idea just to make sure everything's working before you deploy it. You can do that with Docker run, and then you should see the same Nuxt app being served on local host 8080. Now that we know that everything's working properly, we need to tag this image and then upload it to the container registry on GCP. We can do that by first running Docker tag followed by the image ID and then followed by gcr.io slash your project ID slash whatever you wanna call this service. That associates the image with this URL, then you can run Docker push to actually upload it to that URL. That's going to take a few minutes, but but when it's finished, you can go to the GCP console and see it in the container registry. And just a side note, you can use Cloud Build to entirely automate this process if you don't want to do it manually like I just showed you, and I made a video all about that a few weeks ago. The next step is to take this image and deploy it as a microservice with Cloud Run. Head over to the container registry on GCP and verify that the image that you just uploaded is available there. From there, head over to Cloud Run, and we'll create a new service by clicking on the create service button. That will give us the option to select a container image URL, which we can do for our Nuxt server. Then just give it a name and a location, and then make sure to check the button for allow unauthenticated invocations. This is a public app, so we want anybody to be able to access the service. It'll take a few minutes to finish, but when it's done, you should be able to see the logs coming from the container. And then you'll see a URL that we can use to access the service over HTTP and if we open it in a browser, we should see the same exact Nuxt app that we were working with locally. Now at this point, we could map the service domain to our own custom domain, and that can be done directly through the Cloud Run console. But Cloud Run is also integrated with Firebase, so we can actually map the service to our Firebase hosting account. At this point, I'm assuming you have the Firebase command line tools installed, then run firebase init hosting from inside of the Nuxt app. You can select all the default options, then choose no when asked if it's a single page application. Firebase will automatically create a public directory. You wanna go ahead and keep that directory, but delete the index HTML that's inside it. Firebase Hosting will give a higher priority to this index HTML file than it will to rewrites. And what we're actually doing here is rewriting all of our traffic to that microservice endpoint. We do that by going into the Firebase JSON file, add a rewrites array, and then define an object that has a property of source, which points to star star, which will just capture all of the routes in this app, and then a second property called run which will point to the service ID or the service name that we defined in Cloud Run. From there, we just need to run Firebase deploy only hosting. And now we have a Nuxt app deployed to Firebase Hosting with full server side rendering. And like I mentioned earlier, you can do the same thing with Angular Universal or React Next or whatever you want. But more importantly, Cloud Run basically removes all the limitations that we used to face when building serverless apps. I'm gonna go ahead and wrap things up there, but expect more Cloud Run videos in the future because that opens the door to all kinds of interesting possibilities. If this video helped you, please like and subscribe, and consider becoming a pro member at FireShip IO to get access to even more content. Thanks for watching, and I will talk to you soon.
Yesterday,
yesterday
GCP
gcp
announced
announced
a
a
very
very
exciting
exciting
new
new
product
product
called
called
Cloud
cloud
Run.
run
It's
it's
a
a
service
service
that
that
allows
allows
you
you
to
to
convert
convert
any
any
back
back
end
end
code
code
written
written
in
in
any
any
programming
programming
language
language
with
with
any
any
dependencies
dependencies
into
into
a
a
serverless
serverless
function.
function
This
this
means
means
you
you
can
can
deploy
deploy
fully
fully
managed
managed
microservices
microservices
that
that
will
will
to
to
automatically,
automatically
while
while
only
only
paying
paying
for
for
the
the
actual
actual
resources
resources
that
that
you
you
use.
use
In
in
today's
today's
video,
video
I'll
i'll
show
show
you
you
how
how
to
to
take
take
a
a
server
server
side
side
rendered
rendered
JavaScript
javascript
cation,
cation
containerize
containerize
it
it
with
with
Docker,
docker
deploy
deploy
it
it
to
to
Cloud
cloud
Run,
run
and
and
then
then
hook
hook
it
it
up
up
to
to
Firebase
firebase
Hosting.
hosting
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe,
subscribe
and
and
you
you
can
can
grab
grab
the
the
full
full
walkthrough
walkthrough
from
from
Fireship
fireship
IO.
io
Out.
out
I'm
i'm
really
really
excited
excited
about
about
Cloud
cloud
Run
run
because
because
it's
it's
the
the
service
service
I've
i've
been
been
wishing
wishing
for
for
ever
ever
since
since
I
i
started
started
working
working
with
with
serverless
serverless
functions.
functions
The
the
single
single
biggest
biggest
problem
problem
with
with
serverless
serverless
has
has
always
always
been
been
the
the
limitation
limitation
of
of
the
the
runtime.
runtime
Most
most
Cloud
cloud
providers
providers
only
only
offer
offer
a
a
few
few
different
different
programming
programming
languages,
languages
and
and
if
if
you
you
need
need
any
any
special
special
dependencies
dependencies
in
in
your
your
runtime,
runtime
then
then
you're
you're
basically
basically
out
out
of
of
luck.
luck
Your
your
only
only
real
real
option
option
at
at
that
that
point
point
is
is
to
to
provision
provision
a
a
virtual
virtual
machine
machine
or
or
use
use
something
something
like
like
App
app
Engine
engine
to
to
deploy
deploy
your
your
code.
code
And
and
those
those
resources
resources
are
are
always
always
online,
online
which
which
means
means
you're
you're
always
always
paying
paying
for
for
them,
them
and
and
you
you
also
also
have
have
to
to
worry
worry
about
about
scaling
scaling
them
them
up
up
and
and
down.
down
Cloud
cloud
Run
run
is
is
basically
basically
the
the
best
best
of
of
both
both
worlds
worlds
and
and
really
really
the
the
future
future
of
of
cloud
cloud
computing
computing
in
in
general
general
in
in
my
my
opinion.
opinion
All
all
you
you
have
have
to
to
do
do
as
as
a
a
developer
developer
is
is
write
write
your
your
code
code
and
and
then
then
wrap
wrap
it
it
in
in
a
a
Docker
docker
image.
image
The
the
one
one
thing
thing
to
to
keep
keep
in
in
mind
mind
though
though
is
is
that
that
your
your
code
code
needs
needs
to
to
be
be
stateless.
stateless
In
in
other
other
words,
words
you
you
can't
can't
be
be
saving
saving
permanent
permanent
files
files
to
to
the
the
file
file
system
system
or
or
be
be
running
running
a
a
SQL
sql
database
database
and
and
expect
expect
to
to
have
have
access
access
to
to
that
that
data
data
later.
later
That
that
That
that
shouldn't
shouldn't
be
be
a
a
problem
problem
because
because
you
you
should
should
be
be
building
building
stateless
stateless
applications
applications
anyway
anyway
while
while
using
using
things
things
like
like
Cloud
cloud
Storage,
storage
Firestore,
firestore
or
or
Cloud
cloud
SQL
sql
to
to
manage
manage
your
your
persistent
persistent
data.
data
Now
now
Now
now
let's
let's
take
take
a
a
look
look
at
at
a
a
few
few
things
things
that
that
you
you
might
might
wanna
wanna
start
start
using
using
Cloud
cloud
Run
run
for.
for
The
the
first
first
thing
thing
is
is
server
server
side
side
rendering
rendering
JavaScript
javascript
applications.
applications
I'm
i'm
going
going
to
to
show
show
you
you
how
how
to
to
do
do
this
this
with
with
Nuxt
nuxt
JS
js
and
and
Vue,
vue
but
but
the
the
same
same
principles
principles
apply
apply
to
to
Angular
angular
Universal
universal
or
or
Next.
next
Js
js
with
with
React.
react
You
you
could
could
also
also
hypothetically
hypothetically
use
use
it
it
to
to
build
build
a
a
more
more
traditional
traditional
web
web
application
application
like,
like
say,
say
WordPress
wordpress
or
or
Ruby
ruby
on
on
Rails
rails
as
as
long
long
as
as
you
you
keep
keep
the
the
database
database
outside
outside
of
of
the
the
container.
container
And
and
I
i
find
find
this
this
one
one
really
really
interesting
interesting
because
because
that
that
means
means
you
you
could
could
have
have
a
a
WordPress
wordpress
site
site
hosted
hosted
on
on
Firebase
firebase
Hosting.
hosting
And
and
another
another
use
use
case
case
for
for
Cloud
cloud
Run
run
would
would
just
just
be
be
to
to
create
create
RESTful
restful
APIs
apis
or
or
even
even
GraphQL
graphql
APIs.
apis
And
and
feel
feel
free
free
to
to
do
do
it
it
in
in
whatever
whatever
programming
programming
language
language
you
you
want.
want
Now
now
let's
let's
go
go
ahead
ahead
and
and
take
take
a
a
look
look
at
at
a
a
full
full
example
example
from
from
start
start
to
to
finish.
finish
We're
we're
going
going
to
to
take
take
this
this
Nuxt
nuxt
JS
js
app,
app
which
which
is
is
just
just
a
a
Vue
vue
app
app
that's
that's
server
server
side
side
rendered
rendered
with
with
Express
express
JS.
js
We'll
we'll
create
create
a
a
Docker
docker
image
image
for
for
it
it
and
and
then
then
deploy
deploy
it
it
as
as
a
a
microservice
microservice
to
to
Cloud
cloud
Run.
run
And
and
as
as
a
a
final
final
touch,
touch
I'll
i'll
show
show
you
you
how
how
to
to
integrate
integrate
it
it
with
with
Firebase
firebase
Hosting.
hosting
To
to
follow
follow
along
along
with
with
this
this
lesson,
lesson
you'll
you'll
need
need
to
to
have
have
Docker
docker
installed
installed
on
on
your
your
local
local
system
system
as
as
well
well
as
as
the
the
Google
google
Cloud
cloud
SDK.
sdk
First,
first
we
we
need
need
to
to
create
create
an
an
app
app
or
or
a
a
microservice
microservice
that
that
we
we
can
can
deploy.
deploy
I'll
i'll
be
be
using
using
Nuxt
nuxt
JS
js
for
for
this
this
demo,
demo
and
and
the
the
reason
reason
I
i
chose
chose
Nuxt
nuxt
is
is
because
because
it's
it's
really
really
easy
easy
to
to
get
get
started
started
with
with
server
server
side
side
rendering.
rendering
From
from
the
the
command
command
line,
line
we
we
run
run
npx
npx
create
create
nuxt
nuxt
app,
app
and
and
and
and
then
then
it
it
will
will
give
give
us
us
a
a
handful
handful
of
of
options
options
that
that
we
we
can
can
run
run
through.
through
Mostly,
mostly
we'll
we'll
just
just
select
select
the
the
defaults
defaults
here.
here
The
the
only
only
important
important
thing
thing
is
is
to
to
select
select
universal
universal
as
as
the
the
rendering
rendering
mode.
mode
From
from
there,
there
we
we
can
can
open
open
it
it
up
up
in
in
Versus
versus
Code
code
and
and
then
then
run
run
npm
npm
run
run
dev
dev
to
to
serve
serve
the
the
app
app
locally.
locally
That's
that's
just
just
running
running
an
an
Express
express
JS
js
server
server
with
with
Node,
node
and
and
you
you
should
should
see
see
something
something
that
that
looks
looks
like
like
this
this
in
in
the
the
browser
browser
on
on
localhost
localhost
3000.
3000
I'm
i'm
not
not
going
going
to
to
spend
spend
any
any
time
time
changing
changing
the
the
underlying
underlying
Nuxt
nuxt
code.
code
It's
it's
already
already
ready
ready
to
to
go.
go
We
we
just
just
need
need
to
to
Dockerize
dockerize
it.
it
I'm
i'm
I'm
i'm
not
not
going
going
to
to
get
get
into
into
the
the
fundamentals
fundamentals
of
of
Docker
docker
in
in
this
this
video,
video
but
but
you
you
can
can
think
think
of
of
an
an
image
image
as
as
an
an
executable
executable
of
of
your
your
application.
application
We
we
create
create
this
this
image
image
by
by
defining
defining
a
a
Docker
docker
file,
file
and
and
in
in
that
that
file,
file
we
we
define
define
a
a
series
series
of
of
steps
steps
required
required
to
to
build
build
the
the
actual
actual
virtual
virtual
machine
machine
or
or
container
container
that
that
runs
runs
our
our
code.
code
So
so
even
even
if
if
you've
you've
never
never
used
used
Docker
docker
or
or
it's
it's
actually
actually
very
very
intuitive
intuitive
and
and
easy
easy
to
to
write
write
a
a
Dockerfile
dockerfile
because
because
you're
you're
basically
basically
just
just
doing
doing
the
the
same
same
things
things
that
that
you
you
would
would
normally
normally
do
do
from
from
the
the
command
command
line
line
to
to
run
run
your
your
app.
app
Go
go
ahead
ahead
and
and
create
create
a
a
Dockerfile
dockerfile
in
in
the
the
root
root
of
of
the
the
application,
application
and
and
the
the
first
first
step
step
in
in
any
any
Dockerfile
dockerfile
is
is
to
to
define
define
the
the
base
base
image.
image
This
this
is
is
usually
usually
just
just
a
a
minimal
minimal
operating
operating
system
system
like
like
a
a
Linux
linux
distro,
distro
or
or
For
for
our
our
case,
case
since
since
we're
we're
building
building
a
a
Node
node
app,
app
we'll
we'll
use
use
the
the
Node
node
10
10
image,
image
which
which
is
is
just
just
a
a
Linux
linux
distro
distro
with
with
Node
node
version
version
10
10
installed.
installed
You
you
can
can
think
think
of
of
the
the
steps
steps
in
in
a
a
Dockerfile
dockerfile
similar
similar
to
to
the
the
steps
steps
that
that
you
you
would
would
run
run
from
from
the
the
command
command
line.
line
For
for
Cloud
cloud
Run,
run
we're
we're
going
going
to
to
set
set
the
the
working
working
directory
directory
as
as
user
user
source
source
app.
app
That's
that's
kind
kind
of
of
like
like
CD
cd
ing
ing
into
into
a
a
directory,
directory
and
and
then
then
we'll
we'll
set
set
an
an
environment
environment
variable
variable
called
called
port.
port
This
this
environment
environment
variable
variable
is
is
very
very
important
important
in
in
this
this
case
case
because
because
Cloud
cloud
Run
run
is
is
going
going
to
to
be
be
looking
looking
for
for
this
this
port
port
and
and
expose
expose
it
it
so
so
you
you
can
can
actually
actually
interact
interact
with
with
the
the
service
service
after
after
it's
it's
deployed.
deployed
And
and
we'll
we'll
also
also
define
define
a
a
host
host
environment
environment
variable
variable
because
because
Nuxt
nuxt
will
will
be
be
looking
looking
for
for
the
the
host
host
in
in
the
the
port
port
to
to
determine
determine
how
how
to
to
serve
serve
the
the
app.
app
The
the
next
next
thing
thing
we'll
we'll
do
do
is
is
Copy
copy
the
the
package
package
JSON
json
files
files
into
into
the
the
working
working
directory,
directory
and
and
then
then
we'll
we'll
run
run
npm
npm
install
install
only
only
for
for
our
our
production
production
dependencies.
dependencies
From
from
there,
there
we'll
we'll
copy
copy
all
all
the
the
source
source
code
code
from
from
our
our
local
local
project
project
to
to
the
the
working
working
directory.
directory
Then
then
we'll
we'll
run
run
npm
npm
build
build
to
to
build
build
the
the
production
production
Nuxt
nuxt
app
app
and
and
then
then
npm
npm
start,
start
which
which
is
is
the
the
command
command
that
that
actually
actually
starts
starts
the
the
service
service
in
in
this
this
container.
container
So
so
that's
that's
our
our
entire
entire
Dockerfile.
dockerfile
Now
now
that
that
we
we
have
have
that
that
complete,
complete
we
we
want
want
to
to
build
build
the
the
image
image
itself.
itself
We
we
can
can
run
run
Docker
docker
build
build
and
and
then
then
point
point
to
to
the
the
directory
directory
that
that
contains
contains
the
the
Dockerfile.
dockerfile
That's
that's
going
going
to
to
build
build
out
out
the
the
image
image
in
in
a
a
series
series
of
of
steps
steps
or
or
layers,
layers
and
and
now
now
Docker
docker
knows
knows
how
how
to
to
reproduce
reproduce
our
our
code
code
so
so
it
it
can
can
scale
scale
to
to
an
an
infinite
infinite
number
number
of
of
containers.
containers
After
after
that's
that's
done,
done
you'll
you'll
notice
notice
it
it
gives
gives
us
us
an
an
image
image
ID
id
down
down
here
here
at
at
the
the
bottom.
bottom
You
you
can
can
use
use
that
that
ID
id
to
to
run
run
the
the
container
container
locally,
locally
which
which
is
is
generally
generally
a
a
good
good
idea
idea
just
just
to
to
make
make
sure
sure
everything's
everything's
working
working
before
before
you
you
deploy
deploy
it.
it
You
you
can
can
do
do
that
that
with
with
Docker
docker
run,
run
and
and
then
then
you
you
should
should
see
see
the
the
same
same
Nuxt
nuxt
app
app
being
being
served
served
on
on
local
local
host
host
8080.
8080
Now
now
that
that
we
we
know
know
that
that
everything's
everything's
working
working
properly,
properly
we
we
need
need
to
to
tag
tag
this
this
image
image
and
and
then
then
upload
upload
it
it
to
to
the
the
container
container
registry
registry
on
on
GCP.
gcp
We
we
can
can
do
do
that
that
by
by
first
first
running
running
Docker
docker
tag
tag
followed
followed
by
by
the
the
image
image
ID
id
and
and
then
then
followed
followed
by
by
gcr.io
gcr.io
slash
slash
your
your
project
project
ID
id
slash
slash
whatever
whatever
you
you
wanna
wanna
call
call
this
this
service.
service
That
that
associates
associates
the
the
image
image
with
with
this
this
URL,
url
then
then
you
you
can
can
run
run
Docker
docker
push
push
to
to
actually
actually
upload
upload
it
it
to
to
that
that
URL.
url
That's
that's
going
going
to
to
take
take
a
a
few
few
minutes,
minutes
but
but
but
but
when
when
it's
it's
finished,
finished
you
you
can
can
go
go
to
to
the
the
GCP
gcp
console
console
and
and
see
see
it
it
in
in
the
the
container
container
registry.
registry
And
and
just
just
a
a
side
side
note,
note
you
you
can
can
use
use
Cloud
cloud
Build
build
to
to
entirely
entirely
automate
automate
this
this
process
process
if
if
you
you
don't
don't
want
want
to
to
do
do
it
it
manually
manually
like
like
I
i
just
just
showed
showed
you,
you
and
and
I
i
made
made
a
a
video
video
all
all
about
about
that
that
a
a
few
few
weeks
weeks
ago.
ago
The
the
next
next
step
step
is
is
to
to
take
take
this
this
image
image
and
and
deploy
deploy
it
it
as
as
a
a
microservice
microservice
with
with
Cloud
cloud
Run.
run
Head
head
over
over
to
to
the
the
container
container
registry
registry
on
on
GCP
gcp
and
and
verify
verify
that
that
the
the
image
image
that
that
you
you
just
just
uploaded
uploaded
is
is
available
available
there.
there
From
from
there,
there
head
head
over
over
to
to
Cloud
cloud
Run,
run
and
and
we'll
we'll
create
create
a
a
new
new
service
service
by
by
clicking
clicking
on
on
the
the
create
create
service
service
button.
button
That
that
will
will
give
give
us
us
the
the
option
option
to
to
select
select
a
a
container
container
image
image
URL,
url
which
which
we
we
can
can
do
do
for
for
our
our
Nuxt
nuxt
server.
server
Then
then
just
just
give
give
it
it
a
a
name
name
and
and
a
a
location,
location
and
and
then
then
make
make
sure
sure
to
to
check
check
the
the
button
button
for
for
allow
allow
unauthenticated
unauthenticated
invocations.
invocations
This
this
is
is
a
a
public
public
app,
app
so
so
we
we
want
want
anybody
anybody
to
to
be
be
able
able
to
to
access
access
the
the
service.
service
It'll
it'll
take
take
a
a
few
few
minutes
minutes
to
to
finish,
finish
but
but
when
when
it's
it's
done,
done
you
you
should
should
be
be
able
able
to
to
see
see
the
the
logs
logs
coming
coming
from
from
the
the
container.
container
And
and
then
then
you'll
you'll
see
see
a
a
URL
url
that
that
we
we
can
can
use
use
to
to
access
access
the
the
service
service
over
over
HTTP
http
and
and
if
if
we
we
open
open
it
it
in
in
a
a
browser,
browser
we
we
should
should
see
see
the
the
same
same
exact
exact
Nuxt
nuxt
app
app
that
that
we
we
were
were
working
working
with
with
locally.
locally
Now
now
at
at
this
this
point,
point
we
we
could
could
map
map
the
the
service
service
domain
domain
to
to
our
our
own
own
custom
custom
domain,
domain
and
and
that
that
can
can
be
be
done
done
directly
directly
through
through
the
the
Cloud
cloud
Run
run
console.
console
But
but
Cloud
cloud
Run
run
is
is
also
also
integrated
integrated
with
with
Firebase,
firebase
so
so
we
we
can
can
actually
actually
map
map
the
the
service
service
to
to
our
our
Firebase
firebase
hosting
hosting
account.
account
At
at
this
this
point,
point
I'm
i'm
assuming
assuming
you
you
have
have
the
the
Firebase
firebase
command
command
line
line
tools
tools
installed,
installed
then
then
run
run
firebase
firebase
init
init
hosting
hosting
from
from
inside
inside
of
of
the
the
Nuxt
nuxt
app.
app
You
you
can
can
select
select
all
all
the
the
default
default
options,
options
then
then
choose
choose
no
no
when
when
asked
asked
if
if
it's
it's
a
a
single
single
page
page
application.
application
Firebase
firebase
will
will
automatically
automatically
create
create
a
a
public
public
directory.
directory
You
you
wanna
wanna
go
go
ahead
ahead
and
and
keep
keep
that
that
directory,
directory
but
but
delete
delete
the
the
index
index
HTML
html
that's
that's
inside
inside
it.
it
Firebase
firebase
Hosting
hosting
will
will
give
give
a
a
higher
higher
priority
priority
to
to
this
this
index
index
HTML
html
file
file
than
than
it
it
will
will
to
to
rewrites.
rewrites
And
and
what
what
we're
we're
actually
actually
doing
doing
here
here
is
is
rewriting
rewriting
all
all
of
of
our
our
traffic
traffic
to
to
that
that
microservice
microservice
endpoint.
endpoint
We
we
do
do
that
that
by
by
going
going
into
into
the
the
Firebase
firebase
JSON
json
file,
file
add
add
a
a
rewrites
rewrites
array,
array
and
and
then
then
define
define
an
an
object
object
that
that
has
has
a
a
property
property
of
of
source,
source
which
which
points
points
to
to
star
star
star,
star
which
which
will
will
just
just
capture
capture
all
all
of
of
the
the
routes
routes
in
in
this
this
app,
app
and
and
then
then
a
a
second
second
property
property
called
called
run
run
which
which
will
will
point
point
to
to
the
the
service
service
ID
id
or
or
the
the
service
service
name
name
that
that
we
we
defined
defined
in
in
Cloud
cloud
Run.
run
From
from
there,
there
we
we
just
just
need
need
to
to
run
run
Firebase
firebase
deploy
deploy
only
only
hosting.
hosting
And
and
now
now
we
we
have
have
a
a
Nuxt
nuxt
app
app
deployed
deployed
to
to
Firebase
firebase
Hosting
hosting
with
with
full
full
server
server
side
side
rendering.
rendering
And
and
like
like
I
i
mentioned
mentioned
earlier,
earlier
you
you
can
can
do
do
the
the
same
same
thing
thing
with
with
Angular
angular
Universal
universal
or
or
React
react
Next
next
or
or
whatever
whatever
you
you
want.
want
But
but
more
more
importantly,
importantly
Cloud
cloud
Run
run
basically
basically
removes
removes
all
all
the
the
limitations
limitations
that
that
we
we
used
used
to
to
face
face
when
when
building
building
serverless
serverless
apps.
apps
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there,
there
but
but
expect
expect
more
more
Cloud
cloud
Run
run
videos
videos
in
in
the
the
future
future
because
because
that
that
opens
opens
the
the
door
door
to
to
all
all
kinds
kinds
of
of
interesting
interesting
possibilities.
possibilities
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe,
subscribe
and
and
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
FireShip
fireship
IO
io
to
to
get
get
access
access
to
to
even
even
more
more
content.
content
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
talk
talk
to
to
you
you
soon.
soon
success
The speakers discuss the benefits of Cloud Run, a service that allows developers to convert back-end code into microservices and reduce downtime. They provide demos on creating microservices and APIs, integrating them with Azure Hosting, and running Docker builds and files. The process involves mapping the service domain to a custom one and rewriting traffic to the microservice endpoint, and the speakers remind viewers to like and subscribe to future videos and offer a place to stay if they like the topic.
Cloud Run QuickStart - Docker to Serverless
Yesterday, GCP announced a very exciting new product called Cloud Run. It's a service that allows you to convert any back end code written in any programming language with any dependencies into a serverless function. This means you can deploy fully managed microservices that will to automatically, while only paying for the actual resources that you use. In today's video, I'll show you how to take a server side rendered JavaScript cation, containerize it with Docker, deploy it to Cloud Run, and then hook it up to Firebase Hosting. If you're new here, like and subscribe, and you can grab the full walkthrough from Fireship IO. Out. I'm really excited about Cloud Run because it's the service I've been wishing for ever since I started working with serverless functions. The single biggest problem with serverless has always been the limitation of the runtime. Most Cloud providers only offer a few different programming languages, and if you need any special dependencies in your runtime, then you're basically out of luck. Your only real option at that point is to provision a virtual machine or use something like App Engine to deploy your code. And those resources are always online, which means you're always paying for them, and you also have to worry about scaling them up and down. Cloud Run is basically the best of both worlds and really the future of cloud computing in general in my opinion. All you have to do as a developer is write your code and then wrap it in a Docker image. The one thing to keep in mind though is that your code needs to be stateless. In other words, you can't be saving permanent files to the file system or be running a SQL database and expect to have access to that data later. That That shouldn't be a problem because you should be building stateless applications anyway while using things like Cloud Storage, Firestore, or Cloud SQL to manage your persistent data. Now Now let's take a look at a few things that you might wanna start using Cloud Run for. The first thing is server side rendering JavaScript applications. I'm going to show you how to do this with Nuxt JS and Vue, but the same principles apply to Angular Universal or Next. Js with React. You could also hypothetically use it to build a more traditional web application like, say, WordPress or Ruby on Rails as long as you keep the database outside of the container. And I find this one really interesting because that means you could have a WordPress site hosted on Firebase Hosting. And another use case for Cloud Run would just be to create RESTful APIs or even GraphQL APIs. And feel free to do it in whatever programming language you want. Now let's go ahead and take a look at a full example from start to finish. We're going to take this Nuxt JS app, which is just a Vue app that's server side rendered with Express JS. We'll create a Docker image for it and then deploy it as a microservice to Cloud Run. And as a final touch, I'll show you how to integrate it with Firebase Hosting. To follow along with this lesson, you'll need to have Docker installed on your local system as well as the Google Cloud SDK. First, we need to create an app or a microservice that we can deploy. I'll be using Nuxt JS for this demo, and the reason I chose Nuxt is because it's really easy to get started with server side rendering. From the command line, we run npx create nuxt app, and and then it will give us a handful of options that we can run through. Mostly, we'll just select the defaults here. The only important thing is to select universal as the rendering mode. From there, we can open it up in Versus Code and then run npm run dev to serve the app locally. That's just running an Express JS server with Node, and you should see something that looks like this in the browser on localhost 3000. I'm not going to spend any time changing the underlying Nuxt code. It's already ready to go. We just need to Dockerize it. I'm I'm not going to get into the fundamentals of Docker in this video, but you can think of an image as an executable of your application. We create this image by defining a Docker file, and in that file, we define a series of steps required to build the actual virtual machine or container that runs our code. So even if you've never used Docker or it's actually very intuitive and easy to write a Dockerfile because you're basically just doing the same things that you would normally do from the command line to run your app. Go ahead and create a Dockerfile in the root of the application, and the first step in any Dockerfile is to define the base image. This is usually just a minimal operating system like a Linux distro, or For our case, since we're building a Node app, we'll use the Node 10 image, which is just a Linux distro with Node version 10 installed. You can think of the steps in a Dockerfile similar to the steps that you would run from the command line. For Cloud Run, we're going to set the working directory as user source app. That's kind of like CD ing into a directory, and then we'll set an environment variable called port. This environment variable is very important in this case because Cloud Run is going to be looking for this port and expose it so you can actually interact with the service after it's deployed. And we'll also define a host environment variable because Nuxt will be looking for the host in the port to determine how to serve the app. The next thing we'll do is Copy the package JSON files into the working directory, and then we'll run npm install only for our production dependencies. From there, we'll copy all the source code from our local project to the working directory. Then we'll run npm build to build the production Nuxt app and then npm start, which is the command that actually starts the service in this container. So that's our entire Dockerfile. Now that we have that complete, we want to build the image itself. We can run Docker build and then point to the directory that contains the Dockerfile. That's going to build out the image in a series of steps or layers, and now Docker knows how to reproduce our code so it can scale to an infinite number of containers. After that's done, you'll notice it gives us an image ID down here at the bottom. You can use that ID to run the container locally, which is generally a good idea just to make sure everything's working before you deploy it. You can do that with Docker run, and then you should see the same Nuxt app being served on local host 8080. Now that we know that everything's working properly, we need to tag this image and then upload it to the container registry on GCP. We can do that by first running Docker tag followed by the image ID and then followed by gcr.io slash your project ID slash whatever you wanna call this service. That associates the image with this URL, then you can run Docker push to actually upload it to that URL. That's going to take a few minutes, but but when it's finished, you can go to the GCP console and see it in the container registry. And just a side note, you can use Cloud Build to entirely automate this process if you don't want to do it manually like I just showed you, and I made a video all about that a few weeks ago. The next step is to take this image and deploy it as a microservice with Cloud Run. Head over to the container registry on GCP and verify that the image that you just uploaded is available there. From there, head over to Cloud Run, and we'll create a new service by clicking on the create service button. That will give us the option to select a container image URL, which we can do for our Nuxt server. Then just give it a name and a location, and then make sure to check the button for allow unauthenticated invocations. This is a public app, so we want anybody to be able to access the service. It'll take a few minutes to finish, but when it's done, you should be able to see the logs coming from the container. And then you'll see a URL that we can use to access the service over HTTP and if we open it in a browser, we should see the same exact Nuxt app that we were working with locally. Now at this point, we could map the service domain to our own custom domain, and that can be done directly through the Cloud Run console. But Cloud Run is also integrated with Firebase, so we can actually map the service to our Firebase hosting account. At this point, I'm assuming you have the Firebase command line tools installed, then run firebase init hosting from inside of the Nuxt app. You can select all the default options, then choose no when asked if it's a single page application. Firebase will automatically create a public directory. You wanna go ahead and keep that directory, but delete the index HTML that's inside it. Firebase Hosting will give a higher priority to this index HTML file than it will to rewrites. And what we're actually doing here is rewriting all of our traffic to that microservice endpoint. We do that by going into the Firebase JSON file, add a rewrites array, and then define an object that has a property of source, which points to star star, which will just capture all of the routes in this app, and then a second property called run which will point to the service ID or the service name that we defined in Cloud Run. From there, we just need to run Firebase deploy only hosting. And now we have a Nuxt app deployed to Firebase Hosting with full server side rendering. And like I mentioned earlier, you can do the same thing with Angular Universal or React Next or whatever you want. But more importantly, Cloud Run basically removes all the limitations that we used to face when building serverless apps. I'm gonna go ahead and wrap things up there, but expect more Cloud Run videos in the future because that opens the door to all kinds of interesting possibilities. If this video helped you, please like and subscribe, and consider becoming a pro member at FireShip IO to get access to even more content. Thanks for watching, and I will talk to you soon.
The speakers discuss the benefits of Cloud Run, a service that allows developers to convert back-end code into microservices and reduce downtime. They provide demos on creating microservices and APIs, integrating them with Azure Hosting, and running Docker builds and files. The process involves mapping the service domain to a custom one and rewriting traffic to the microservice endpoint, and the speakers remind viewers to like and subscribe to future videos and offer a place to stay if they like the topic.

        [INST]
        You are youtuber called Fireship you make engaging high-intensity and entertaining coding tutorials and tech news. 
        you covers a wide range of topics relevant to programmers, aiming to help them learn and improve their skills quickly.
        
        Given the title of the video : Cloud Run QuickStart - Docker to Serverless 
        and a small summary : The speakers discuss the benefits of Cloud Run, a service that allows developers to convert back-end code into microservices and reduce downtime. They provide demos on creating microservices and APIs, integrating them with Azure Hosting, and running Docker builds and files. The process involves mapping the service domain to a custom one and rewriting traffic to the microservice endpoint, and the speakers remind viewers to like and subscribe to future videos and offer a place to stay if they like the topic.
        [/INST]
        
        Generate the video : Yesterday, GCP announced a very exciting new product called Cloud Run. It's a service that allows you to convert any back end code written in any programming language with any dependencies into a serverless function. This means you can deploy fully managed microservices that will to automatically, while only paying for the actual resources that you use. In today's video, I'll show you how to take a server side rendered JavaScript cation, containerize it with Docker, deploy it to Cloud Run, and then hook it up to Firebase Hosting. If you're new here, like and subscribe, and you can grab the full walkthrough from Fireship IO. Out. I'm really excited about Cloud Run because it's the service I've been wishing for ever since I started working with serverless functions. The single biggest problem with serverless has always been the limitation of the runtime. Most Cloud providers only offer a few different programming languages, and if you need any special dependencies in your runtime, then you're basically out of luck. Your only real option at that point is to provision a virtual machine or use something like App Engine to deploy your code. And those resources are always online, which means you're always paying for them, and you also have to worry about scaling them up and down. Cloud Run is basically the best of both worlds and really the future of cloud computing in general in my opinion. All you have to do as a developer is write your code and then wrap it in a Docker image. The one thing to keep in mind though is that your code needs to be stateless. In other words, you can't be saving permanent files to the file system or be running a SQL database and expect to have access to that data later. That That shouldn't be a problem because you should be building stateless applications anyway while using things like Cloud Storage, Firestore, or Cloud SQL to manage your persistent data. Now Now let's take a look at a few things that you might wanna start using Cloud Run for. The first thing is server side rendering JavaScript applications. I'm going to show you how to do this with Nuxt JS and Vue, but the same principles apply to Angular Universal or Next. Js with React. You could also hypothetically use it to build a more traditional web application like, say, WordPress or Ruby on Rails as long as you keep the database outside of the container. And I find this one really interesting because that means you could have a WordPress site hosted on Firebase Hosting. And another use case for Cloud Run would just be to create RESTful APIs or even GraphQL APIs. And feel free to do it in whatever programming language you want. Now let's go ahead and take a look at a full example from start to finish. We're going to take this Nuxt JS app, which is just a Vue app that's server side rendered with Express JS. We'll create a Docker image for it and then deploy it as a microservice to Cloud Run. And as a final touch, I'll show you how to integrate it with Firebase Hosting. To follow along with this lesson, you'll need to have Docker installed on your local system as well as the Google Cloud SDK. First, we need to create an app or a microservice that we can deploy. I'll be using Nuxt JS for this demo, and the reason I chose Nuxt is because it's really easy to get started with server side rendering. From the command line, we run npx create nuxt app, and and then it will give us a handful of options that we can run through. Mostly, we'll just select the defaults here. The only important thing is to select universal as the rendering mode. From there, we can open it up in Versus Code and then run npm run dev to serve the app locally. That's just running an Express JS server with Node, and you should see something that looks like this in the browser on localhost 3000. I'm not going to spend any time changing the underlying Nuxt code. It's already ready to go. We just need to Dockerize it. I'm I'm not going to get into the fundamentals of Docker in this video, but you can think of an image as an executable of your application. We create this image by defining a Docker file, and in that file, we define a series of steps required to build the actual virtual machine or container that runs our code. So even if you've never used Docker or it's actually very intuitive and easy to write a Dockerfile because you're basically just doing the same things that you would normally do from the command line to run your app. Go ahead and create a Dockerfile in the root of the application, and the first step in any Dockerfile is to define the base image. This is usually just a minimal operating system like a Linux distro, or For our case, since we're building a Node app, we'll use the Node 10 image, which is just a Linux distro with Node version 10 installed. You can think of the steps in a Dockerfile similar to the steps that you would run from the command line. For Cloud Run, we're going to set the working directory as user source app. That's kind of like CD ing into a directory, and then we'll set an environment variable called port. This environment variable is very important in this case because Cloud Run is going to be looking for this port and expose it so you can actually interact with the service after it's deployed. And we'll also define a host environment variable because Nuxt will be looking for the host in the port to determine how to serve the app. The next thing we'll do is Copy the package JSON files into the working directory, and then we'll run npm install only for our production dependencies. From there, we'll copy all the source code from our local project to the working directory. Then we'll run npm build to build the production Nuxt app and then npm start, which is the command that actually starts the service in this container. So that's our entire Dockerfile. Now that we have that complete, we want to build the image itself. We can run Docker build and then point to the directory that contains the Dockerfile. That's going to build out the image in a series of steps or layers, and now Docker knows how to reproduce our code so it can scale to an infinite number of containers. After that's done, you'll notice it gives us an image ID down here at the bottom. You can use that ID to run the container locally, which is generally a good idea just to make sure everything's working before you deploy it. You can do that with Docker run, and then you should see the same Nuxt app being served on local host 8080. Now that we know that everything's working properly, we need to tag this image and then upload it to the container registry on GCP. We can do that by first running Docker tag followed by the image ID and then followed by gcr.io slash your project ID slash whatever you wanna call this service. That associates the image with this URL, then you can run Docker push to actually upload it to that URL. That's going to take a few minutes, but but when it's finished, you can go to the GCP console and see it in the container registry. And just a side note, you can use Cloud Build to entirely automate this process if you don't want to do it manually like I just showed you, and I made a video all about that a few weeks ago. The next step is to take this image and deploy it as a microservice with Cloud Run. Head over to the container registry on GCP and verify that the image that you just uploaded is available there. From there, head over to Cloud Run, and we'll create a new service by clicking on the create service button. That will give us the option to select a container image URL, which we can do for our Nuxt server. Then just give it a name and a location, and then make sure to check the button for allow unauthenticated invocations. This is a public app, so we want anybody to be able to access the service. It'll take a few minutes to finish, but when it's done, you should be able to see the logs coming from the container. And then you'll see a URL that we can use to access the service over HTTP and if we open it in a browser, we should see the same exact Nuxt app that we were working with locally. Now at this point, we could map the service domain to our own custom domain, and that can be done directly through the Cloud Run console. But Cloud Run is also integrated with Firebase, so we can actually map the service to our Firebase hosting account. At this point, I'm assuming you have the Firebase command line tools installed, then run firebase init hosting from inside of the Nuxt app. You can select all the default options, then choose no when asked if it's a single page application. Firebase will automatically create a public directory. You wanna go ahead and keep that directory, but delete the index HTML that's inside it. Firebase Hosting will give a higher priority to this index HTML file than it will to rewrites. And what we're actually doing here is rewriting all of our traffic to that microservice endpoint. We do that by going into the Firebase JSON file, add a rewrites array, and then define an object that has a property of source, which points to star star, which will just capture all of the routes in this app, and then a second property called run which will point to the service ID or the service name that we defined in Cloud Run. From there, we just need to run Firebase deploy only hosting. And now we have a Nuxt app deployed to Firebase Hosting with full server side rendering. And like I mentioned earlier, you can do the same thing with Angular Universal or React Next or whatever you want. But more importantly, Cloud Run basically removes all the limitations that we used to face when building serverless apps. I'm gonna go ahead and wrap things up there, but expect more Cloud Run videos in the future because that opens the door to all kinds of interesting possibilities. If this video helped you, please like and subscribe, and consider becoming a pro member at FireShip IO to get access to even more content. Thanks for watching, and I will talk to you soon.
        