Cloud Resume Challenge (Azure) [Part 3 of 3]
Links
Introduction
If you've made it this far, thanks for tagging along with me! If you have no idea what I'm talking about, you should probably go check out Part 1 and Part 2 of my Cloud Resume Challenge journey.
A little bit of recap before we get started: In Part 1 of this series, we looked at what a static website consists of, and the bare necessities of setting up the Azure resources required to host said website (by the rules of the challenge, at least - there are other ways to host static websites in Azure). Part 2, we got a little more complex and looked at using JavaScript to implement a dynamic view counter, but that view counter has to have a permanent server-side component so we made it fancy by connecting it to a CosmosDB instance using an Azure Function.
As we're wrapping everything up, we need a nice bow to put on top, and we're going to make that bow with the final components of the challenge - IaC, Source Control, and CI/CD (and I'll be doing the official blog post as requested in step 16 - stay tuned).
Step 12: Infrastructure as Code (IaC)
So, I approached this a little differently than the challenge recommends - it says to use an ARM template for the CosmosDB instance and Azure Function. I initially built the DB in the Portal and used VS Code for the Function App, because I wasn't really comfortable using the CLI to do either since I'd never set them up before. This step then kind of rolled into the next three (Steps 14 and 15, more so than 13). I'll go over how I implemented IaC in those steps, but - Spoiler - I'll go ahead and post the Terraform files here, starting with the front-end .tf:
terraform {
required_version = ">= 1.5.7"
# This 'backend' section is required to store the .tfstate in a
# separate storage account, so it persists
backend "azurerm" {
resource_group_name = "sy4cloud"
storage_account_name = "sy4tfstate"
container_name = "sy4resume-tfstate"
key = "sy4resume-frontend.tfstate"
}
}
provider "azurerm" {
features {}
}
resource "azurerm_resource_group" "sy4rg" {
name = "sy4rgresume"
location = "North Central US"
}
resource "azurerm_storage_account" "sy4sa" {
name = "sy4saresume"
resource_group_name = azurerm_resource_group.sy4rg.name
location = azurerm_resource_group.sy4rg.location
account_tier = "Standard"
account_replication_type = "LRS"
account_kind = "StorageV2"
static_website {
index_document = "index.html"
error_404_document = "404.html"
}
}
resource "azurerm_cdn_profile" "sy4cdn-profile" {
name = "sy4cdnresume"
location = azurerm_resource_group.sy4rg.location
resource_group_name = azurerm_resource_group.sy4rg.name
sku = "Standard_Microsoft"
}
resource "azurerm_cdn_endpoint" "sy4cdn-endpoint" {
name = "sy4endresume"
profile_name = azurerm_cdn_profile.sy4cdn-profile.name
location = azurerm_resource_group.sy4rg.location
resource_group_name = azurerm_resource_group.sy4rg.name
is_http_allowed = false
is_https_allowed = true
origin_host_header = azurerm_storage_account.sy4sa.primary_web_host
content_types_to_compress = [
"text/html",
"text/css",
"application/javascript",
]
querystring_caching_behaviour = "IgnoreQueryString"
origin {
name = "sy4resume"
host_name = azurerm_storage_account.sy4sa.primary_web_host
}
}
resource "azurerm_cdn_endpoint_custom_domain" "sy4cdn-custom-domain" {
name = "sy4resume"
cdn_endpoint_id = azurerm_cdn_endpoint.sy4cdn-endpoint.id
host_name = "resume.seanyoung.me"
cdn_managed_https {
certificate_type = "Dedicated"
protocol_type = "ServerNameIndication"
tls_version = "TLS12"
}
}
And, the back-end .tf:
terraform {
required_version = ">= 1.5.7"
backend "azurerm" {
resource_group_name = "sy4cloud"
storage_account_name = "sy4tfstate"
container_name = "sy4resume-tfstate"
key = "sy4resume-backend.tfstate"
}
}
provider "azurerm" {
features {}
}
resource "azurerm_resource_group" "sy4rg-backend" {
name = "sy4rgbackend"
location = "North Central US"
}
resource "azurerm_storage_account" "sy4sa-backend" {
name = "sy4sabackend"
resource_group_name = azurerm_resource_group.sy4rg-backend.name
location = azurerm_resource_group.sy4rg-backend.location
account_tier = "Standard"
account_replication_type = "LRS"
}
resource "azurerm_cosmosdb_account" "sy4cosmos" {
name = "sy4dbresume"
location = azurerm_resource_group.sy4rg-backend.location
resource_group_name = azurerm_resource_group.sy4rg-backend.name
offer_type = "Standard"
kind = "GlobalDocumentDB"
enable_automatic_failover = true
enable_free_tier = true
consistency_policy {
consistency_level = "Session"
}
cors_rule {
allowed_headers = ["*"]
allowed_methods = ["GET", "POST"]
allowed_origins = ["https://resume.seanyoung.me"]
exposed_headers = ["*"]
}
geo_location {
location = azurerm_resource_group.sy4rg-backend.location
failover_priority = 0
}
}
resource "azurerm_cosmosdb_sql_database" "sy4db" {
name = "AzureResume"
resource_group_name = azurerm_resource_group.sy4rg-backend.name
account_name = azurerm_cosmosdb_account.sy4cosmos.name
throughput = 400
}
resource "azurerm_cosmosdb_sql_container" "sy4container" {
name = "VisitorCount"
resource_group_name = azurerm_resource_group.sy4rg-backend.name
account_name = azurerm_cosmosdb_account.sy4cosmos.name
database_name = azurerm_cosmosdb_sql_database.sy4db.name
partition_key_path = "/id"
throughput = 400
}
resource "azurerm_service_plan" "sy4sp" {
name = "sy4aspbackend"
location = azurerm_resource_group.sy4rg-backend.location
resource_group_name = azurerm_resource_group.sy4rg-backend.name
os_type = "Linux"
sku_name = "Y1"
}
resource "azurerm_application_insights" "sy4ai" {
name = "sy4aibackend"
location = azurerm_resource_group.sy4rg-backend.location
resource_group_name = azurerm_resource_group.sy4rg-backend.name
application_type = "web"
}
resource "azurerm_linux_function_app" "sy4app" {
name = "sy4faresume"
location = azurerm_resource_group.sy4rg-backend.location
resource_group_name = azurerm_resource_group.sy4rg-backend.name
service_plan_id = azurerm_service_plan.sy4sp.id
storage_account_name = azurerm_storage_account.sy4sa-backend.name
storage_account_access_key = azurerm_storage_account.sy4sa-backend.primary_access_key
builtin_logging_enabled = false
webdeploy_publish_basic_authentication_enabled = false
https_only = true
app_settings = {
"APPINSIGHTS_INSTRUMENTATIONKEY" = azurerm_application_insights.sy4ai.instrumentation_key
"FUNCTIONS_WORKER_RUNTIME" = "python"
"FUNCTIONS_EXTENSION_VERSION" = "~4"
"COSMOS_DB_KEY" = azurerm_cosmosdb_account.sy4cosmos.primary_key
"COSMOS_DB_URL" = azurerm_cosmosdb_account.sy4cosmos.endpoint
"SCM_DO_BUILD_DURING_DEPLOYMENT" = true
}
site_config {
cors {
allowed_origins = ["https://resume.seanyoung.me"]
}
application_stack {
python_version = "3.11"
}
}
}
Step 13: Source Control
I guess I kind of cheated on this step. I've been using source control since the inception of this project - you may remember, if you paid attention to the commands in the first post, that the local directory on my computer is labeled 'source_control' and I keep all the directories inside that synced with GitHub repos. So this step was easy.
Step 14: CI/CD (Back-End)
So, I actually did this step and the next step in reverse order. Skip down a little bit, read that one, and then come back. I'll wait. 🙂
Since I did the front-end code first and I was already using source control and GitHub Actions for that, I did the same thing here... mostly. Source control was a given, but I struggled with the GitHub Actions for deploying this to my Azure Function - when I would do the deployment via GitHub Actions, it would fail, but when I deployed via VS Code, it worked as intended. That was maddening, but such is the learning process sometimes. Then I stumbled upon the post, from last year (2023), stating GitHub actions could not contact the Microsoft SCM servers because they've moved to a private subnet... So - I switched over to Azure Pipelines to do the Function deployment! Nothing special to report here, because Pipelines made it for me (I chose the "Python Function App on Linux" template) - but I did have to wait a few days for my free "hosted parallelism" in order to run jobs - and I had to update the Python version it wanted to use. After that, it just worked.
I also tussled with a Cosmos DB issue, where the Python API couldn't update/retrieve the viewer count. Took me a few hours to figure out it was just a typo in my Terraform config. There were so many tear-downs and rebuilds.
Step 15: CI/CD (Front-End)
I jumped the gun here, too, honestly. After I finished the steps in Part 1, I started looking into what was required to hook that up via GitHub Actions. Luckily I found this in the Microsoft documentation, and I just made a single change - before the upload-batch step to copy the files up (which I initially did with --overwrite true at the end), I added a step to clear the web$ folder so I'd start fresh each time.
And then.. I went hard. What I had was cool - I hadn't set up GitHub Actions before, but it wasn't quite enough for me. I could deploy changes to my site with that, but IaC is powerful... very powerful. So, I did what any sane person would do and I ripped it all down. I built it back up again, entirely with Terraform, which naturally broke everything (I could have imported the existing Azure resources into Terraform, but I wanted the full experience). My main source of reference for this part was this blog post by Thomas Thornton. After some trial and error, and some waiting - it's the cloud, after all - I was back in business. I initially ran the Terraform from my computer to create the infrastructure, but that worked out because I also had to adjust the permissions on the Service Provider accounts and whatnot - I just added the steps to my GitHub Action to make sure everything stays nice and tidy afterwards, but it's not neccesary
name: CRC Front-End CI
on:
push:
branches: [ main ]
jobs:
terraform:
name: 'Terraform'
env:
ARM_CLIENT_ID: ${{ secrets.AZURE_AD_CLIENT_ID }}
ARM_CLIENT_SECRET: ${{ secrets.AZURE_AD_CLIENT_SECRET }}
ARM_SUBSCRIPTION_ID: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
ARM_TENANT_ID: ${{ secrets.AZURE_AD_TENANT_ID }}
runs-on: ubuntu-latest
# ... the Terraform job from the mentioned blog is here ... #
build:
needs: terraform
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: azure/login@v1
with:
creds: ${{ secrets.AZURE_CREDENTIALS }}
- name: Delete current contents of $web
uses: azure/CLI@v1
with:
inlineScript: |
az storage blob delete-batch --account-name sy4saresume --auth-mode key -s '$web'
- name: Upload to blob storage
uses: azure/CLI@v1
with:
inlineScript: |
az storage blob upload-batch --account-name sy4saresume --auth-mode key -d '$web' -s website --overwrite true
- name: Purge CDN endpoint
uses: azure/CLI@v1
with:
inlineScript: |
az cdn endpoint purge --content-paths "/*" --profile-name "sy4cdnresume" --name "sy4endresume" --resource-group "sy4rgresume"
# Azure logout
- name: logout
run: |
az logout
if: always()
Conclusion
Man, what a project. The difficulty curve (for me, at least - remember, I have very little programming/coding experience) was quite a bit steeper than I expected - but I feel so good for completing it. I learned a lot and bolstered the existing Azure knowledge that I did have. I know my current setup isn't completely automated, because of service principle accounts and GitHub Secrets - I'm not sure if I can "fix" that in the future, or if it's good enough as it is ("Perfect is the enemy of good", or however the saying goes). Stay tuned for my follow-up (Part 4/3, I guess) where I do the official blog post.