{"id":27672,"date":"2018-12-26T10:01:30","date_gmt":"2018-12-26T17:01:30","guid":{"rendered":"http:\/\/devblogs.microsoft.com\/premier-developer\/?p=27672"},"modified":"2019-02-14T20:17:39","modified_gmt":"2019-02-15T03:17:39","slug":"why-you-should-consider-vs-code-for-your-kubernetes-docker-work","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/premier-developer\/why-you-should-consider-vs-code-for-your-kubernetes-docker-work\/","title":{"rendered":"Why you should consider VS Code for your Kubernetes\/Docker work"},"content":{"rendered":"<p>Premier Developer consultant <a href=\"https:\/\/www.linkedin.com\/in\/julienoudot\/\">Julien Oudot<\/a> spotlights VS Code for Kubernetes and Docker workloads.<\/p>\n<hr \/>\n<p>Visual Studio Code (VS Code) is sometimes considered as a slimmer and minimalist version of Visual Studio. However, depending on the technology stack used, VS Code can really be the platform of choice to benefit from the best features. Furthermore, its cross platform support allow users to have the same customer experience on multiple platforms (Windows, Linux and Mac OS).<\/p>\n<p>With its modular architecture based on the concept of extensions, a lot can be done with Docker, Kubernetes or Helm just after only few extension installations. From simple YAML editor functionalities that save a lot of headaches dealing with indentation, to more advanced scenarios, like opening an interactive session inside a Docker Container running in a remote Kubernetes cluster.<\/p>\n<p>The below tutorial will walk you through some of the convenient features provided by the following VS Code extensions:<\/p>\n<ul>\n<li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=PeterJausovec.vscode-docker\">Docker<\/a><\/li>\n<li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=ms-kubernetes-tools.vscode-kubernetes-tools\">Kubernetes<\/a><\/li>\n<li><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=redhat.vscode-yaml\">YAML Support by Red Hat<\/a><\/li>\n<\/ul>\n<p>On a Linux based OS, you need to be able to run docker commands from VS Code. To that aim, we need to have the current user added to the docker group. Run the two following commands (restart might be needed):<\/p>\n<pre>sudo groupadd docker\r\nsudo usermod -aG docker $USER<\/pre>\n<p><strong>1. Connect VS Code to Docker Hub account and Kubernetes cluster<\/strong><\/p>\n<p>To connect your Visual Studio Code to a Docker hub account, open Visual Studio Code and click on <b>Settings<\/b> at the bottom left.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb1.png\"><img decoding=\"async\" title=\"kb1\" src=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb1_thumb.png\" alt=\"kb1\" width=\"219\" height=\"244\" border=\"0\" \/><\/a><\/p>\n<p>Search for vsdocker and override the two settings by entering the two key-value pairs on the right-hand side:<\/p>\n<pre>\"vsdocker.imageUser\": \"docker.io\/&lt;dockerHubUserName&gt;\",<\/pre>\n<p>&#8220;docker.defaultRegistryPath&#8221;:&#8221;&lt;dockerHubUserName&gt;&#8221;<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb2.png\"><img decoding=\"async\" title=\"kb2\" src=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb2_thumb.png\" alt=\"kb2\" width=\"1028\" height=\"216\" border=\"0\" \/><\/a><\/p>\n<p>Then, click on the Docker extension and click on <b>Docker Hub<\/b> to authenticate using the Docker ID and password set up in the previous task<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb3.png\"><img decoding=\"async\" title=\"kb3\" src=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb3_thumb.png\" alt=\"kb3\" width=\"1028\" height=\"583\" border=\"0\" \/><\/a><\/p>\n<p>Finally, you also need to authenticate from the terminal running inside VS Code. Click at the bottom of the window, then <b>Terminal<\/b> and enter the command that will prompt you for your docker credentials.<\/p>\n<pre>docker login<\/pre>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb4.png\"><img decoding=\"async\" title=\"kb4\" src=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb4_thumb.png\" alt=\"kb4\" width=\"1028\" height=\"355\" border=\"0\" \/><\/a><\/p>\n<p>Before we can deploy a basic application to a Kubernetes cluster, we just need to make sure that we are connected to the right cluster. Type the following command<\/p>\n<pre>kubectl config current-context<\/pre>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb5.png\"><img decoding=\"async\" title=\"kb5\" src=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb5_thumb.png\" alt=\"kb5\" width=\"1028\" height=\"353\" border=\"0\" \/><\/a><\/p>\n<p>If you are not connected to any Kubernetes cluster and have an AKS cluster running in Azure, you will need to run the following command.<\/p>\n<pre>az aks get-credentials --resource-group &lt;AKS-RESOURCE-GROUP&gt; --name &lt;AKS-CLUSTER-NAME&gt;<\/pre>\n<p><strong>2. Deploy a NodeJS application to Kubernetes from VS Code<\/strong><\/p>\n<p>Download a basic Node JS application from <a href=\"https:\/\/github.com\/joudot\/nodejs\">https:\/\/github.com\/joudot\/nodejs<\/a>.<\/p>\n<p>From VS Code, click on Explorer and then Open Folder.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb6.png\"><img decoding=\"async\" title=\"kb6\" src=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb6_thumb.png\" alt=\"kb6\" width=\"195\" height=\"244\" border=\"0\" \/><\/a><\/p>\n<p>Select the folder <b>nodejs<\/b> that was just downloaded and click OK. You can see the basic Node JS application provided, as well as a <b>Dockerfile<\/b> to build its image.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb7.png\"><img decoding=\"async\" title=\"kb7\" src=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb7_thumb.png\" alt=\"kb7\" width=\"1028\" height=\"591\" border=\"0\" \/><\/a><\/p>\n<p>Open command palette by clicking on the <b>Settings<\/b> icon and then <b>Command Palette.<\/b><\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb8.png\"><img decoding=\"async\" title=\"kb8\" src=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb8_thumb.png\" alt=\"kb8\" width=\"184\" height=\"244\" border=\"0\" \/><\/a><\/p>\n<p>Type <b>Kubernetes Run<\/b> and select it. It will build the Node JS image, push it to Docker Hub and deploy the application into your AKS cluster.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb9.png\"><img decoding=\"async\" title=\"kb9\" src=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb9_thumb.png\" alt=\"kb9\" width=\"644\" height=\"69\" border=\"0\" \/><\/a><\/p>\n<p>You can follow these steps at the bottom of the IDE.<\/p>\n<p>Once complete, click on the <b>Kubernetes<\/b> extension, then expand the cluster and click <b>Workloads &#8211; Deployments &#8211; nodejs<\/b>. You will see what is deployed in your cluster. The view will show you the YAML file that you can interpret, understand and reuse for other Kubernetes API objects to be deployed. More generally, VS Code is a user-friendly solution to work with YAML files since it helps with indentation, auto complete and coloration. There is also the <a href=\"https:\/\/kubernetes.io\/docs\/reference\/kubectl\/overview\/\">kubectl explain<\/a> integrated tool to annotate Kubernetes API objects and dynamically see documentation when hovering over YAML fields.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb10.png\"><img decoding=\"async\" title=\"kb10\" src=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb10_thumb.png\" alt=\"kb10\" width=\"943\" height=\"772\" border=\"0\" \/><\/a><\/p>\n<p>If you look under <b>Services<\/b>, you will see that the Node JS application is deployed but is not exposed through a service. To do this, open the VS Code <b>Terminal<\/b> and type<\/p>\n<pre>kubectl expose deployments\/nodejs --port=80 --target-port=8080 --type=LoadBalancer<\/pre>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb11.png\"><img decoding=\"async\" title=\"kb11\" src=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb11_thumb.png\" alt=\"kb11\" width=\"644\" height=\"104\" border=\"0\" \/><\/a><\/p>\n<p>Note the target port that is 8080 because, as specified on the Dockerfile, we expect traffic to come through the port 8080 in the container.<\/p>\n<p>Just like we did from the Linux terminal, we can follow the service creation from the VS Code terminal with the command<\/p>\n<pre>kubectl get svc<\/pre>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb12.png\"><img decoding=\"async\" title=\"kb12\" src=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb12_thumb.png\" alt=\"kb12\" width=\"644\" height=\"76\" border=\"0\" \/><\/a><\/p>\n<p>Once the service has been set up and the IP address has been created in Azure, you can <b>refresh<\/b> the cluster view and call the IP address from any browser.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb13.png\"><img decoding=\"async\" title=\"kb13\" src=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb13_thumb.png\" alt=\"kb13\" width=\"250\" height=\"484\" border=\"0\" \/><\/a><\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb14.png\"><img decoding=\"async\" title=\"kb14\" src=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb14_thumb.png\" alt=\"kb14\" width=\"644\" height=\"270\" border=\"0\" \/><\/a><\/p>\n<p><strong>3. Interact with deployed Pods and Containers from VS Code<\/strong><\/p>\n<p>Another convenient feature we can access from the Kubernetes clusters view, is to interact with the pods and containers. Right-click on the <b>nodejs<\/b> pod and <b>Show Logs<\/b>. It will show you the container logs. In our case, the Node JS application started successfully and is waiting for traffic on port 8080. Everything looks good!<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb15.png\"><img decoding=\"async\" title=\"kb15\" src=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb15_thumb.png\" alt=\"kb15\" width=\"272\" height=\"484\" border=\"0\" \/><\/a><\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb16.png\"><img decoding=\"async\" title=\"kb16\" src=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb16_thumb1.png\" alt=\"kb16\" width=\"644\" height=\"94\" border=\"0\" \/><\/a><\/p>\n<p>You can also click <b>Describe<\/b>, which is equivalent to the <b>kubectl describe pod<\/b> command and will give you information on the pod status.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb17.png\"><img decoding=\"async\" title=\"kb17\" src=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb17_thumb.png\" alt=\"kb17\" width=\"292\" height=\"484\" border=\"0\" \/><\/a><\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb18.png\"><img decoding=\"async\" title=\"kb18\" src=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb18_thumb.png\" alt=\"kb18\" width=\"614\" height=\"484\" border=\"0\" \/><\/a><\/p>\n<p>Finally, what we can do is open an interactive session from within the container for troubleshooting purpose. Right-click on the <b>nodejs<\/b> pod and click <b>Terminal<\/b>.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb19.png\"><img decoding=\"async\" title=\"kb19\" src=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb19_thumb.png\" alt=\"kb19\" width=\"246\" height=\"484\" border=\"0\" \/><\/a><\/p>\n<p>You can type the <b>ls<\/b> or <b>cat server.js<\/b> commands to see what is inside the container file system.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb20.png\"><img decoding=\"async\" title=\"kb20\" src=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb20_thumb.png\" alt=\"kb20\" width=\"644\" height=\"260\" border=\"0\" \/><\/a><\/p>\n<p>Open the <b>Command Palette<\/b> one last time and type <b>Create<\/b>. You will see that VS Code can help you to create <a href=\"https:\/\/azure.microsoft.com\/en-us\/services\/container-registry\/\">Azure Container Registries<\/a>, Helm Chart or even Kubernetes clusters. All of it without leaving the IDE.<\/p>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb21.png\"><img decoding=\"async\" title=\"kb21\" src=\"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-content\/uploads\/sites\/31\/2019\/01\/kb21_thumb.png\" alt=\"kb21\" width=\"644\" height=\"213\" border=\"0\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>VS Code can really be the platform of choice to benefit from the best features. Furthermore, its cross platform support allow users to have the same customer experience on multiple platforms (Windows, Linux and Mac OS). <\/p>\n","protected":false},"author":582,"featured_media":27673,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[22,126],"tags":[21,29,92,3],"class_list":["post-27672","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-devops","category-kubernetes","tag-devops","tag-docker","tag-kubernetes","tag-team"],"acf":[],"blog_post_summary":"<p>VS Code can really be the platform of choice to benefit from the best features. Furthermore, its cross platform support allow users to have the same customer experience on multiple platforms (Windows, Linux and Mac OS). <\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts\/27672","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/users\/582"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/comments?post=27672"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/posts\/27672\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/media\/27673"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/media?parent=27672"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/categories?post=27672"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/premier-developer\/wp-json\/wp\/v2\/tags?post=27672"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}