Containerisera en webbapplikation
Gå igenom processen att Dockerisera en typisk webbapplikation, inklusive dess frontend-, backend- och dataskomponenter.
Containerisera en webbapplikation är en gratis lektion i Docker och Kubernetes för utvecklare på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Docker och Kubernetes för utvecklare, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Docker och Kubernetes för utvecklare innehåller totalt 4 lektioner.
Containerisera webbappar
Välkomna till containerisering av en webbapplikation! I den här lektionen går vi igenom hur ni paketerar en komplett webbapplikation, inklusive frontend, backend och databas, i Docker-containrar.
Det här är ett viktigt steg i modern utveckling eftersom det ger enhetlighet mellan miljöer och förenklar driftsättningen.
Webbapplikationens arkitektur
En typisk webbapplikation består vanligtvis av flera komponenter som samarbetar. I vårt exempel fokuserar vi på en vanlig arkitektur i tre lager:
- Frontend: Användargränssnittet (till exempel React, Vue eller Angular) som körs i webbläsaren.
- Backend: Logiken på serversidan (till exempel Node.js, Python Flask eller Java Spring) som hanterar affärslogik och API-anrop.
- Databas: Lagrar och hanterar applikationsdata (till exempel PostgreSQL, MySQL eller MongoDB).
Backend: Node.js-API
Först skapar vi en Dockerfile för ett enkelt Node.js-backend-API. Den här filen talar om för Docker hur en image för vår backend-tjänst ska byggas.
Vi börjar med en Node.js-basimage, kopierar vår applikationskod, installerar beroenden och definierar kommandot som ska köra servern.
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["node", "server.js"]
Frontend: React och Nginx
För vår frontend använder vi en Dockerfile med flera byggsteg. Det är en god praxis för frontendapplikationer eftersom vi kan bygga appen i ett steg och sedan servera de statiska tillgångarna med en lättviktig webbserver som Nginx i ett separat och mindre steg.
Det resulterar i en betydligt mindre slutlig image.
FROM node:18-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx:stable-alpine
COPY --from=builder /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
Databas: PostgreSQL-tjänst
För databasen behöver vi inte skriva en Dockerfile. I stället kan vi använda en officiell image från Docker Hub, till exempel PostgreSQL.
Det är viktigt att använda en Docker-volym för att säkerställa att våra databasdata bevaras även om containern tas bort eller skapas på nytt. Vi definierar detta när vi använder Docker Compose.
Orkestrering med Compose
Nu när vi har Dockerfiles för vår frontend och backend och vet att vi ska använda en officiell image för databasen behöver vi ett sätt att definiera och köra alla dessa tjänster tillsammans.
Det är här Docker Compose kommer in. Det använder en YAML-fil (docker-compose.yml) för att konfigurera alla våra tjänster, nätverk och volymer.
version: '3.8'
services:
# Define your application services here
volumes:
# Define named volumes for data persistence
networks:
# Define custom networks for inter-service communication
Compose: backendtjänst
Vi lägger till vår backendtjänst i filen docker-compose.yml. Vi anger dess byggkontext (var dess Dockerfile finns), mappar portar, definierar miljövariabler för databasanslutningen och anger ett beroende av databasen.
version: '3.8'
services:
backend:
build: ./backend # Path to backend Dockerfile
ports:
- "3000:3000"
environment:
DATABASE_URL: postgres://user:password@db:5432/mydb
depends_on:
- db # Ensure db starts before backend
networks:
- app-network
networks:
app-network:
driver: bridge # Custom network for app services
Compose: frontendtjänst
Härnäst lägger vi till definitionen av frontendtjänsten. Den här tjänsten byggs också från sin Dockerfile, exponerar port 80 och är beroende av backendtjänsten för att säkerställa att den är tillgänglig för API-anrop.
version: '3.8'
services:
# ... backend service definition ...
frontend:
build: ./frontend # Path to frontend Dockerfile
ports:
- "80:80"
depends_on:
- backend # Frontend needs backend to be ready
networks:
- app-network
networks:
app-network:
driver: bridge
Compose: databastjänst
Slutligen definierar vi databastjänsten. Vi använder den officiella imagen postgres, anger viktiga miljövariabler för databasinstallationen och ansluter framför allt en namngiven volym för beständiga data.
version: '3.8'
services:
# ... backend and frontend definitions ...
db:
image: postgres:13-alpine # Use an official PostgreSQL image
environment:
POSTGRES_DB: mydb
POSTGRES_USER: user
POSTGRES_PASSWORD: password
volumes:
- db_data:/var/lib/postgresql/data # Mount named volume
networks:
- app-network
volumes:
db_data: # Define the named volume
networks:
app-network:
driver: bridge
Starta applikationsstacken
När filen docker-compose.yml är klar är det mycket enkelt att starta hela applikationsstacken. Gå till katalogen som innehåller filen docker-compose.yml och kör ett enda kommando:
docker compose up -d: Bygger images (vid behov), skapar containrar, nätverk och volymer och startar alla tjänster i frikopplat läge (-d).docker compose down: Stoppar och tar bort alla tjänster, nätverk och volymer som definieras i filen.
docker compose up -d
Kontroll av Compose-konfiguration
Betrakta följande docker-compose.yml-utdrag för en enkel webbapplikation:
version: '3.8'
services:
web:
build: .
ports:
- "8000:8000"
depends_on:
- db
db:
image: postgres:latest
environment:
POSTGRES_DB: appdb
POSTGRES_USER: user
POSTGRES_PASSWORD: pass
volumes:
- db_data:/var/lib/postgresql/data
volumes:
db_data:Vilka av följande påståenden om den här konfigurationen är sanna?
Lektionssammanfattning
I den här lektionen lärde vi oss att containerisera en komplett webbapplikationsstack med Docker. Vi gick igenom hur man skapar Dockerfiles för frontend- och backendtjänster, använder officiella images för databaser och orkestrerar allt med Docker Compose. Det här tillvägagångssättet förenklar utveckling, driftsättning och skalning av komplexa applikationer.
- Definierade Dockerfiles för en frontend med flera byggsteg och en backendtjänst.
- Integrerade en databas med en officiell Docker-image och en namngiven volym.
- Orkestrerade alla tjänster med filen
docker-compose.yml. - Lärde oss att starta hela applikationsstacken med ett enda kommando.
Lär dig Docker och Kubernetes för utvecklare med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 12
- Lektioner
- 48
Vanliga frågor
Är lektionen ”Containerisera en webbapplikation” gratis?
Ja – hela texten till ”Containerisera en webbapplikation” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Docker och Kubernetes för utvecklare, kan Ni uppgradera till CoddyKit PRO. Kursen i Docker och Kubernetes för utvecklare innehåller totalt 4 lektioner.
Vad lär jag mig i ”Containerisera en webbapplikation”?
Gå igenom processen att Dockerisera en typisk webbapplikation, inklusive dess frontend-, backend- och dataskomponenter. Ni övar på Docker och Kubernetes för utvecklare med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Docker och Kubernetes för utvecklare?
Du behöver inga förkunskaper. Utbildningen i Docker och Kubernetes för utvecklare på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”Containerisera en webbapplikation”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Docker och Kubernetes för utvecklare-lektionen?
Ja. Varje Docker och Kubernetes för utvecklare-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Containerisera en webbapplikation
- Optimera Docker-avbilder
- Säkerhet och bästa praxis för produktion
- Flerstegsbyggen för slimmade produktionsavbildningar