Plan zajęć: Docker dla aplikacji frontendowych

Informacje ogólne

• Kierunek: Informatyka, 6 semestr
• Specjalizacja: Frontend Development
• Czas trwania: 3 godziny
• Temat: Konteneryzacja aplikacji webowych z użyciem Dockera

Cele zajęć

• Zrozumienie koncepcji konteneryzacji i jej zastosowania w aplikacjach webowych
• Praktyczne zastosowanie Dockera w projektach frontendowych i backendowych w JS/TS
• Implementacja zasad 12-factor app w kontekście konteneryzacji
• Konfiguracja aplikacji za pomocą zmiennych środowiskowych
• Tworzenie wielokontenerowych środowisk z Docker Compose
• Zapoznanie się z procesem wdrażania aplikacji na platformach chmurowych

Plan szczegółowy

1. Wprowadzenie do Dockera (30 minut)

• Koncepcja konteneryzacji i jej przewaga nad wirtualizacją
• Architektura Dockera (klient, demon, rejestry, obrazy, kontenery)
• Podstawowe komendy Dockera
• Docker Hub i inne rejestry obrazów

2. Tworzenie obrazów Dockera dla aplikacji frontendowych (45 minut)

• Struktura pliku Dockerfile
• Budowanie obrazu dla aplikacji React
• Wieloetapowe budowanie (multi-stage builds)
• Optymalizacja obrazów
• Praktyczne ćwiczenie: Utworzenie Dockerfile dla prostej aplikacji React

3. Implementacja zasad 12-factor app w kontekście Dockera (30 minut)

• Omówienie zasad 12-factor app
• Konfiguracja aplikacji poprzez zmienne środowiskowe
• Wstrzykiwanie konfiguracji zależnej od środowiska (dev/prod)
• Zarządzanie sekretami i konfiguracją dla różnych domen/środowisk
• Jeden obraz, wiele konfiguracji

4. Aplikacja fullstack: Frontend + Backend w kontenerach (45 minut)

• Utworzenie prostego API w Express/Node.js
• Dockerfile dla backendu
• Komunikacja między kontenerami
• Sieci w Dockerze

5. Docker Compose: Orkiestracja wielokontenerowa (30 minut)

• Struktura pliku docker-compose.yml
• Definiowanie usług, sieci i wolumenów
• Zarządzanie zależnościami między kontenerami
• Praktyczne ćwiczenie: Utworzenie konfiguracji Docker Compose dla aplikacji full-stack

6. Wdrażanie aplikacji na platformy chmurowe (30 minut)

• Przegląd darmowych/tanich platform do hostowania kontenerów
• Konfiguracja wdrożenia na Render.com (darmowy plan)
• Alternatywy: DigitalOcean App Platform, Railway, Fly.io
• Ciągła integracja i wdrażanie (CI/CD) dla aplikacji kontenerowych

7. Praktyczny projekt końcowy i podsumowanie (30 minut)

• Wdrożenie przygotowanej aplikacji na wybraną platformę
• Omówienie najlepszych praktyk
• Pytania i odpowiedzi
• Zasoby do dalszej nauki

Materiały praktyczne

Przykładowa aplikacja React z konfiguracją przez zmienne środowiskowe

Struktura projektu

frontend/
  ├── Dockerfile
  ├── .dockerignore
  ├── .env.example
  ├── package.json
  ├── tsconfig.json
  ├── public/
  └── src/
      ├── App.tsx
      ├── config.ts
      ├── components/
      └── ...

Dockerfile dla frontendu

# Etap budowania
FROM node:18-alpine AS build

WORKDIR /app

COPY package*.json ./
RUN npm ci

COPY . .
RUN npm run build

# Etap produkcyjny
FROM nginx:alpine

# Kopiowanie plików konfiguracyjnych nginx
COPY --from=build /app/nginx.conf /etc/nginx/conf.d/default.conf

# Kopiowanie zbudowanej aplikacji
COPY --from=build /app/build /usr/share/nginx/html

# Skrypt startowy do podmiany zmiennych środowiskowych
COPY --from=build /app/env.sh /usr/share/nginx/html/env.sh
RUN chmod +x /usr/share/nginx/html/env.sh

# Podmiana zmiennych środowiskowych podczas startu kontenera
CMD ["/bin/sh", "-c", "/usr/share/nginx/html/env.sh && nginx -g \"daemon off;\""]

env.sh dla wstrzykiwania zmiennych środowiskowych

#!/bin/sh

# Plik z konfiguracją JS, który będzie modyfikowany
ENV_FILE=/usr/share/nginx/html/config.js

# Zastąp placeholdery rzeczywistymi wartościami ze zmiennych środowiskowych
echo "window.env = {" > $ENV_FILE
echo "  API_URL: \"$API_URL\"," >> $ENV_FILE
echo "  ENVIRONMENT: \"$ENVIRONMENT\"," >> $ENV_FILE
echo "  APP_TITLE: \"$APP_TITLE\"," >> $ENV_FILE
echo "};" >> $ENV_FILE

exec "$@"

Przykładowy backend w Express.js

Struktura projektu

backend/
  ├── Dockerfile
  ├── .dockerignore
  ├── package.json
  ├── tsconfig.json
  └── src/
      ├── index.ts
      ├── config.ts
      ├── routes/
      └── ...

Dockerfile dla backendu

FROM node:18-alpine

WORKDIR /app

COPY package*.json ./
RUN npm ci

COPY . .
RUN npm run build

EXPOSE 3000

CMD ["node", "dist/index.js"]

Konfiguracja backend z 12-factor (config.ts)

export const config = {
  port: parseInt(process.env.PORT || '3000', 10),
  databaseUrl: process.env.DATABASE_URL || 'mongodb://localhost:27017/app',
  environment: process.env.NODE_ENV || 'development',
  logLevel: process.env.LOG_LEVEL || 'info',
  corsOrigin: process.env.CORS_ORIGIN || '*',
  jwtSecret: process.env.JWT_SECRET || 'default-dev-secret',
};

Docker Compose dla całej aplikacji

version: '3.8'

services:
  frontend:
    build: ./frontend
    ports:
      - "80:80"
    environment:
      - API_URL=http://localhost:3000
      - ENVIRONMENT=development
      - APP_TITLE=My App - Development
    depends_on:
      - backend

  backend:
    build: ./backend
    ports:
      - "3000:3000"
    environment:
      - PORT=3000
      - DATABASE_URL=mongodb://db:27017/app
      - NODE_ENV=development
      - CORS_ORIGIN=http://localhost
    depends_on:
      - db

  db:
    image: mongo:5
    ports:
      - "27017:27017"
    volumes:
      - mongo-data:/data/db

volumes:
  mongo-data:

Wdrożenie na Render.com (darmowy plan)

1. Utwórz konto na Render.com
2. Połącz swoje repozytorium GitHub
3. Utwórz nową usługę web service dla backendu:
   • Wybierz repozytorium
   • Ustaw katalog główny na backend
   • Ustaw komendę budowania: npm install && npm run build
   • Ustaw komendę startową: node dist/index.js
   • Skonfiguruj zmienne środowiskowe
4. Utwórz nową usługę Static Site dla frontendu:
   • Wybierz repozytorium
   • Ustaw katalog główny na frontend
   • Ustaw komendę budowania: npm install && npm run build
   • Ustaw katalog publikacji: build
   • Skonfiguruj zmienne środowiskowe, w tym URL do backendu
5. Opcjonalnie: Skonfiguruj bazę danych (MongoDB Atlas - darmowy plan)

Alternatywne platformy wdrożeniowe:

1. DigitalOcean App Platform:
   • Koszt: od $5/msc za kontener
   • Prosta konfiguracja przez panel
   • Łatwa integracja z GitHub
2. Railway:
   • Darmowy plan dla projektów niekomercyjnych
   • Limit czasu działania: 500 godzin miesięcznie
   • Intuicyjny interfejs
3. Fly.io:
   • Darmowy plan obejmuje 3 małe maszyny
   • Globalna dystrybucja

Zadania praktyczne do wykonania przez studentów

1. Utworzenie pliku Dockerfile dla aplikacji React
2. Implementacja mechanizmu podmiennych zmiennych środowiskowych
3. Utworzenie backendu w Express.js skonfigurowanego zgodnie z 12-factor app
4. Przygotowanie pliku docker-compose.yml
5. Wdrożenie aplikacji na wybraną platformę

Materiały dodatkowe

• Dokumentacja Docker: https://docs.docker.com/
• Zasady 12-factor app: https://12factor.net/
• Dokumentacja Render.com: https://render.com/docs
• Przewodnik po Docker Compose: https://docs.docker.com/compose/