[Build and Deploy Staging Site] Publish from microsoft/azuretipsandtricks-private:main/src/blog

blog/tip365.md

@@ -0,0 +1,92 @@
+---
+type: post
+title: "Tip 365 - How to debug and run code locally with Bridge to Kubernetes for VS Code"
+excerpt: "Learn how to debug and run code locally with Bridge to Kubernetes for VS Code"
+tags: [Kubernetes, Developer Tools]
+share: true
+date: 2022-05-11 08:00:00
+---
+
+::: tip 
+
+:fire:  :fire:  Download the FREE Azure Developer Guide eBook [here](http://aka.ms/azuredevebook?WT.mc_id=docs-azuredevtips-azureappsdev).
+
+:bulb: Learn more : [How Bridge to Kubernetes works](https://docs.microsoft.com/visualstudio/bridge/overview-bridge-to-kubernetes?WT.mc_id=docs-azuredevtips-azureappsdev). 
+
+:tv: Watch the video : [How to debug and run code locally with Bridge to Kubernetes for VS Code](https://youtu.be/t_wtaOTaPuE?WT.mc_id=youtube-azuredevtips-azureappsdev).
+
+:::
+
+### How to debug and run code locally with Bridge to Kubernetes for VS Code
+
+#### Troubleshoot complex container solutions
+You can use containers to run complex solutions that consist of multiple services, like an HTTP server, a database and a cache. To manage these containers, you can use Kubernetes as an orchestrator. In Azure, you would use [Azure Kubernetes Service](https://docs.microsoft.com/azure/aks/intro-kubernetes?WT.mc_id=docs-azuredevtips-azureappsdev) for this. Troubleshooting applications in such a complex solution seems difficult, but [Bridge to Kubernetes](https://docs.microsoft.com/visualstudio/bridge/overview-bridge-to-kubernetes?WT.mc_id=docs-azuredevtips-azureappsdev) can help. Bridge to Kubernetes allows you to run and debug code on your development computer for an application that runs in your Kubernetes cluster.
+
+In this post, we'll use [Bridge to Kubernetes](https://docs.microsoft.com/visualstudio/bridge/overview-bridge-to-kubernetes?WT.mc_id=docs-azuredevtips-azureappsdev) in [VS Code](https://code.visualstudio.com?WT.mc_id=other-azuredevtips-azureappsdev) to debug a sample application that runs in [Azure Kubernetes Service](https://docs.microsoft.com/azure/aks/intro-kubernetes?WT.mc_id=docs-azuredevtips-azureappsdev).
+
+#### Prerequisites
+If you want to follow along, you'll need the following:
+* An Azure subscription (If you don't have an Azure subscription, create a [free account](https://azure.microsoft.com/free/?WT.mc_id=azure-azuredevtips-azureappsdev) before you begin)
+* The [latest version of VS Code](https://code.visualstudio.com/download?WT.mc_id=other-azuredevtips-azureappsdev)
+* An existing Azure Kubernetes Service cluster with a sample application running in it. You can follow [this tutorial](https://docs.microsoft.com/azure/aks/kubernetes-walkthrough?WT.mc_id=docs-azuredevtips-azureappsdev) to set it up
+* The latest version of [Python](https://www.python.org/downloads/?WT.mc_id=other-azuredevtips-azureappsdev). You'll need this to debug the [sample application](https://github.com/Azure-Samples/azure-voting-app-redis?WT.mc_id=github-azuredevtips-azureappsdev)
+
+#### Use Bridge to Kubernetes
+This tutorial assumes that you have an Azure Kubernetes Service that is running the [sample voting application](https://docs.microsoft.com/azure/aks/kubernetes-walkthrough?WT.mc_id=docs-azuredevtips-azureappsdev). This application has a frontend and backend, and you can find its source code [here](https://github.com/Azure-Samples/azure-voting-app-redis?WT.mc_id=github-azuredevtips-azureappsdev). 
+
+We'll start by installing the [Bridge to Kubernetes extension](https://marketplace.visualstudio.com/items?itemName=mindaro.mindaro&WT.mc_id=microsoft-azuredevtips-azureappsdev) in VS Code.
+
+1. Open VS Code and open the folder with the [source code of the sample application](https://github.com/Azure-Samples/azure-voting-app-redis?WT.mc_id=github-azuredevtips-azureappsdev)
+2. Click on the **Extensions** menu
+3. Search for **"Bridge to Kubernetes"**. Select the result and click **Install**
+
+<img :src="$withBase('/files/149extension.png')">
+
+(Bridge to Kubernetes extension for VS Code)
+
+4. You might see messages in VS Code that tell you to install dependencies like the YAML extension and Kubectl. Install the dependencies that it asks for
+5. Assuming that you didn't connect your local development environment to AKS yet, VS Code will prompt you to **"Set the current cluster and name"**. Click on the message, which will take you to the Kubernetes menu
+   1. In the **Clouds** section of the Kubernetes menu, you'll see Azure. When you sign into your Azure account, you will see your AKS cluster. Right-click on it and select **"Merge into Kubeconfig"**. Your local environment can now connect to the AKS cluster
+6. In VS Code, click the **View** menu and **Command Palette**
+7. In the Command Palette, type Bridge to Kubernetes and select **"Bridge to Kubernetes: Configure"** to set it up
+
+<img :src="$withBase('/files/149commandpallette.png')">
+
+(Configure Bridge to Kubernetes in VS Code)
+
+8. Next, choose the **azure-vote-front** service to redirect to your machine. This is the frontend of the sample application
+
+<img :src="$withBase('/files/149commandpallette2.png')">
+
+(Redirect traffic from the frontend to your local machine)
+
+9.  Enter a local port to redirect the traffic to, like **80**
+10. And next, click **"+ Create a new launch configuration"**
+    1.  Select **Python**
+    2.  And select **"Python file Debug the current active Python file"**. This creates a launch.json file, which you need for debugging in VS Code
+    3.  Finally, pick **No** for the question **"Isolate your local version of azure-vote-front from other developers?"**. This will redirect all the traffic for the frontend to your local machine which is okay, as you are the only developer working on it right now
+
+That's it! Let's start debugging the app. 
+
+1. In the sample app in VS Code, open the azure-vote folder and open the **main.py** file
+2. Now click on the **Run and Debug** menu on the left
+
+<img :src="$withBase('/files/149debug.png')">
+
+(Debug in VS Code)
+
+3. Click on the Run and Debug configuration **"Python: Current File with Kubernetes"**. This will start debugging. As you are using Bridge to Kubernetes, all traffic that flows to the frontend will be redirected to your local machine. This will open a browser with the frontend running in it
+
+<img :src="$withBase('/files/149votingapp.png')">
+
+(The sample app, redirected to the local machine)
+
+4. In main.py, **set a breakpoint** at line 77 "vote = request.form['vote']"
+5. In the browser, click one of the voting buttons. This should trigger the breakpoint and allow you to debug the application, which is still running in the AKS cluster
+
+<img :src="$withBase('/files/149result.png')">
+
+(Debugging the app locally)
+
+#### Conclusion
+[Bridge to Kubernetes](https://docs.microsoft.com/visualstudio/bridge/overview-bridge-to-kubernetes?WT.mc_id=docs-azuredevtips-azureappsdev) makes it easy to debug code that runs in a Kubernetes cluster. It is easy to use with the [VS Code extension](https://marketplace.visualstudio.com/items?itemName=mindaro.mindaro&WT.mc_id=microsoft-azuredevtips-azureappsdev). You can use it alone or [with a team of developers](https://docs.microsoft.com/visualstudio/bridge/overview-bridge-to-kubernetes#using-routing-capabilities-for-developing-in-isolation?WT.mc_id=docs-azuredevtips-azureappsdev) and [configure it](https://docs.microsoft.com/visualstudio/bridge/configure-bridge-to-kubernetes?WT.mc_id=docs-azuredevtips-azureappsdev) when needed. Go and check it out!