Lecture: Deploying Web Applications

Presenter

Coros Magdi - Software Engineer at Microsoft

Course Overview

• Methods to deploy web applications
• Various programming languages and frameworks
• Focus on open-source and Microsoft Azure

Section 1: Open-Source Deployment

Example Application: Exams

Backend API Deployment with Render

• Register on Render: Provide information, verify email.
• Setup PostgreSQL: Create a new database, choose the same region as the web server.
  • Set database properties
  • Choose PostgreSQL version 13, free hobby version.
• Create Web Service: Deploy Backend API
  • Use public or private repository
  • Commands:
    • npm install
    • npm run db:generate (for Prisma client)
    • npm run build (for TypeScript)
    • npm start
  • Set Environment Variables: Database URL, JWT secret key, Admin credentials.

Frontend Deployment with Render

• Setup Frontend: Deploy static site
  • Commands: npm install, npm run build
  • Set environment variable: Base URL for backend
• Test Deployment: Ensure frontend sends requests to backend successfully.

Section 2: Microsoft Azure Deployment

Example Application: My Super Awesome App

Backend API

• Setup MongoDB Atlas: Register, verify email, configure settings, retrieve connection string.
• Email Service: Register on mailersend.com, generate API token.
• Image Upload Service: Register on Image Hippo, generate API key.

Backend Deployment on Railway

• Register on Railway: Create web service, import repository, set environment variables.
  • Environment Variables: MongoDB URL, Email API Key, JWT secret key, etc.
• Test Deployment: Ensure backend is healthy.

Frontend Deployment on Cloudflare Pages

• Setup Frontend: Connect GitHub, configure settings.
  • Environment Variable: API Base URL
• Test Deployment: Ensure frontend communicates with backend.

Redeploy Backend

• Update Backend Environment Variables: Use frontend base URL, redeploy backend.

Section 3: Azure Virtual Machine Deployment

• Create Azure VM: Configure settings, allow HTTP/HTTPS traffic.
• Access VM via SSH: Use downloaded SSH key.
• Clone Repositories: Backend and frontend
  • Backend Dependencies: Install Node.js using fnm, npm install, build project, set up PostgreSQL container with Docker, configure environment variables.
  • Serve Backend: Use pm2 as process manager.

Frontend Setup:

• Build Frontend: Install dependencies, build project.
• Use Caddy for Web Server
  • Configure Caddyfile to serve the frontend and route backend API traffic.
  • Ensure HTTP/HTTPS setup.

Diagram: Final Deployment Architecture

+-------------------+
| Azure VM          |
|                   |
| +---------------+ |
| | PostgreSQL    | |
| +---------------+ |
|                   |
| +---------------+ |
| | Backend API   | |
| | (Node.js)     | |
| +---------------+ |
|                   |
| +---------------+ |
| | Frontend      | |
| +---------------+ |
|                   |
| +---------------+ |
| | Caddy Server  | |
| +---------------+ |
+-------------------+

Summary

• Practical steps to deploy multiple types of web applications.
• Covers both open-source tools and Azure services.
• Emphasizes ease of use and free services for hobby projects.