Giter Site home page Giter Site logo

container-apps-nginx's Introduction

Path-based routing solution in Azure Container Apps with NGINX

Azure Container Apps is a fully managed serverless container service that enables you to deploy and run containerized applications without having to manage the infrastructure.

By default, HTTP apps in Azure Container Apps are accessible via a public URL that is unique to the app. However, you can use a reverse proxy like NGINX to route traffic to multiple apps based on the path or hostname.

In this tutorial, you'll learn how to use Azure Container Apps to configure path-based routing for a set of containerized applications using NGINX as a reverse proxy.

graph LR
  Traffic((http traffic)) --> Nginx
  Nginx -->|/app1| App1[App1]
  Nginx -->|/app2| App2[App2]
Loading

Deploy Azure Container Apps resources

  1. Configure environment variables for the various resources you'll deploy:

    RESOURCE_GROUP_NAME=path-based-routing-rg
    LOCATION=northeurope
    STORAGE_ACCOUNT_NAME=pathbasedrouting$RANDOM
    ENVIRONMENT_NAME=path-based-routing

    Note: $RANDOM is a bash variable that returns a random number and is used here to generate a storage account that is globally unique within Azure. If it's not available in your shell, use another unique value for the STORAGE_ACCOUNT_NAME variable.

  2. Create a resource group:

    az group create --name $RESOURCE_GROUP_NAME --location $LOCATION
  3. Create an Azure Container Apps environment:

    az containerapp env create --name $ENVIRONMENT_NAME \
        --resource-group $RESOURCE_GROUP_NAME --location $LOCATION
  4. Create two container apps in the environment:

    az containerapp create --name app1 --environment $ENVIRONMENT_NAME \
        --resource-group $RESOURCE_GROUP_NAME \
        --ingress internal --target-port 80
    
    az containerapp create --name app2 --environment $ENVIRONMENT_NAME \
        --resource-group $RESOURCE_GROUP_NAME \
        --ingress internal --target-port 80

    This will create two container apps, app1 and app2. Both apps are not publicly accessible and are only accessible within the environment.

  5. Create a container app running NGINX:

    az containerapp create --name nginx --environment $ENVIRONMENT_NAME \
        --resource-group $RESOURCE_GROUP_NAME \
        --ingress external --target-port 80 --image nginx

    This will create a container app running NGINX. The app is publicly accessible and is accessible from the internet. It'll be used as a reverse proxy to route traffic to the other two apps.

    The command should print the public URL of the NGINX app. Navigate to it to verify that the app is running.

Now that the Container Apps resources are created, you can proceed to configure the path-based routing.

Configure path-based routing

To configure path-based routing, you'll create an NGINX configuration file that defines the routing rules and upload it to an Azure File Share. Then you'll mount the file share to the NGINX container app.

  1. Create a storage account to store the NGINX configuration file:

    az storage account create --name $STORAGE_ACCOUNT_NAME \
        --resource-group $RESOURCE_GROUP_NAME --location $LOCATION \
        --sku Standard_LRS
  2. Create a file share in the storage account:

    az storage share create --name nginx-config --account-name $STORAGE_ACCOUNT_NAME
  3. In the current directory, create a new file called nginx.conf with the following content:

    events {
    }
    
    http {
        server {
            listen 80;
            location /app1/ {
                proxy_http_version 1.1;
                proxy_pass http://app1/;
            }
            location /app2/ {
                proxy_http_version 1.1;
                proxy_pass http://app2/;
            }
        }
    }

    This NGINX configuration file defines two locations, /app1/ and /app2/, and routes traffic to the app1 and app2 container apps respectively using their internal URLs, http://app1/ and http://app2/.

  4. Upload the NGINX configuration file to the file share:

    az storage file upload --account-name $STORAGE_ACCOUNT_NAME --share-name nginx-config \
        --source nginx.conf --path nginx.conf
  5. Get the access key for the storage account:

    STORAGE_ACCOUNT_KEY=$(az storage account keys list --account-name $STORAGE_ACCOUNT_NAME \
        --resource-group $RESOURCE_GROUP_NAME --query "[0].value" --output tsv)
  6. Configure the file share in the Container Apps environment:

    az containerapp env storage set \
        --name $ENVIRONMENT_NAME --resource-group $RESOURCE_GROUP_NAME \
        --storage-name nginx-config \
        --account-name $STORAGE_ACCOUNT_NAME \
        --azure-file-account-key $STORAGE_ACCOUNT_KEY --azure-file-share-name nginx-config \
        --access-mode ReadOnly
  7. Export the YAML from the NGINX container app:

    az containerapp show --name nginx --resource-group $RESOURCE_GROUP_NAME \
        --output yaml > nginx.yaml
  8. Open nginx.yaml in a text editor. Add the volumes array to the template section to mount the Azure File Share to the NGINX container app. Then add the volumeMounts array to the containers array to mount the volume to the NGINX container. The modified YAML should look like this snippet:

    // ...
    properties:
      // ...
      template:
        containers:
        - image: nginx
          name: nginx
          resources:
            cpu: 0.5
            memory: 1Gi
          volumeMounts:
          - mountPath: /etc/nginx/nginx.conf
            subPath: nginx.conf
            volumeName: nginx-config
        scale:
          maxReplicas: 10
          minReplicas: 0
        serviceBinds: null
        terminationGracePeriodSeconds: null
        volumes:
        - name: nginx-config
          storageType: AzureFile
          storageName: nginx-config
    // ...
  9. Update the NGINX container app with the modified YAML:

    az containerapp update --name nginx --resource-group $RESOURCE_GROUP_NAME \
        --yaml nginx.yaml

    This will update the NGINX container app to use the NGINX configuration file from the Azure File Share.

Navigate to the public URL of the NGINX app to verify that the path-based routing is working. Append /app1/ and /app2/ to the URL to verify that the traffic is being routed to the app1 and app2 container apps respectively.

Select Show more info about this app to see which container app is being used.

Screenshot

Update the NGINX configuration

To update the NGINX configuration, change the nginx.conf in the file share.

Restart the NGINX container app to apply the changes:

az containerapp revision restart --name nginx --resource-group $RESOURCE_GROUP_NAME \
  --revision $(az containerapp revision list -n nginx -g $RESOURCE_GROUP_NAME --query '[0].name' -o tsv)

Routing based on hostname

You can also configure NGINX to route traffic based on the hostname. To do this, use multiple server blocks in the NGINX configuration file, each with a different server_name directive.

events {
}

http {
    server_names_hash_bucket_size 128;

    server {
        listen 80;
        server_name nginx.proudgrass-abcdefgh.northeurope.azurecontainerapps.io;

        location /app1/ {
            proxy_http_version 1.1;
            proxy_pass http://app1/;
        }
        location /app2/ {
            proxy_http_version 1.1;
            proxy_pass http://app2/;
        }
    }
    
    server {
        listen 80;
        server_name path-based-routing.anthonychu.dev;
        
        location /app3/ {
            proxy_http_version 1.1;
            proxy_pass http://app3/;
        }
    }
}

In the above example, traffic to nginx.proudgrass-abcdefgh.northeurope.azurecontainerapps.io is routed to app1 and app2, while traffic to path-based-routing.anthonychu.dev is routed to app3.

Note the server_names_hash_bucket_size 128; directive. This is sometimes required when using a large number of server names, or in this case, when using a long domain name like the default one provided by Azure Container Apps.

container-apps-nginx's People

Contributors

anthonychu avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.