2. Dockerfile HTML pagina

Meer informatie over Dockerfile

In deze opdracht maak je een dockerfile aan voor project 1 in directory opdracht1. Met deze dockerfile zal je een image en container maken waarmee je naar de website kan navigeren.

Opdracht 1: Dockerfile HTML Pagina

Stap 1: Navigeer naar de directory Docker-Demo-Project/studentversie/opdracht1 in een IDE

Stap 2: Open het bestand met de naam Dockerfile in een (tekst)editor

Hoe maak je een dockerfile aan

Je maakt een dockerfile aan in een project door een new file te maken en de naam Dockerfile te geven aan dit document. Voor een dockerfile is geen extensie nodig (bijv. .html, .css, .js)

Stap 3: Vul de dockerfile aan met de volgende stappen:

Stap 3.1: Haal de base image op van Node en voeg dit toe aan de dockerfile:

FROM nginx

Stap 3.2: Kopieer de content naar de juiste directory voor de docker image door de volgende line toe te voegen:

COPY /content /usr/share/nginx/html

Stap 3.3: Kopieer de custom nginx.conf file naar de working directory, zodat de configuraties juist worden meegegeven aan de dockerfile:

COPY nginx.conf /etc/nginx/

Stap 3.4: Geef aan welke directory gebruikt moet worden binnen de container. Voeg de volgende line toe aan de dockerfile:

WORKDIR /app

Stap 3.5: Voeg de source code toe aan de working directory met de volgende line in de dockerfile:

COPY . ./

Stap 3.6: Open de poort (in dit geval 3080) waarop de container aangeroepen kan worden door de volgende line toe te voegen:

EXPOSE 3080

Stap 3.7: Laat de dockerfile weten welke command gerund moet worden om het project te draaien. Voeg de volgende line toe:

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

Antwoord - Volledige dockerfile

FROM nginx

# copy app to nginx public folder
COPY /content /usr/share/nginx/html

# copy custom nginx config
COPY nginx.conf /etc/nginx/

# set working directory
WORKDIR /app

# add app
COPY . ./

# open port 3080 for trafic
EXPOSE 3080

# start app
CMD ["nginx", "-g", "daemon off;"]

Stap 4: Open een CMD/Terminal en navigeer naar de directory van Docker-Demo-Project/studentversie/opdracht1

Stap 5: Run de volgende commands na elkaar in je CMD/terminal om je dockerfile te builen en op te starten

Docker desktop

Zorg ervoor dat docker desktop aanstaat voordat je onderstaande code uitvoert.

docker build -t windesheim-docker-workshop-opdracht-1 .

docker run -dp 3080:3080 windesheim-docker-workshop-opdracht-1

In de bovenste command wordt ’.’ gebruikt om aan te geven dat de bestanden van de huidige map moeten worden gebruikt.
In de CMD/terminal komt er reeks aan letters en nummers te staan zodra de image succesvol is gerund. Dit is de container ID

Stap 6: Ga naar http://localhost:3080/ en kijk of de website wordt ingeladen.

Note

Als je een nginx pagina te zien krijgen, probeer de pagina te refreshen met ctrl+f5 (command+r op MAC). Hiermee zou de pagina juist geladen moeten worden, indien de dockerfile correct is.

Gelukt

Je hebt nu succesvol je eerste website up-and-running gekregen in een nieuwe docker container waarbij je zelf de image geconfigureerd hebt.

Volgende stap: 3. Dockerfiles voor docker compose