{"id":376,"date":"2020-11-15T13:06:42","date_gmt":"2020-11-15T13:06:42","guid":{"rendered":"https:\/\/rejupillai.com\/?p=376"},"modified":"2026-04-13T00:09:03","modified_gmt":"2026-04-13T00:09:03","slug":"cloud-code","status":"publish","type":"post","link":"https:\/\/rejupillai.com\/index.php\/2020\/11\/15\/cloud-code\/","title":{"rendered":"Build Kube Apps w\/ Cloud Code"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Introduction<\/h2>\n\n\n\n<p>Google cloud recently released <a href=\"https:\/\/cloud.google.com\/blog\/topics\/anthos\/introducing-the-anthos-developer-sandbox\">Anthos Developer Sandbox <\/a>to make it easy for developers to build, package, test and debug  cloud native apps using nothing but <strong>Browser<\/strong> as interface. I plan to write a Part-2 later to cover my learnings on Developer Sandbox, but thought it would be a good idea to first cover the foundations here in Part-1.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Goal<\/h2>\n\n\n\n<p>In this blog, I will demonstrate how easy it is for developers to do DevTest cycles for a cloud native app using <a href=\"https:\/\/cloud.google.com\/code\">Cloud Code<\/a> without ever leaving the IDE.<\/p>\n\n\n\n<p>A non-goal is to augment the developer flow with CI\/CD, which I will cover in Part-2. So clearly the scope here is local development and test by leveraging Google Cloud.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Pre-requisites<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/code.visualstudio.com\/download\">VSCode<\/a> IDE.  Note &#8211; InteliJ also support Cloud Code extension, but this blog has instructions only for VSCode.<\/li><li><strong>Docker Daemon<\/strong> installed in your laptop. <a href=\"https:\/\/hub.docker.com\/editions\/community\/docker-ce-desktop-mac\/\">Download<\/a> and install the latest version if you don&#8217;t have it already.<\/li><li><strong>Google Cloud Project.<\/strong> You can use any existing, or <a href=\"https:\/\/cloud.google.com\/resource-manager\/docs\/creating-managing-projects\">create a new Project<\/a>. Note &#8211; you will need a Google Cloud account. <a href=\"https:\/\/cloud.google.com\/\">Subscribe for free<\/a> with a $300 credits <\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Detailed Steps<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1 : Setup developer environment.<\/h3>\n\n\n\n<p>Launch <a href=\"vscode:extension\/GoogleCloudTools.cloudcode  \">VSCode Extension<\/a> page and <strong>Install<\/strong> Cloud Code extension.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-2.png\" alt=\"\" class=\"wp-image-383\" width=\"588\" height=\"124\" srcset=\"https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-2.png 774w, https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-2-300x64.png 300w, https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-2-768x163.png 768w\" sizes=\"auto, (max-width: 588px) 100vw, 588px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2 : Clone hello-world node.js app <\/h3>\n\n\n\n<p>At this point, clone the hello-world app from this Github <a href=\"https:\/\/github.com\/rejupillai\/hello-world-1.git\">repository<\/a>  Along with app source, the repository also has the required Dockerfile and K8s manifest yamls describing the deployment and service. Pretty standard !  In Part-2, I will cover how <a href=\"https:\/\/cloud.google.com\/blog\/products\/containers-kubernetes\/google-cloud-now-supports-buildpacks\">BuildPacks<\/a> can be used to further advance this step.<\/p>\n\n\n\n<p>Also note that Dockerfile must be at the root dir, and all Kubernetes yaml should go into a folder named <strong>kubernetes-manifests<\/strong>.<\/p>\n\n\n\n<p>After the above extension is successfully installed, the relevant actions will be available in the side palette (marked red in the image below)<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"567\" src=\"https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-4-1024x567.png\" alt=\"\" class=\"wp-image-385\" srcset=\"https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-4-1024x567.png 1024w, https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-4-300x166.png 300w, https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-4-768x425.png 768w, https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-4-1170x648.png 1170w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3 : Create GKE cluster.<\/h3>\n\n\n\n<p>From the side palette within IDE, Click the &#8220;Code Cloud &#8211; Kubernetes&#8221; to launch the cluster options, click the + symbol.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-6.png\" alt=\"\" class=\"wp-image-389\" width=\"60\" height=\"60\"\/><\/figure>\n\n\n\n<p>Choose an existing Cluster or create a New GKE Cluster with the configurations required for running the apps.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"164\" src=\"https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-5-1024x164.png\" alt=\"\" class=\"wp-image-388\" srcset=\"https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-5-1024x164.png 1024w, https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-5-300x48.png 300w, https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-5-768x123.png 768w, https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-5-1170x187.png 1170w, https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-5.png 1578w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"675\" src=\"https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-7-1024x675.png\" alt=\"\" class=\"wp-image-390\" srcset=\"https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-7-1024x675.png 1024w, https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-7-300x198.png 300w, https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-7-768x506.png 768w, https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-7-1170x771.png 1170w, https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-7.png 1778w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4 : Review cluster details.<\/h3>\n\n\n\n<p>The Cluster can take upto 5 mins for provisioning.  After the cluster is created, you can see more details in the &#8220;Kubernetes Explorer&#8221; window. Notice that the Context name of the Cluster is combination of 3 elements: <strong>&lt;gke&gt; + &lt;project-name&gt; + &lt;cluster-name&gt;<\/strong>.  The * mark indicates that amongst other clusters that you may have, the IDE is currently fixed on this one as the <strong>current-context<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-8-1024x809.png\" alt=\"\" class=\"wp-image-391\" width=\"589\" height=\"464\" srcset=\"https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-8-1024x809.png 1024w, https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-8-300x237.png 300w\" sizes=\"auto, (max-width: 589px) 100vw, 589px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5 : Build Images and Deploy to Kubernetes<\/h3>\n\n\n\n<p>You can deploy the app to the chosen Cluster using  VSCode command palette &#8211; <strong>Run on Kubernetes<\/strong> from the newly installed Cloud Code extension. <\/p>\n\n\n\n<p>If the project chosen is a new one, then you are required to provide a Docker-registry, such as <strong>gcr.io<\/strong>, to host your images after the app is built and containerised. You don&#8217;t have to leave the IDE at any point<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"282\" src=\"https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-9-1024x282.png\" alt=\"\" class=\"wp-image-392\" srcset=\"https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-9-1024x282.png 1024w, https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-9-300x83.png 300w, https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-9-768x212.png 768w, https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-9-1170x323.png 1170w, https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-9.png 2038w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Cloud Code output can be seen in the console.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"528\" src=\"https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-11-1024x528.png\" alt=\"\" class=\"wp-image-394\" srcset=\"https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-11-1024x528.png 1024w, https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-11-300x155.png 300w, https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-11-768x396.png 768w, https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-11-1170x603.png 1170w, https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-11.png 1284w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 6 : Access the node.js app (with LB URL)<\/h3>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"554\" src=\"https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-13-1024x554.png\" alt=\"\" class=\"wp-image-401\" srcset=\"https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-13-1024x554.png 1024w, https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-13-300x162.png 300w, https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-13-768x416.png 768w, https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-13-1170x633.png 1170w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 7 : Attach a Debugger.<\/h3>\n\n\n\n<p>Bring up the VS Code  Command Palette by doing CMD+SHIFT+P (on a Mac), and type in &#8220;Debug in Kubernetes&#8221;<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-16-1024x80.png\" alt=\"\" class=\"wp-image-404\" width=\"580\" height=\"45\" srcset=\"https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-16-1024x80.png 1024w, https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-16-300x23.png 300w, https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-16-768x60.png 768w, https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-16-1170x91.png 1170w, https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-16.png 1204w\" sizes=\"auto, (max-width: 580px) 100vw, 580px\" \/><\/figure>\n\n\n\n<p>The below confirmation allows to link the source code with the running container.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-14-1024x178.png\" alt=\"\" class=\"wp-image-402\" width=\"580\" height=\"100\" srcset=\"https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-14-1024x178.png 1024w, https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-14-300x52.png 300w, https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-14-768x133.png 768w, https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-14-1170x203.png 1170w, https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-14.png 1210w\" sizes=\"auto, (max-width: 580px) 100vw, 580px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1020\" height=\"42\" src=\"https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-17.png\" alt=\"\" class=\"wp-image-405\" srcset=\"https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-17.png 1020w, https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-17-300x12.png 300w, https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-17-768x32.png 768w\" sizes=\"auto, (max-width: 1020px) 100vw, 1020px\" \/><\/figure>\n\n\n\n<p>You can attach BreakPoint(s) in the source code the ususal way, and hit the application LB URL<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"265\" src=\"https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-15-1024x265.png\" alt=\"\" class=\"wp-image-403\" srcset=\"https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-15-1024x265.png 1024w, https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-15-300x78.png 300w, https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-15-768x199.png 768w, https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-15-1170x303.png 1170w, https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-15.png 1560w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Finally, control the flow using the navigation buttons.<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-12.png\" alt=\"\" class=\"wp-image-399\" width=\"391\" height=\"121\" srcset=\"https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-12.png 518w, https:\/\/rejupillai.com\/wp-content\/uploads\/2020\/11\/image-12-300x93.png 300w\" sizes=\"auto, (max-width: 391px) 100vw, 391px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>It&#8217;s often seen that developers have to use multiple systems to develop cloud native apps and live debugging is difficult in a containerised environment. Cloud Code IDE extension is very useful to do the local testing in the Cloud (or with minikube). We only explored handful of VS Code Command Palette commands, there are tonnes of them that will certainly help developers write and debug code faster and smarter.<\/p>\n\n\n\n<p>Outside of the IDE, you can also use command line tool <a href=\"https:\/\/skaffold.dev\/\">Skaffold<\/a> to push the app to Kubernetes.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">skaffold run --default-repo=gcr.io\/YOUR-PROJECT-ID-HERE\/cloudcode<\/pre>\n\n\n\n<p> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Google cloud recently released Anthos Developer Sandbox to make it easy for developers to build, package, test and debug cloud native apps using nothing but Browser as interface. I plan to write a Part-2 later to cover my learnings on Developer Sandbox, but thought it would be a good<\/p>\n","protected":false},"author":1,"featured_media":396,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-376","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-google-cloud","ct-col-2"],"_links":{"self":[{"href":"https:\/\/rejupillai.com\/index.php\/wp-json\/wp\/v2\/posts\/376","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rejupillai.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rejupillai.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rejupillai.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rejupillai.com\/index.php\/wp-json\/wp\/v2\/comments?post=376"}],"version-history":[{"count":31,"href":"https:\/\/rejupillai.com\/index.php\/wp-json\/wp\/v2\/posts\/376\/revisions"}],"predecessor-version":[{"id":575,"href":"https:\/\/rejupillai.com\/index.php\/wp-json\/wp\/v2\/posts\/376\/revisions\/575"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rejupillai.com\/index.php\/wp-json\/wp\/v2\/media\/396"}],"wp:attachment":[{"href":"https:\/\/rejupillai.com\/index.php\/wp-json\/wp\/v2\/media?parent=376"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rejupillai.com\/index.php\/wp-json\/wp\/v2\/categories?post=376"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rejupillai.com\/index.php\/wp-json\/wp\/v2\/tags?post=376"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}