Static ML Project Portfolios with Integrated Azure DevOps on Azure Static Web Apps

Question

Pulumi · Accepted Answer

To achieve your goal of deploying a static ML (Machine Learning) project portfolio with integrated Azure DevOps on Azure Static Web Apps, we'll create a Pulumi program in Python that outlines the necessary components and the connections between them.

Here's a high-level overview of what we'll do:
1. Set up an Azure Static Web App.
2. Configure the static site to point to your ML project portfolios.
3. Integrate the static site with Azure DevOps for CI/CD pipelines.

Azure Static Web Apps is an Azure service that automatically builds and deploys full stack web apps to Azure from a code repository. Integration with Azure DevOps will enable you to set up continuous integration and deployment, so that any updates to your ML project repository are automatically reflected on the live static site.

Let's dive into the code:

```python
import pulumi
import pulumi_azure_native as azure_native
import pulumi_azure_static as azure_static

# Create a Static Web App in Azure.
# The source of the static site will be a repository containing your ML portfolios
# that you link during the setup process.
static_web_app = azure_static.Website("ml-portfolio-static-web-app",
    # Replace this with your resource group name.
    resource_group_name="my-resource-group",
    # You can specify whether you want a CDN (Content Delivery Network) enabled.
    # A CDN can improve load times for your static site.
    with_cdn=True,
    
    # These are just examples, modify the site_path, subdomain, and other parameters
    # as necessary to point to your actual project portfolio and desired domain.
    site_path="path/to/site",  # This is where your static content lives.
    subdomain="ml-portfolio",  # This subdomain is where your website will be hosted.
)

# Integrate with Azure DevOps for CI/CD pipeline.
# This will create a service connection in your Azure DevOps project which enables the pipeline.
# You'll need to create the actual build and release pipeline in Azure DevOps that references this service connection.
devops_service_connection = azuredevops.ServiceEndpointAzureDevOps("ml-portfolio-devops-connection",
    # These are placeholders. You will need to provide your specific Azure DevOps organization URL
    org_url="https://dev.azure.com/myorg",
    # This should be the ID of your Azure DevOps project.
    projectId="my-devops-project-id",
    # Replace this with the name you want to give to the service connection in Azure DevOps.
    serviceEndpointName="ml-portfolio-service-connection",
    # Replace this with your actual Azure DevOps personal access token.
    personal_access_token=pulumi.Config().require_secret("devops_pat"),
)

# Once you've set this up, be sure to configure your Azure DevOps pipeline to use the service connection
# and the Azure Static Web Apps deployment task to deploy your site from your repository.

# pulumi.export is used to output important information that can be queried with `pulumi stack`.
# This will display the resulting URL of the deployed website and the name of the Azure DevOps service connection,
# which you need for setting up the pipeline.
pulumi.export("website_url", static_web_app.default_hostname)
pulumi.export("devops_service_connection_name", devops_service_connection.serviceEndpointName)
```

### What the program does:
- `Website` is a resource that is used to create an Azure Static Web App, configured with your specific site source path and domain details.
- `ServiceEndpointAzureDevOps` is a resource to configure Azure DevOps integration. You need to replace placeholders with your actual Azure DevOps organization URL and other details.
- At the end of the program, we export the hostname of the Static Web App and the name of the Azure DevOps service connection that's created. This information is useful for setting up your CI/CD pipeline and for accessing your deployed static site.

### Next Steps:
1. Replace placeholders in the program with values specific to your Azure and Azure DevOps setup.
2. Create your CI/CD pipeline in Azure DevOps referencing the service connection.
3. Use the exported hostname to access your deployed ML project portfolios.

Please refer to [Azure Static Web Apps documentation](https://www.pulumi.com/registry/packages/azure-static-website/api-docs/website/) for more details on specific configuration options and [Azure DevOps Service Connection](https://www.pulumi.com/registry/packages/azuredevops/api-docs/serviceendpointazuredevops/) for integrating with Azure DevOps.