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,688