While searching for a proper article on how to add a reverse proxy in Azure Web App, I couldn't find comprehensive documentation. So, here we are! In this article, we will explore how to add a reverse proxy to your Azure Web App, whether you're using Node.js, Java, PHP, or .NET as your runtime stack. This approach works seamlessly since Azure Web Apps are hosted on IIS server.

What is a Reverse Proxy?

A reverse proxy is a method to forward incoming requests to another server. This setup is particularly useful in scenarios like having a frontend exposed to a public endpoint and a backend deployed on a private network. With a reverse proxy, you can route traffic from the public frontend to the private backend.

One common use case is using an Azure Web App as the frontend and an Azure Functions serving as the API backend. Both may exist on the same private network, with the Web App connected to a gateway for public accessibility. Instead of deploying a new Application Gateway (which can be costly), we can use the reverse proxy functionality within the Azure Web App to handle traffic.

Benefits of a Reverse Proxy

• Security and Anonymity
• SSL Termination
• Centralized Authentication
• Content Modification

Let's Get Started

Since Azure Web Apps use the IIS server, we need to install a reverse proxy extension. Here's how:

1. Open your Azure Web App in the Azure portal, search for "Extensions," and click the "Add" button.

We will be using EelcoKoster's extension and if you are concern about T&C then read nuget's T&C.

2. Search for "reverseproxy" and select "ReverseProxy(1.0.4) by Eelco Koster, Jerome Haltom." Click "Add."

3. Click on "Browse."

4. Add the reverse proxy rules and click "Save to web.config." Restart your web app afterward. For demonstration purposes, we'll use a public sample REST API (https://api.restful-api.dev) as the redirect URL.

<rewrite>
  <rules>
    <rule name="APIProxy" stopProcessing="true">
      <match url="^api/?(.*)" />
      <action type="Rewrite" url="https://api.restful-api.dev/{R:1}" logRewrittenUrl="true" />
    </rule>
  </rules>
  <outboundRules>
    <rule name="AddCORSHeaders" preCondition="IsApiResponse">
      <match serverVariable="RESPONSE_Access-Control-Allow-Origin" pattern=".*" />
      <action type="Rewrite" value="*" />
    </rule>
    <preConditions>
      <preCondition name="IsApiResponse">
        <add input="{RESPONSE_Content-Type}" pattern="^application/json" />
      </preCondition>
    </preConditions>
  </outboundRules>
</rewrite>

5. Let's test, and if you see our web app result and public REST API results are same !!

Conclusion

By following the steps above, you've successfully set up a reverse proxy in your Azure Web App. This method provides a cost-effective and efficient way to route traffic while enhancing security and managing backend services privately.