Cloud Run QuickStart - Docker to Serverless

[Music] 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 service function this means you can deploy fully managed micro services that will scale 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 application containerize it with docker deploy 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 buyer ship IO I'm really excited about cloud run because it's the service I've been wishing for ever since I started working with service functions the single biggest problem with server list 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 sequel database and expect to have access to that data later that shouldn't be a problem because you should be building stateless applications anyway while using things like cloud storage fires store or cloud sequel to manage your persistent data now let's take a look at a few things that you might want to 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 Knux j/s and view but the same principles apply to angular Universal or next j/s 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 api soar even graph QL api's 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 knucks j/s app which is just a view app that server-side rendered with express j/s will create a docker image for it and deploy it as a micro service 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 micro service that we can deploy I'll be using knucks j/s for this demo and the reason I chose next is because it's really easy to get started with server-side rendering from the command-line we ran npx create knucks tap 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 vs code and then run npm run dev to serve the app locally that's just running an Express j/s 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 nuts code it's already ready to go we just need to docker eyes it 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 before it's actually very intuitive and easy to write a docker file 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 docker file in the root of the application and the first step in any docker file is to define the base image this is usually just a minimal operating system like a Linux distro or in 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 docker file similar to these 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 seeding into a directory and then we'll set an environment variable called port this environment variable is very important in this case because cloud runs 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 next we'll be looking for the host and the port to determine how to serve the app the next thing we'll do is copy the package JSON files in 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 next 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 docker file 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 that 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 is working before you deploy it you can do that with docker run and then you should see the same next app being served on localhost 8080 now that we know that everything is 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 GC r io slash your project ID slash whatever you want to 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 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 micro service with cloud run head over to the container registry on GC P 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 knucks server and 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 next 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 this service to our firebase hosting account at this point I'm assuming you have the firebase command line tools installed then run firebase in it hosting from inside of the next 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 want to go ahead and keep that directory but delete the index.html that's inside it firebase hosting will get 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 micro service 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 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 and cloud run from there we just need to run firebase deploy only hosting and now we have a next 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 it 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 fire ship IO to get access to even more content thanks for watching and I will talk to you soon [Music]

Channel: Fireship

Views: 110,254

Keywords: angular, firebase, webdev, app development, typescript, javascript, lesson, tutorial, microservice, cloud run, gcp cloud run, cloud run tutorial, google cloud, google cloud platform, nuxt, nextjs, nuxtjs, angular universal, ssr, serverside rendering, cloud functions, serverless, docker, kubernetes, knative, gcp, docker tutorial, vue, firebase hosting

Id: 3OP-q55hOUI

Length: 7min 50sec (470 seconds)

Published: Wed Apr 10 2019