Hosting & Deployment lessons

How a request reaches a server

Every website visit follows the same path: your browser asks DNS for the server IP, then sends an HTTP request to that IP.

Diagram: browser to DNS to server and the response back.

The server processes the request, finds the correct files, and sends them back. Your browser then renders the page from those files.

Practice: Order the request flow

Order the steps of how a request reaches a server.

Static vs dynamic hosting

Static hosting serves pre-built files directly. There is no server-side processing; every visitor gets the exact same HTML file.

Dynamic hosting runs code on the server for each request. The server can query a database, check authentication, or generate HTML on the fly.

Static sites are cheaper and faster to host. Dynamic sites are needed when content changes per user or per request.

Comparing static and dynamic

Comparison table of static versus dynamic hosting.

Many modern frameworks like Next.js blur the line by supporting both static generation (SSG) and server-side rendering (SSR) in the same project.

Practice: Pick the right hosting type

Pick the right hosting type for a scenario.

Domain names

A domain name is a human-readable address like "example.com". Without it, users would need to remember IP addresses like 93.184.216.34.

You buy domains from a registrar (Namecheap, Google Domains, Cloudflare). The registrar records your ownership in a global database.

A domain has parts: subdomain.domain.tld. For example, docs.example.com has subdomain "docs", domain "example", and TLD ".com".

DNS records

DNS translates domain names into IP addresses. The most common record type is an A record, which points a domain to an IPv4 address.

Interactive DNS lookup flow from domain to server.

Other record types include CNAME (alias to another domain), MX (mail server), and TXT (verification strings).

Practice: Match DNS record types

Match each DNS record type to its purpose.

Version control and Git

Git tracks every change to your code so you can revert mistakes and collaborate with others. It is the standard version control system used in deployment.

A repository holds your project files and their full history. Services like GitHub and GitLab host repositories online.

git init
git add .
git commit -m "initial commit"
git remote add origin https://github.com/user/repo.git
git push -u origin main

Git-based deployment

Most modern hosting platforms deploy automatically when you push code to a Git branch. This is called Git-based deployment.

Animated terminal showing a git push triggering a deploy.

Platforms like Vercel and Netlify watch your main branch. Every push triggers a new build and deploy with zero downtime.

Practice: Order the Git deploy steps

Order the Git deployment steps.

CI/CD pipelines

Continuous Integration (CI) automatically runs tests and checks every time code is pushed. It catches bugs before they reach production.

Continuous Deployment (CD) automatically deploys code that passes all checks. Together, CI/CD creates an automated pipeline from code change to live site.

Animated CI/CD pipeline flowchart from push to deploy.

CI/CD configuration

CI/CD is configured with YAML files in your repository. GitHub Actions uses .github/workflows/ directory.

name: Deploy
on:
  push:
    branches: [main]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm install
      - run: npm test
      - run: npm run build

This workflow runs on every push to main. It installs dependencies, runs tests, and builds the project. If any step fails, the pipeline stops.

Practice: Complete the CI/CD config

Fill in the blanks to complete a GitHub Actions workflow.

Environment variables and secrets

Environment variables store configuration that changes between environments. They keep sensitive data like API keys out of your source code.

In Node.js, you access them with process.env.VARIABLE_NAME. A .env file holds local values that should never be committed to Git.

# .env file (never commit this)
DATABASE_URL=postgres://user:pass@localhost:5432/mydb
API_KEY=sk-abc123
NODE_ENV=production

Managing secrets in production

Every hosting platform has a dashboard for setting environment variables. On Vercel, you add them in Project Settings. On GitHub Actions, they go in Settings > Secrets.

Before/after comparison of secrets in dev versus production.

Add .env to your .gitignore file immediately. Leaked secrets in Git history require rotating every exposed key.

Practice: Spot the security mistake

Spot the security mistake in committed code.

Hosting platforms

There are many platforms for hosting websites and apps. Each targets different use cases, from simple static sites to complex cloud infrastructure.

Comparison table of common hosting platforms.

PaaS (Platform as a Service) handles servers for you. IaaS (Infrastructure as a Service) gives you a raw virtual machine to configure yourself.

Deploying to Vercel

Vercel is built for frontend frameworks. Connect a GitHub repo, and it auto-detects your framework (Next.js, React, Vue) and configures the build.

# Install Vercel CLI
npm i -g vercel

# Deploy from terminal
vercel

# Deploy to production
vercel --prod

Every push to a branch creates a preview deployment with a unique URL. Merging to main promotes it to production.

Practice: Choose the right platform

Choose the right platform for each of three scenarios.

Docker and containers

Docker packages your application and its dependencies into a container. A container is a lightweight, isolated environment that runs the same way on any machine.

Unlike a virtual machine, a container shares the host OS kernel. This makes containers fast to start (seconds vs minutes) and small in size (MBs vs GBs).

Diagram comparing virtual machine and container layers.

Writing a Dockerfile

A Dockerfile is a text file with instructions to build a container image. Each line is a step that adds a layer.

FROM node:20-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["node", "server.js"]

FROM sets the base image. COPY adds your files. RUN executes commands during build. CMD defines what runs when the container starts.

Practice: Build a Dockerfile

Build a Dockerfile by ordering the instructions.

SSL/TLS and HTTPS

HTTPS encrypts data between the browser and server using TLS (Transport Layer Security). Without it, passwords and data are sent as plain text that anyone on the network can read.

An SSL certificate proves your server is who it claims to be. Browsers show a padlock icon when a valid certificate is present.

Free certificates are available from Let's Encrypt. Platforms like Vercel and Netlify handle certificates automatically for custom domains.

HTTPS in practice

Interactive HTTP versus HTTPS data-on-the-wire comparison.

Most hosting platforms provision HTTPS by default. For self-managed servers, use certbot to install a free Let's Encrypt certificate with a single command.

sudo certbot --nginx -d example.com -d www.example.com

Practice: HTTPS knowledge check

HTTPS and SSL/TLS knowledge check.

Monitoring and logs

Once your app is deployed, you need visibility into how it is running. Logs record events, errors, and request data. Monitoring tracks uptime, response times, and resource usage.

Live status dashboard with uptime, response chart and request log.

Tools like Datadog, Sentry, and LogRocket aggregate logs and alert you when errors spike. Platform dashboards (Vercel, AWS CloudWatch) provide built-in monitoring.

Debugging in production

Production bugs behave differently from local ones. Use structured logging with timestamps and request IDs so you can trace a problem through your system.

// Structured logging example
console.log(JSON.stringify({
  timestamp: new Date().toISOString(),
  level: "error",
  message: "Database connection failed",
  requestId: req.headers["x-request-id"],
  stack: err.stack
}));

Never use console.log with unstructured strings in production. Structured JSON logs are searchable, filterable, and parseable by monitoring tools.

Practice: Build a deployment checklist

Complete the deployment checklist from a word bank.