I'm trying to build a docker which consists of two containers. One for nginx, and another for storybook (UI docs).
My prod.yml file:
version: '3.7'
services:
storybook_container:
image: app_prod_storybook:latest
build:
context: ../
target: builder
dockerfile: Dockerfile
container_name: app_prod_storybook
ports:
- "8080:8080"
storybook_nginx:
image: app_prod_storybook_nginx:latest
build:
context: ../
target: production-build
dockerfile: Dockerfile
container_name: app_prod_storybook_nginx
restart: always
ports:
- "80:80"
depends_on:
- storybook_container
And my Dockerfile:
FROM node:lts-alpine as builder
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
CMD ["npm", "run", "build-storybook"]
FROM nginx:stable-alpine as production-build
COPY nginx/nginx.conf /etc/nginx/nginx.conf
RUN rm -rf /usr/share/nginx/html/*
COPY --from=builder /usr/src/app/storybook-static /usr/share/nginx/html/docs/storybook-static
EXPOSE 80
ENTRYPOINT ["nginx", "-g", "daemon off;"]
This build only works if I first execute two commands locally:
npm i
npm run storybook build
Otherwise, the /usr/src/app/storybook-static directory does not exist. Although the assembly container fulfills and turns off. Before turning it off, I see the storybook-static directory and it contains all the necessary files.
What am I doing wrong?
Related
I want to use single Dockerfile for my multiple services
I have docker file like below
FROM node:alpine as ui
WORKDIR /app/ui
COPY ./ui/package.json .
RUN npm install
COPY ./ui/ .
RUN npm run start
FROM node:alpine as server
WORKDIR /app/server
COPY ./server/package.json .
RUN npm install
COPY ./server/ .
RUN npm run start
FROM nginx as engine
EXPOSE 3000 5000 80
CMD ["nginx", "-g", "daemon off;"]
And yaml file looks like
version: "3.4"
services:
api:
build:
context: ./
target: server
volumes:
- /app/node_modules
- ./server:/app/server
environment:
- PGUSER=postgres
- PGHOST=postgres
- PGDATABASE=postgres
- PGPASSWORD=postgres_password
- PGPORT=5432
ui:
stdin_open: true
environment:
- CHOKIDAR_USEPOLLING=true
build:
context: ./
target: ui
volumes:
- /app/node_modules
- ./ui:/app/ui
postgres:
image: "postgres:latest"
environment:
- POSTGRES_PASSWORD=postgres_password
nginx:
depends_on:
- api
- ui
restart: always
volumes:
- ./nginx/dev.conf:/etc/nginx/conf.d/default.conf
build:
context: ./
target: engine
ports:
- "80:80"
Here , When I run docker-compose -f dev.yml up , nothing happens its not creating all the images, when i use seperate dockerfile for ui and api , its working fine , but for single dockerfile like i mentioned , its not creating any images.Can some one explain correct way to use multistage with dockercompose.
I trie to put nginx at top and it got struck at Building 0.0s (0/6)
I am trying to use docker to set up a simple virtual host, serving the static files.
However, after I executed docker compose up, the localhost page will always be "Welcome to nginx!". I wonder which part did I do wrong.
Here's my code:
(1) Dockerfile:
FROM node:16-alpine AS builder
WORKDIR /app
COPY package.json ./
RUN npm install
COPY ./ ./
RUN npm run build
FROM nginx
EXPOSE 80
WORKDIR /usr/share/ngnix/html
COPY --from=builder /app/build .
ENTRYPOINT [ "nginx", "-g", "daemon off;" ]
(2) docker-compose
version: '3'
services:
deployment-production:
build:
context: .
dockerfile: Dockerfile
ports:
- '80:80'
(3) folder strucutre:
Thanks for any help!!
I have a docker-compose configuration for an MEAN app that's working fine.
I would like my angular (ng serve) and express servers (nodemon) to rerun automaticaly when I hit ctrl + s as if I was running my app in local.
For that, my containers need to be aware that the files changed.
How can I do that ?
Angular's Dockerfile :
FROM node:10
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . ./
EXPOSE 4200
CMD ["npm", "start"]
Express's Dockerfile :
FROM node:6
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . ./
EXPOSE 3000
CMD ["npm", "start"]
docker-compose.yml :
version: '3'
services:
angular: # name of the first service
build: client # specify the directory of the Dockerfile
ports:
- "4200:4200"
express: #name of the second service
build: server # specify the directory of the Dockerfile
ports:
- "3000:3000"
links:
- database
database: # name of the third service
image: mongo
ports:
- "27017:27017"
Both Angular and Express have an .dockerignore for node_modules
If you are in dev environment, you can add the volumes section in your docker-compose.yml as below :
services:
angular: # name of the first service
build: client # specify the directory of the Dockerfile
ports:
- "4200:4200"
volumes:
- /path/in/host/machine:/path/in/container
express: #name of the second service
build: server # specify the directory of the Dockerfile
ports:
- "3000:3000"
links:
- database
volumes:
- /path/in/host/machine:/path/in/container
database: # name of the third service
image: mongo
ports:
- "27017:27017"
Reference:
volumes in docker-compose
This is my dockerFile located at vDocker/Dockerfile
# build stage
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
# production stage
FROM nginx:stable-alpine as production-stage
RUN apk add --no-cache bash
COPY ./vDocker/nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80 443
CMD ["nginx", "-g", "daemon off;"]
I also have docker-compose located at root directory.
version: '3'
services:
web_client:
build:
context: .
dockerfile: ./vDocker/Dockerfile
container_name: web_client
restart: unless-stopped
tty: true
volumes:
- /var/www/app/ssl/certbot/conf:/etc/letsencrypt
- /var/www/app/ssl/certbot/www:/var/www/certbot
ports:
- 80:80
- 443:443
After running docker-compose build, It gives me the following error: Service 'web_client' failed to build: COPY failed: stat /var/lib/docker/overlay2/67b326c995a1ce52fb3ee2a792d84ffe9bc403aa5962755a2b89f1ab925a1242/merged/app/dist: no such file or directory
Any idea why?
You don't need to name the second stage.
How your build looks like depends on how you set it up and I don't know it. But what you can do is:
run the first stage as a separate Dockerfile
after the last RUN add RUN ls -lart -> this should print the contents of the directory and you can check if the /app/dist really exists
For the rest your code looks good.
I have set up Gatsby to work inside docker container and it works perfectly fine except for hot reloading.
I tried something like gatsby develop --host 0.0.0.0 --port 8080 but doesn't do hot reloading. I have to manually restart the container.
In your file docker-compose you must incorporate the following environment variable:
docker-compose.yml
version: '3'
services:
gatsby-app:
build:
context: ./
dockerfile: Dockerfile
image: gatsby-app
container_name: gatsby-app
working_dir: /app
volumes:
- /app/node_modules
- ./app:/app
ports:
- 80:8000
- 81:9000
environment:
- NODE_ENV=development
- GATSBY_WEBPACK_PUBLICPATH=/
- CHOKIDAR_USEPOLLING=1
Your DockerFile file must be:
Dockerfile
from node:latest
EXPOSE 8000
RUN npm install -g gatsby-cli yarn
WORKDIR /app
COPY ./app/package.json .
RUN yarn install && yarn cache clean
CMD ["yarn", "develop", "-H", "0.0.0.0", "-p", "8000"]