A Guide for Cloud Run Deployment locally using Visual Studio Code

Shubh_Sc
DSC KIET
Published in
10 min readJul 11, 2022

We can deploy an application on Cloud Run using the interface GCP provides. But, will it not be better to set up the cluster once and use VS code to do the rest? 🤔

Well, it is both possible and pretty cool. In this generation of computing, we must be aware of Serverless. If not, I have also provided resources for learning and understanding Serverless Computing.

The main goal of this blog is to inform our readers about how an application is deployed locally on Cloud Run using Visual Studio Code.

PREREQUISITES 👨‍💻

Serverless Frameworks 🔍

Serverless architecture puts the responsibility of maintaining and deploying servers on the cloud-platform provider rather than the developer. Hence, our main concern will be on code development and logic building, not the infrastructure of the servers.

👇 Know more about Serverless Framework 👇

Serverless Computing in GCP 🔍

Since, we know about the basics of serverless computing, in this section, we will focus on the implementation of the serverless framework using GCP as our host cloud-platform provider. We will be using their key products for developing and deploying high-scalable web applications on a fully managed serverless platform.

The things shared below are just for reference on understanding more about serverless computing in GCP.

📢 Designing a serverless app on the Google Cloud

Serverless Computing in GCP uses the following products: -

  • Cloud Functions ❴❵

These are the functions provided as a service by Google Cloud where users can define and develop their application that needs to be deployed on the cloud. Before knowing Functions, we should know about the concept of events and triggers.

  • Events: these are the occurrences that happen within a cloud environment in which some action is taken. Use to refer all triggers to that cloud function.
  • Triggers: Response created on the occurrence of an event in the cloud is done using triggers.

👇 Learn how to build cloud functions in GCP 👇

  • Cloud Run ▶️

Cloud Run is based on the concept of containers in GCP. It is used for container development and deployment using any language like Python, Java, Nodejs, .Net, etc. It automatically and quickly scales up and down the service providence based on incoming traffic such that the developer needs to pay only for those resources that our application uses down to the nearest 100th millisecond.

👇 Learn how to deploy containers to Cloud Run in GCP 👇

  • App Engine 🚆

App Engine helps developers in deploying source code on the cloud while preserving all serverless benefits. It can use any language for deployment and can also provide multiple services in different languages integrated together.

👇Documentation for App Engine standard environment using Node.js👇

  • Datastore and Firestore 💥

Datastore is a highly scalable NoSQL database provided by GCP for various web and mobile applications. Firestore is the updated version for Datastore. Also called the next generation of Datastore.

👇 An Overview of Datastore and Firestore in GCP 👇

DEPLOY A CLOUD RUN SERVICE LOCALLY USING VISUAL STUDIO CODE 🚀

Now that we know all about the basics of Serverless Computing in GCP, we shall start with our main concern. Here are the steps that will help us provide a basic template for making a serverless application and deploying that template on the Cloud Run locally by using VS Code.

All we need to have: -

  • Project in Google Cloud Platform (where Cloud Run will be present)
  • Empty Folder in our Drive (where we will create a sample app)

1) Installing Cloud Code extension in VSCode ☁️

  • Cloud Code provides repository samples with best practices for various programming languages. These sample codes can be used for reference.
  • Open Visual Studio Code, then click on the Extension icon on the sidebar and search for Cloud Code.
  • Click on Install.
  • After installation, the Cloud Code symbol will appear on both the sidebar and status bar.
📢 Cloud Code Extention for VS Code

2) Download the sample app (Node.js) 📥

  • On the status bar, click on Cloud Code, It will open a placeholder on top of the VS code.
  • Goto New Application -> Cloud Run application-> Node.js Cloud Run.
  • It will ask to create a directory named “hello-world-1”. Click on “Ok” and wait for a while till the cloud code generates the sample app for deployment.
  • The sample code is generated by cloud code which contains the following concerning files -> DockerFile and index.js
📢 Image of the Sample Code Generated

💡 IMPORTANT 💡

  • These samples can be built using Docker or Buildpacks.
  • Install Docker for suitable Operating Systems (links for macOS and Windows are provided below)

3) Connecting our project in GCP with VS Code 🌐

Cloud Code provides developers with a Cloud Run Emulator which emulates the Cloud Run environment locally. (Requires Docker for System installed — Mentioned above). Also, before running the app, ensure we are logged in with the proper GCP account where the project is present.

  • Click on the Cloud Run button in the sidebar.
  • Click on the Click here for Login button.
  • Sign In with the ID where our project is created.
  • At the end of this step, we will be redirected to a page where we receive the following message:-

You are now authenticated with Google Cloud SDKYay! 🤓

  • After successful login, we would see our project name under the Cloud Run sidebar and all the services that we have provided in Cloud Run will also be visible to us.
  • Now, we have successfully connected our google cloud project with the sample application. We can also switch to other google cloud projects with a switch button on the right of our project name in the sidebar.
📢 Project and Account Details on the sidebar (left)

4) Run the sample app code locally 🚀

  • Click on the Cloud Code option again in the status bar below.
  • Again, the same placeholder will be visible at the top, but now, select Run on Cloud Run Emulator.

We will configure our deployment on the cloud server locally by the emulator.

  • In the Build Settings, just switch the build from Docker to Buildpacks. Buildpacks make code updation super-fast.
  • In the Show Advanced Settings, always set CPUs to One Virtual CPU for best performance.
  • Scroll to the end and click on Run

On deploying locally the first time, it will take around 5–7 minutes, and the rest after will be much faster. In the end, we will be provided with a message on the terminal: -

Forwarded URL from service hello-world-1: [localhost-URL]

Click on the URL… We will see the following result 👍.

📢 Yay! The application runs perfectly when deployed locally

We have deployed the sample application locally using Cloud Run Emulator, you are doing great till now 🤟.

Now we will update changes in the application.

5) View Updates on hot reload 🔥

Try to change the following selected code with your logic and save changes.

📢 Make sure your changes are only on the highlighted area of the code

Then on changes, reload the page and updates will be visible on the Terminal as well as the app deployed.

  • Example of my changes: —
📢 Hello World!

After updation, we will be connecting our application with the database (we use Datastore).

6) Adding a Datastore database 🔑

  • Cloud code is also integrated with GCP API Explorer. Click on Cloud Code on the sidebar and select the dropdown named GCP APIs.
  • Open the drop box and select the Cloud Databases drop box inside it.
  • In that Dropbox, select Datastore API.
📢 Datastore API enables
  • Goto Install Client Library -> NodeJS and run the following command.
npm install –save @google-cloud/datastore
  • The above command will run npm install for the Datastore library.
  • After installation, we will go through Google Cloud Datastore: Node.js Client.

This documentation will provide the code for basic operations and connection of our project and datastore in GCP 👌

For example, If I want to read an existing entity from the Datastore, then follow these steps: —

  • Use the following code on our index.js as it will create a connection of our datastore with the application by listing tasks provided to it.
  • On execution of the updated code, the task works completely fine until we check our terminal where the “Tasks” that we console using listTask() in the datastore.
  • Oh no, it is not visible — A bug in our Code!😟… Follow the next step for local debugging.

7) Local Debugging Phase [Optional Step — if bug encountered😓]

  • Stop the running of our application first using the Stop option at the top.
  • Now, make sure we have set Debug: Toggle Auto Attach to Smart.
  • This will now help in attaching the running project/application for debugging.
  • Now, go to our problem spot so that we can place a breakpoint there. A breakpoint is a debugging technique placed wherever we want to pause the debugger’s execution.
  • Now run the application after breakpoints by clicking on Cloud Code present in the status bar down.
  • On the placeholder above, select Debug on Cloud Run Emulator
📢 Run the code in Debug Mode
  • We will receive everything about the problem spot after it gets debugged, and we can work on actions according to the report given by the debugger.

Continuing the above example: —

  • In the previously mentioned example, nothing was visible on the console on calling “listTask”.
📢 Error in the selected line
  • So, I set up my Task query as a problem spot and added a breakpoint.
  • Then, on running in debug mode, I got a report regarding the task query that “It is an Array of length 0” which means nothing was read by the code from the datastore.
📢 The debugger shows details about the breakpoint
  • Now, on finding the solution to this bug, we may stop the debugger Cloud Code run by clicking the stop button at the top.

Now, run the code again on Cloud Code Run and we may see our bug fixed 😵… Tiring Right!

We will be finally deploying the app on Cloud Run 🥳.

8) Deploying the service to the cloud 💻

  • Now, we just need to click again on Cloud Code on the status bar and now select the Deploy to Cloud Run option on the top.
  • With default settings remaining scroll at the end and click the Deploy button.
  • Background Process being done now — Building your image container -> Pushing it to your container registry -> Deploying the application on Cloud Run
  • After successful deployment, a URL will be shared by the VSCode of the deployed app.
📢 Successful Deployment

Congratulations😃! Our application is now deployed. It can be accessed by anyone now.

9) View details about our deployed application using server logs 🗂️

  • Once deployed, go to cloud code at the sidebar and see if our service is available.
📢 Service Deployed on Cloud Run visible on VSCode
  • Expand our service dropdown and we can access the details and properties of our service there.
  • For log viewing, there is a button on the extreme right of the service name and on click, we will access the log viewer.
  • With the default configuration, we can access the timely report of the behavior of our application, once deployed.

CONCLUSION

The main purpose of this blog is to: -

  • Provide references for using the serverless framework and resources for serverless computing in GCP.
  • Tell about how an application is deployed locally on Cloud Run using Visual Studio Code.

Hence, the complete management of the server is done by Cloud Run while we just write and update our application on Visual Studio Code 😏.

📚 Thank you for being a patient reader 📚

I would greatly appreciate it if you shared your views about this blog in the comments. I always welcome your suggestions and advice💙. Also, if you have any queries about anything regarding the content, you are free to contact me.

📞 My Social Media Handles: -

--

--

Shubh_Sc
DSC KIET
Writer for

Hi everyone! My name is Shubh Chaurasia and I am an engineering student pursuing B.Tech. in CSE from KIET Group of Institutions, Ghaziabad.