Wdrażanie aplikacji na platformy chmurowe - Materiały dla studentów

Wprowadzenie do wdrażania aplikacji kontenerowych

Kontenery Docker są idealne do wdrażania aplikacji w chmurze, ponieważ zapewniają: - Spójne środowisko uruchomieniowe niezależnie od platformy - Łatwą skalowalność i zarządzanie - Izolację aplikacji i jej zależności - Przenośność między różnymi środowiskami (developerskim, testowym, produkcyjnym)

Istnieje wiele metod wdrażania aplikacji kontenerowych, od ręcznej konfiguracji serwerów VPS, po w pełni zarządzane platformy PaaS (Platform as a Service).

Dostępne platformy chmurowe - darmowe i tanie rozwiązania

Platformy z darmowymi planami

1. Render.com

• Darmowe plany dla:
  • Web Services (aplikacje backendowe)
  • Static Sites (aplikacje frontendowe)
  • PostgreSQL (bazy danych)
• Limity:
  • Darmowe usługi usypiane po okresie nieaktywności
  • 750 godzin usługi Web Service miesięcznie
  • 100 GB transferu wychodzącego
• Zalety:
  • Łatwa integracja z GitHub/GitLab
  • Automatyczne wdrożenia
  • Wsparcie dla Dockera

2. Railway.app

• Plan darmowy:
  • 5$ kredytu miesięcznie (na wersji darmowej)
  • 500 godzin działania usług
• Zalety:
  • Bardzo prosty interfejs
  • Szybkie wdrożenia
  • Automatyczne budowanie z Dockerfile

3. Fly.io

• Plan darmowy:
  • 3 małe maszyny VM
  • 3 GB pamięci dla wolumenów
  • 160 GB transferu wychodzącego
• Zalety:
  • Globalnie dystrybuowana infrastruktura
  • Działa w modelu VM, ale obsługuje Dockera
  • Dobre narzędzia CLI

Platformy płatne (ale przystępne)

1. DigitalOcean App Platform

• Koszty:
  • Od $5/miesiąc za kontener
• Zalety:
  • Dobra dokumentacja
  • Stabilność
  • GitHub Student Pack oferuje $100 kredytu

2. Oracle Cloud Free Tier

• Plan darmowy:
  • 2 maszyny VM ARM (zawsze darmowe)
  • 200 GB przestrzeni dyskowej (zawsze darmowe)
• Zalety:
  • Bezterminowe darmowe zasoby
  • Możliwość ręcznej instalacji Dockera
  • Pełna kontrola nad infrastrukturą

Przygotowanie aplikacji do wdrożenia

1. Optymalizacja Dockerfile dla środowiska produkcyjnego

# Etap budowania
FROM node:18-alpine AS build

WORKDIR /app

COPY package*.json ./
RUN npm ci

COPY . .
RUN npm run build

# Etap produkcyjny - frontend
FROM nginx:alpine

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

# Kopiowanie pliku konfiguracyjnego nginx
COPY nginx.conf /etc/nginx/conf.d/default.conf

# Skrypt do podmiany zmiennych środowiskowych
COPY env.sh /docker-entrypoint.d/40-env.sh
RUN chmod +x /docker-entrypoint.d/40-env.sh

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

2. Konfiguracja zmiennych środowiskowych

Dla aplikacji frontendowej, utwórz plik env.sh:

#!/bin/sh

# Ścieżka do pliku konfiguracyjnego
config_file="/usr/share/nginx/html/config.js"

# Wygeneruj plik konfiguracyjny z zmiennych środowiskowych
echo "window.ENV = {" > $config_file
echo "  API_URL: '${API_URL:-http://localhost:3001}'," >> $config_file
echo "  ENVIRONMENT: '${ENVIRONMENT:-production}'," >> $config_file
echo "  APP_TITLE: '${APP_TITLE:-Moja Aplikacja}'" >> $config_file
echo "};" >> $config_file

# Uruchom następne polecenie (nginx)
exec "$@"

Dla aplikacji backendowej, upewnij się, że korzysta z zmiennych środowiskowych:

// config.js
module.exports = {
  port: process.env.PORT || 3000,
  databaseUrl: process.env.DATABASE_URL || 'mongodb://localhost:27017/myapp',
  nodeEnv: process.env.NODE_ENV || 'development',
  corsOrigin: process.env.CORS_ORIGIN || '*'
};

3. Przygotowanie pliku .env.example

Utwórz plik .env.example z przykładowymi zmiennymi:

PORT=3000
DATABASE_URL=mongodb://user:password@host:port/database
NODE_ENV=production
CORS_ORIGIN=https://yourdomain.com

Ten plik pomoże innym deweloperom (i tobie w przyszłości) zrozumieć, jakie zmienne środowiskowe są potrzebne.

Wdrażanie na platformę Render.com

1. Rejestracja i konfiguracja konta

1. Przejdź do Render.com i zarejestruj się (możesz użyć konta GitHub)
2. Połącz swoje konto GitHub lub GitLab (aby mieć dostęp do repozytoriów)

2. Wdrażanie backendu (Web Service)

1. W panelu Render, kliknij New i wybierz Web Service
2. Wybierz repozytorium z kodem backendu
3. Skonfiguruj usługę:
   • Name: nazwa twojej usługi (np. my-backend-api)
   • Runtime: Docker
   • Root Directory: jeśli backend jest w podkatalogu, wskaż go tutaj
   • Branch: główna gałąź (np. main)
   • Instance Type: Free (darmowy plan)
4. Skonfiguruj zmienne środowiskowe:
   • PORT=10000 (Render używa wysokich portów)
   • DATABASE_URL=… (adres do bazy danych)
   • NODE_ENV=production
   • CORS_ORIGIN=https://twoja-domena-frontend.onrender.com
5. Kliknij Create Web Service

3. Wdrażanie frontendu (Static Site)

1. W panelu Render, kliknij New i wybierz Static Site
2. Wybierz repozytorium z kodem frontendu
3. Skonfiguruj usługę:
   • Name: nazwa twojej usługi (np. my-frontend-app)
   • Root Directory: jeśli frontend jest w podkatalogu, wskaż go tutaj
   • Branch: główna gałąź (np. main)
   • Build Command: npm install && npm run build
   • Publish Directory: build (lub katalog, gdzie generowane są pliki statyczne)
4. Skonfiguruj zmienne środowiskowe:
   • REACT_APP_API_URL=https://twoja-domena-backend.onrender.com
   • REACT_APP_ENVIRONMENT=production
5. Kliknij Create Static Site

4. Konfiguracja bazy danych

Opcja 1: MongoDB Atlas (darmowy plan)

1. Przejdź do MongoDB Atlas i zarejestruj się
2. Utwórz klaster (dostępny jest darmowy plan M0)
3. Skonfiguruj użytkownika bazy danych i dozwolone adresy IP (można użyć 0.0.0.0/0 dla dostępu z dowolnego miejsca)
4. Uzyskaj connection string (URI) i użyj go jako DATABASE_URL w konfiguracji backendu

Opcja 2: PostgreSQL na Render (darmowy plan)

1. W panelu Render, kliknij New i wybierz PostgreSQL
2. Skonfiguruj bazę danych:
   • Name: nazwa twojej bazy (np. my-app-db)
   • Instance Type: Free (darmowy plan)
3. Po utworzeniu, znajdź wewnętrzny URL w zakładce “Info”
4. Użyj tego URL jako DATABASE_URL w konfiguracji backendu

5. Testowanie wdrożenia

1. Poczekaj, aż wszystkie usługi zostaną wdrożone (może to zająć kilka minut)
2. Przejdź do adresu URL twojego frontendu
3. Sprawdź, czy aplikacja działa poprawnie
4. Sprawdź logi usług, jeśli występują problemy

Wdrażanie na Railway.app

1. Rejestracja i konfiguracja

1. Przejdź do Railway.app i zarejestruj się (możesz użyć konta GitHub)
2. Utworzenie nowego projektu i wybierz opcję “Deploy from GitHub repo”

2. Konfiguracja aplikacji

1. Wybierz repozytorium z kodem
2. Railway automatycznie wykryje Dockerfile
3. Skonfiguruj zmienne środowiskowe
4. Projekt zostanie automatycznie zbudowany i wdrożony

3. Dodawanie bazy danych

1. W panelu projektu, kliknij “New” i wybierz “Database”
2. Wybierz MongoDB lub PostgreSQL
3. Po utworzeniu, Railway automatycznie doda zmienne środowiskowe do projektu

Ciągła integracja i wdrażanie (CI/CD)

1. Konfiguracja GitLab CI

1. Utwórz plik .gitlab-ci.yml w głównym katalogu projektu:

image: node:18-alpine

stages:
  - test
  - build
  - deploy

variables:
  DOCKER_BUILDKIT: 1

# Cache dependencies between jobs
cache:
  key: ${CI_COMMIT_REF_SLUG}
  paths:
    - node_modules/
    - .npm/

# Test stage
test:
  stage: test
  script:
    - cd backend && npm ci && npm test
    - cd ../frontend && npm ci && npm run lint

# Build stage
build:
  stage: build
  script:
    - cd backend && docker build -t $CI_REGISTRY_IMAGE/backend:$CI_COMMIT_SHA .
    - cd ../frontend && docker build -t $CI_REGISTRY_IMAGE/frontend:$CI_COMMIT_SHA .
    - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY
    - docker push $CI_REGISTRY_IMAGE/backend:$CI_COMMIT_SHA
    - docker push $CI_REGISTRY_IMAGE/frontend:$CI_COMMIT_SHA

# Deploy to Render
deploy-render:
  stage: deploy
  script:
    - |
      curl -X POST $RENDER_DEPLOY_HOOK_URL
  only:
    - main
  environment:
    name: production
    url: $RENDER_FRONTEND_URL

# Deploy to Railway
deploy-railway:
  stage: deploy
  image: railway/cli:latest
  script:
    - railway login
    - railway up
  only:
    - main
  environment:
    name: production
    url: $RAILWAY_FRONTEND_URL

2. Konfiguracja zmiennych środowiskowych w GitLab

1. Przejdź do Settings > CI/CD > Variables w swoim projekcie GitLab
2. Dodaj następujące zmienne:
   • RENDER_DEPLOY_HOOK_URL: URL do webhooka Render
   • RENDER_FRONTEND_URL: URL frontendu na Render
   • RAILWAY_FRONTEND_URL: URL frontendu na Railway
   • CI_REGISTRY: URL rejestru GitLab (automatycznie ustawiony)
   • CI_REGISTRY_USER: użytkownik rejestru (automatycznie ustawiony)
   • CI_REGISTRY_PASSWORD: hasło do rejestru (automatycznie ustawiony)
   • CI_REGISTRY_IMAGE: ścieżka obrazu w rejestrze (automatycznie ustawiony)

3. Konfiguracja Render.com

1. W panelu Render, przejdź do ustawień usługi
2. Znajdź sekcję “Build & Deploy”
3. Włącz “Auto-Deploy”
4. Skopiuj URL webhooka i dodaj go jako zmienną RENDER_DEPLOY_HOOK_URL w GitLab

4. Konfiguracja Railway.app

1. Zainstaluj Railway CLI lokalnie:

   npm i -g @railway/cli

2. Zaloguj się do Railway:

   railway login

3. Skopiuj token i dodaj go jako zmienną RAILWAY_TOKEN w GitLab

5. Testowanie pipeline

1. Wprowadź zmianę w kodzie
2. Wykonaj commit i push do gałęzi main
3. Przejdź do CI/CD > Pipelines w GitLab
4. Sprawdź status wykonania pipeline
5. W przypadku błędów, sprawdź logi i popraw konfigurację

Debugowanie problemów wdrożeniowych

Problem 1: Aplikacja nie uruchamia się

Rozwiązanie: 1. Sprawdź logi wdrożenia 2. Upewnij się, że wszystkie zmienne środowiskowe są poprawnie skonfigurowane 3. Sprawdź, czy Dockerfile jest poprawny i działa lokalnie

Problem 2: Frontend nie komunikuje się z backendem

Rozwiązanie: 1. Sprawdź adres API w zmiennych środowiskowych 2. Upewnij się, że backend jest uruchomiony i dostępny 3. Sprawdź konfigurację CORS w backendzie

Problem 3: Problemy z bazą danych

Rozwiązanie: 1. Sprawdź connection string do bazy danych 2. Upewnij się, że adres IP serwera ma uprawnienia do dostępu do bazy danych 3. Sprawdź, czy baza danych jest uruchomiona i dostępna

Dobre praktyki wdrożeniowe

1. Używaj zmiennych środowiskowych do konfiguracji aplikacji
2. Nie przechowuj sekretów w kodzie, używaj zmiennych środowiskowych
3. Stosuj wieloetapowe budowanie Dockerfile dla mniejszych obrazów
4. Konfiguruj health check dla swoich usług
5. Monitoruj logi aplikacji
6. Testuj aplikację przed wdrożeniem produkcyjnym
7. Korzystaj z automatyzacji wdrożeń
8. Używaj mechanizmu wersjonowania dla wdrażanych aplikacji

Materiały dodatkowe

• Dokumentacja Render.com
• Dokumentacja Railway.app
• MongoDB Atlas - dokumentacja
• Docker Hub - oficjalne obrazy
• 12-factor App - najlepsze praktyki
• GitHub Actions - dokumentacja

Ćwiczenia praktyczne

Ćwiczenie 1: Wdrażanie backendu na Render.com

1. Utwórz konto na Render.com
2. Wdróż aplikację backendową, którą stworzyliśmy na poprzednich zajęciach
3. Skonfiguruj zmienne środowiskowe
4. Przetestuj API za pomocą narzędzia takie jak Postman lub przez przeglądarkę

Ćwiczenie 2: Wdrażanie frontendu na Render.com

1. Wdróż aplikację frontendową jako Static Site
2. Skonfiguruj zmienne środowiskowe, zwłaszcza adres API backendu
3. Przetestuj działanie aplikacji w przeglądarce

Ćwiczenie 3: Dodanie CI/CD za pomocą GitHub Actions

1. Utwórz plik workflow w repozytorium
2. Skonfiguruj automatyczne testy przed wdrożeniem
3. Skonfiguruj automatyczne wdrożenie po pomyślnym przejściu testów
4. Przetestuj cały proces, wprowadzając zmianę w kodzie i wykonując push do głównej gałęzi