Enterprise Azure Terraform Lab Phase 1 Part 4 : App Service and React Deployment

📁 GitHub Repository: lwc-wk/enterprise-azure-lab1

Enterprise Azure Terraform Lab Phase 1 Part 4 : App Service and React Deployment

🧩 Background

After building the network, storage, and monitoring baseline, I added a simple application layer.

The frontend is intentionally simple.

The main goal is not to prove that I can make a beautiful dashboard. The goal is to show that I understand Azure PaaS hosting concepts.

This part focuses on:

• App Service Plan
• Azure Linux Web App
• React + Vite dashboard
• Runtime stack
• Startup command
• Zip deployment
• Separation between infrastructure deployment and application deployment

⚙️ Azure App Service Hosting

The lab uses:

• App Service Plan
• Azure Linux Web App
• React + Vite dashboard
• Node static server

Current App Service baseline:

Linux App Service Plan
F1 Free tier where available
Node 24 LTS
HTTPS only
Startup command: npm start

Why App Service instead of only Static Web Apps?

Because this lab is designed to demonstrate AZ-104 PaaS hosting concepts:

• App Service Plan
• Runtime stack
• Startup command
• Default domain
• HTTPS-only setting
• Scale up/down
• Deployment slot planning

⚛️ React Dashboard Deployment

The React dashboard is intentionally simple.

It shows:

• Infrastructure
• Network
• Security
• Monitoring
• Identity
• Cost Control

The dashboard gives the lab a visible landing page, but the real value is still the cloud infrastructure behind it.

🚀 Build and Deploy Flow

The app deployment flow is:

cd app
npm install
npm run build
zip -r app.zip server.js package.json package-lock.json dist

cd ../infra
RG_NAME=$(terraform output -raw resource_group_name)
WEB_APP_NAME=$(terraform output -raw web_app_name)

az webapp deploy \
  --resource-group "$RG_NAME" \
  --name "$WEB_APP_NAME" \
  --src-path ../app/app.zip \
  --type zip

Terraform manages the platform.

Zip deploy handles the application artifact.

That separation matters.

If everything is forced into Terraform, the infrastructure code becomes messy. If everything is done manually, the lab loses repeatability.

🧠 Why This Matters

This design shows a practical DevOps boundary:

This is not yet a full CI/CD pipeline, but it prepares the project for AZ-400 style automation later.

🧾 Summary

This part of the lab added the application hosting layer:

• Created an App Service Plan
• Created a Linux Web App
• Deployed a React + Vite dashboard
• Used Node as the static server
• Separated infrastructure deployment from application release

The app is simple, but the deployment model is useful. In real cloud work, the boring boundary between platform and artifact is where many expensive mistakes hide.