refactor: update frontend deployment workflow and add Azure storage resources

Author: nayanmapara

.github/workflows/frontend-deploy.yml

@@ -26,9 +26,8 @@ jobs:
           cd frontend
           npm install
 
-      - name: Inject VITE_API_BASE_URL and build frontend
+      - name: Build frontend
         run: |
-          echo "window.env = { VITE_API_BASE_URL: '${{ secrets.VITE_API_BASE_URL }}' };" > frontend/dist/env.js
           cd frontend
           npm run build
 
@@ -37,17 +36,3 @@ jobs:
         with:
           name: frontend-dist
           path: frontend/dist
-
-      - name: Setup Terraform
-        uses: hashicorp/setup-terraform@v3
-
-      - name: Terraform Apply - Frontend Infra Only
-        working-directory: ./infra-frontend
-        run: |
-          terraform init
-          terraform apply -auto-approve
-        env:
-          ARM_CLIENT_ID: ${{ secrets.AZURE_CLIENT_ID }}
-          ARM_CLIENT_SECRET: ${{ secrets.AZURE_CLIENT_SECRET }}
-          ARM_SUBSCRIPTION_ID: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
-          ARM_TENANT_ID: ${{ secrets.AZURE_TENANT_ID }}

infra/backend/main.tf

@@ -62,4 +62,33 @@ resource "azurerm_linux_web_app" "backend" {
     "SPRING_DATASOURCE_PASSWORD"  = var.db_password
     "JWT_SECRET"                  = var.jwt_secret
   }
-}
+}
+
+resource "azurerm_storage_account" "frontend" {
+  name                     = "blogfrontend"
+  resource_group_name      = azurerm_resource_group.rg.name
+  location                 = azurerm_resource_group.rg.location
+  account_tier             = "Standard"
+  account_replication_type = "LRS"
+
+  static_website {
+    index_document     = "index.html"
+    error_404_document = "index.html"
+  }
+}
+
+resource "azurerm_storage_blob" "frontend_build" {
+  for_each = fileset("${path.module}/../frontend/dist", "**/*")
+
+  name                   = each.value
+  type                   = "Block"
+  source                 = "${path.module}/../frontend/dist/${each.value}"
+  storage_account_name   = azurerm_storage_account.frontend.name
+  storage_container_name = "$web"
+  content_type = lookup(
+  var.mime_types,
+  regex("\\.([^.]+)$", each.value)[0],
+  "application/octet-stream"
+)
+
+}

infra/backend/outputs.tf

@@ -7,3 +7,8 @@ output "postgres_fqdn" {
   description = "PostgreSQL database FQDN"
   value       = azurerm_postgresql_flexible_server.db.fqdn
 }
+
+output "frontend_url" {
+    description = "The URL of the deployed frontend static website"
+    value = azurerm_storage_account.frontend.primary_web_endpoint
+}

infra/backend/variables.tf

@@ -18,4 +18,25 @@ variable "jwt_secret" {
   description = "JWT secret key"
   type        = string
   sensitive   = true
-}
+}
+
+variable "vite_api_base_url" {
+  description = "The base URL of the backend API for the frontend to consume"
+  type        = string
+}
+
+variable "mime_types" {
+  description = "Map of file extensions to MIME types"
+  type = map(string)
+  default = {
+    html = "text/html"
+    css  = "text/css"
+    js   = "application/javascript"
+    json = "application/json"
+    png  = "image/png"
+    svg  = "image/svg+xml"
+    jpg  = "image/jpeg"
+    jpeg = "image/jpeg"
+    ico  = "image/x-icon"
+  }
+}

infra/frontend/.terraform.lock.hcl

@@ -0,0 +1 @@
+window.env = { VITE_API_BASE_URL: "https://blog-platform-api.azurewebsites.net/" };