Wilson Mendes
@willmendesneto
Google Developer Expert Web Technologies
Docker for
Frontend Developers
So, let's start?
What is
Docker?
Container-based
Loads only what we need
Phoenix environment approach
#NOT
the game!
start
Let's
https://github.com/willmendesneto/micro-frontend-pages
git clone
git checkout step-1
cd home-page
# Building the image
docker build -t micro-frontend-home-page .
# Running the container with the app
docker run -d \
--name home-page \
-p 8888:5000 \
micro-frontend-home-page
# Access the docker container
docker exec -it home-page sh
# Checking docker images
docker images -a | grep micro-frontend-home-page
# Checking docker containers
docker ps -a
# Decreasing the docker size
# Removing `yarn cache`
# Add this in your `home-page/Dockerfile`
FROM node:8.1.4-alpine
EXPOSE 5000
WORKDIR /app
COPY package.json .
COPY yarn.lock .
RUN yarn install -s --no-progress && \
yarn cache clean
COPY . .
CMD ["node", "index.js"]
What is
Docker-compose ?
reverse proxy
stack #1
stack #2
x
Next steps
Because the improvement never ends!
# Go to the root folder of `micro-frontend-pages`
# Repository
docker-compose up --build
# After that, access http://localhost:8888 and 🎉
# Installing autocannon globally
# And check memory and CPU consuming by container
npm install -g autocannon
# In one tab run this command
# to check memory and CPU information by container
docker stats
# In another tab run this command
# To simulate concurrent access
# Like users in your website ;)
autocannon -c 100 \
-d 12 \
-p 10 \
http://localhost:8888/second
Build images
Run containers
Execute commands
Diagnose issues
Are you ready?
Thank you
Wilson Mendes
@willmendesneto
Google Developer Expert Web technologies
Docker for Devs
By willmendesneto
Docker for Devs
Let's share some content about Docker? :)
- 2,875