I tried to use docker-compose to develop locally. But I have to rebuild my code if sth change...so I need this "hot reload" function but I fail to implement it. Maybe someone can help me or give me some hints.
I don't use Nginx as a Proxy (Envoy), just as the server.
Vue.js Docker
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /usr/app /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
Docker-Compose File
version: '3.7'
services:
front-envoy:
build:
context: ./envoy
dockerfile: Dockerfile-frontenvoy
volumes:
- ./envoy/front-envoy.yaml:/etc/front-envoy.yaml
networks:
- envoymesh
expose:
- "80"
- "8001"
ports:
- "8000:80"
- "8001:8001"
frontend:
container_name: frontend
restart: always
build:
context: ./frontend
dockerfile: Dockerfile
volumes:
- ./frontend:/app
- /app/node_modules
networks:
envoymesh:
aliases:
- frontend
environment:
- SERVICE_NAME=frontend
- CHOKIDAR_USEPOLLING=true
expose:
- "80"
ports:
- "8081:8081"
networks:
envoymesh: {}
Thank you so much for the help
The npm run serve is the part that runs vue.js in hot reload mode. In the production the command is npm run build.
For dev environment, to start the app use this command
CMD ["npm", "run", "serve"]
instead of
CMD ["nginx", "-g", "daemon off;"]
Note: You can use nginx for prod env application.
Ref 1 : Vue.js app on a docker container with hot reload
Ref 2: https://shekhargulati.com/2019/01/18/dockerizing-a-vue-js-application/
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 dockerize Nuxt js app and nest js in the backend
I want it now for development
i have 2 folders, eva-frontend and eva-backend
I get them up and runnig on docker but when i want to change something in the frontend code, docker doesn't detect it. In backend it works, so i guess that there is something wrong with my volume
The other problem is when i go to my application i login and when i refresh the page i should login again
locally on my pc i don't have this problem, only on docker
so i guess there is something wrong with my Volume in the front end
dockerfile backend:
FROM node:16.15.1-alpine
WORKDIR "/app"
COPY . .
RUN npm install
EXPOSE 3001
CMD [ "npm", "run", "dev"]
dockerfile frontend:
FROM node:16.15.1-alpine
WORKDIR "/app"
COPY package.json ./
COPY . .
RUN npm install
EXPOSE 3000
ENV NUXT_HOST=0.0.0.0
ENV NUXT_PORT=3000
CMD [ "npm", "run", "dev" ]
docker-compose.yml
services:
frontend:
build: ./eva-frontend
depends_on:
- backend
ports:
- 3000:3000
volumes:
- ./eva-frontend:/app
backend:
build: ./eva-backend
ports:
- 3001:3001
volumes:
- ./eva-backend:/app
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?
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
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"]