| import streamlit as st | |
| import streamlit.components.v1 as components | |
| def render_mermaid(graph): | |
| components.html( | |
| f""" | |
| <pre class="mermaid"> | |
| {graph} | |
| </pre> | |
| <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> | |
| <script>mermaid.initialize({{startOnLoad:true}});</script> | |
| """, | |
| height=500, | |
| ) | |
| st.set_page_config(page_title="Azure Setup Guide", layout="wide") | |
| st.title("Azure Two-Subscription Solution Setup Guide") | |
| st.header("Architecture Overview") | |
| mermaid_diagram = """ | |
| graph TB | |
| subgraph "Subscription 1" | |
| AI[AI Service] | |
| NSG1[Network Security Group] | |
| end | |
| subgraph "Subscription 2" | |
| FW[Azure Firewall] | |
| VNET[Virtual Network] | |
| NSG2[Network Security Group] | |
| ACR[Azure Container Registry] | |
| ACAE[Azure Container Apps Environment] | |
| subgraph "Container Apps" | |
| ACA1[AI App 1 with UI] | |
| ACA2[AI App 2 with UI] | |
| ACA3[AI App 3 with UI] | |
| ACA4[AI App 4 with UI] | |
| end | |
| AD[Azure Active Directory] | |
| APIM[API Management] | |
| end | |
| User((User)) -->|1. Access| FW | |
| FW -->|2. Route| APIM | |
| APIM -->|3. Redirect| AD | |
| AD -->|4. Authenticate| User | |
| User -->|5. Token| APIM | |
| APIM -->|6. Authorized Request| NSG2 | |
| NSG2 --> ACAE | |
| ACAE -->|Egress| FW | |
| FW -->|Filtered Egress| AI | |
| NSG1 -->|Allows| FW | |
| ACR --> ACAE | |
| """ | |
| render_mermaid(mermaid_diagram) | |
| st.header("Configuration Steps") | |
| resources = { | |
| "Azure Firewall": { | |
| "description": "Configure inbound NAT rules and set up application and network rules.", | |
| "code": """ | |
| az network firewall application-rule create --collection-name 'Azure_AD' --firewall-name 'myFirewall' --name 'Allow_AzureAD' --protocols 'http=80' 'https=443' --resource-group 'myResourceGroup' --target-fqdns 'login.microsoftonline.com' 'graph.microsoft.com' --source-addresses '*' --action 'Allow' --priority 100 | |
| """ | |
| }, | |
| "API Management": { | |
| "description": "Set up to handle incoming requests and manage authentication.", | |
| "code": """ | |
| <policies> | |
| <inbound> | |
| <validate-jwt header-name="Authorization" failed-validation-httpcode="401" failed-validation-error-message="Unauthorized"> | |
| <openid-config url="https://login.microsoftonline.com/<tenant-id>/.well-known/openid-configuration" /> | |
| <audiences> | |
| <audience>your-app-id-uri</audience> | |
| </audiences> | |
| </validate-jwt> | |
| </inbound> | |
| </policies> | |
| """ | |
| }, | |
| "Azure Active Directory": { | |
| "description": "Register your application and configure app roles if needed.", | |
| "code": """ | |
| az ad app create --display-name "MyACAApp" --web-redirect-uris "https://myapim.azure-api.net/oauth2/callback" | |
| """ | |
| }, | |
| "Azure Container Apps Environment": { | |
| "description": "Enable authentication and set it to use Azure AD.", | |
| "code": """ | |
| az containerapp auth update --name myapp --resource-group myResourceGroup --enable-authentication true --provider microsoft --client-id <client-id> --client-secret <client-secret> | |
| """ | |
| }, | |
| "Network Security Group (NSG2)": { | |
| "description": "Configure to allow inbound traffic from APIM to ACAE.", | |
| "code": """ | |
| az network nsg rule create --name AllowAPIM --nsg-name myNSG --priority 100 --source-address-prefixes 'ApiManagement' --source-port-ranges '*' --destination-address-prefixes '*' --destination-port-ranges 443 --access Allow --protocol Tcp --description "Allow APIM inbound traffic" | |
| """ | |
| }, | |
| "Virtual Network (VNET)": { | |
| "description": "Ensure APIM, ACAE, and Azure Firewall are in the same VNET.", | |
| "code": """ | |
| az network vnet subnet create --name apim --resource-group myResourceGroup --vnet-name myVNet --address-prefixes 10.0.1.0/24 | |
| az network vnet subnet create --name acae --resource-group myResourceGroup --vnet-name myVNet --address-prefixes 10.0.2.0/24 | |
| """ | |
| }, | |
| "Azure Container Registry (ACR)": { | |
| "description": "Configure with private endpoints for secure access from ACAE.", | |
| "code": """ | |
| az acr private-endpoint-connection create --name myACR --resource-group myResourceGroup | |
| """ | |
| }, | |
| "Network Security Group (NSG1)": { | |
| "description": "Update to allow traffic from Subscription 2's Azure Firewall IP.", | |
| "code": """ | |
| az network nsg rule create --name AllowSubnet2Firewall --nsg-name myNSG1 --priority 100 --source-address-prefixes '<Firewall-IP>' --destination-port-ranges '*' --access Allow --protocol '*' | |
| """ | |
| } | |
| } | |
| for resource, details in resources.items(): | |
| st.subheader(resource) | |
| st.write(details["description"]) | |
| st.code(details["code"], language="bash") | |
| st.header("Authentication Flow") | |
| auth_flow = """ | |
| 1. User attempts to access an ACA app URL | |
| 2. Azure Firewall routes the request to API Management | |
| 3. APIM redirects the user to Azure AD login page | |
| 4. User authenticates with Azure AD | |
| 5. Azure AD sends a token back to the user's browser | |
| 6. Browser sends the token to APIM | |
| 7. APIM validates the token and, if valid, forwards the request to the appropriate ACA app | |
| 8. ACA app processes the request and sends the response back through APIM and Azure Firewall to the user | |
| """ | |
| st.write(auth_flow) | |
| st.header("Deploying New Apps using Azure Resources Extension in VS Code") | |
| vscode_instructions = """ | |
| 1. Install the Azure Resources extension in VS Code | |
| 2. Sign in to your Azure account in VS Code | |
| 3. Open the Azure Resources view in the sidebar | |
| 4. Right-click on your Container Apps Environment and select "Create Container App" | |
| 5. Follow the prompts to configure your new app: | |
| - Choose a name for your app | |
| - Select the appropriate container image | |
| - Configure environment variables if needed | |
| - Set up ingress rules | |
| 6. Review and create the new Container App | |
| 7. Once deployed, update the app's authentication settings using the Azure CLI command provided earlier | |
| 8. Update API Management to route traffic to the new app if necessary | |
| """ | |
| st.write(vscode_instructions) | |
| st.header("Final Notes") | |
| st.write(""" | |
| - Ensure all resources are properly secured and follow Azure best practices | |
| - Regularly update and patch all components | |
| - Monitor your applications and infrastructure using Azure Monitor | |
| - Implement proper logging and alerting mechanisms | |
| - Conduct regular security audits and penetration testing | |
| """) |