Please read this section at least one day prior to the seminar. This section outlines what you are expected to know, be able to do, or prepare in advance. Following these instructions will help you get the most out of the seminar and ensure smooth participation.
Before the start of the practical, you should be able to:
You need to bring your own computer to the practical. If you can not you will need to work with your collogue.
Before the start of the practical, make sure that:
docker run hello-world
# Ubuntu image
docker pull ubuntu:noble
# NodeJS
docker pull node:25.9.0-slim
# Nginx
docker pull nginx:1.29.8
Containers are not magic, more like a magic trick. What really happens when we run following command?
docker run hello-world
# Create a container from an image, does not run the container!
# We may need to add a random command at the end.
docker create --name="{containername}" image:tag
# Export file system from the container.
docker export {container identifier} -o dump.tar
docker run -it ubuntu:noble bash
docker exec -it {container} bash
docker ps
docker kill {container}
Sometimes we need persistent storage across containers. The solution is to save data outside of the container.
Compare Named Volumes / Bind Mounts
What about mapping Windows directory to Docker? It is possible via WSL. However not all functionality is available and there may be performance issues.
# There may be issues ...
npm run dev
<!doctype html><title>Title</title><p>Content</p>
# PowerShell
docker run -it --rm -d -p 8080:80 -v "${PWD}:/usr/share/nginx/html" nginx:1.29.8
# Bash
docker run -it --rm -d -p 8080:80 -v ${PWD}:/usr/share/nginx/html nginx:1.29.8
docker kill $(docker ps -q)
Start with nginx:1.29.8, or even ubuntu:noble, and create custom image which can serve PHP files.
Do not try this at home!
How To Install Linux, Nginx, MySQL, PHP (LEMP stack) in Ubuntu 16.04. Is it easier to install and configure PHP with Apache server?
# Update package index.
apt-get update
# Install packages.
apt install php-fpm
# ...
Now we can pause the image and create a container.
# Pause the image.
docker pause {container}
# Create a container.
docker commit {container} server-php:latest
This probably takes a while ...
Dockerfile provides a better way to create and share definition of a Docker image.
The are a number of commands documentation,
as well as best-practices.
We need only a few basic commands:
We start with your frontend application that can list books using the Library API. Your task is to add a "production-grade" Docker deployment.
GitLab: ./practical-06/
Following slides should guide you towards a reasonable Dockerfile.
Beware of potential pitfalls!
You are allowed to modify the application, but try to keep the changes minimal.
You need to be able build and run the Dockerfile using following commands in the "./practical-06/" directory.
docker build -t nswi153/frontend .
docker run -p 8080:80 nswi153/frontend
Start by with your frontend from "JavaScript : User Interface" practical. Alternatively, you can download and unpack a sample web application.
Continue to the next slide once you are done >>>
COPY . .
RUN npm install
RUN npm build
.*
node_modules
dist
Continue to the next slide once you are done >>>
We do not need the build-related libraries and code. We only need the content of the this directory.
FROM {image} as build
FROM {another-image}
COPY --from=build {source} {target}
Continue to the next slide once you are done >>>
EXPOSE 80
Continue to the next slide once you are done >>>
The backend API is not part of our image, we need to proxy to other container / locations / ...
The Nginx configuration (container specific) is stored in /etc/nginx/conf.d/default.conf. We need to change this file and add instruction for a proxy.
server {
listen 80;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
location /api/ {
proxy_pass https://webik.ms.mff.cuni.cz/~skoda/nswi153/practical-03/api/;
}
}
But, we need the backend to be set using ENV variable not to be hardcoded. This is Nginx specific.
Continue to the next slide once you are done >>>
Files placed to /etc/nginx/templates/ are processed by 20-envsubst-on-templates.sh This script substitutes environment variables in the Docker image at startup (runtime).
COPY ./nginx/default.conf.template /etc/nginx/templates/
# We need to use env variable as we need it to be available at runtime.
ENV BACKEND_BASE_URL=http://server/
We need to set the ENV variable when running the container!
docker run -p 8080:80 -e BACKEND_BASE_URL="https://webik.ms.mff.cuni.cz/~skoda/nswi153/practical-03/" nswi153/frontend
Congratulations, if you have followed the instructions, you have just reached the end of this exercise.
List of selected Docker arguments:
There are single letter alternatives and additional commands.
Some more commands you should know.