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
Related
I created this docker-compose file based on my two images (front and back-end), both are running ok when I run docker-compose up.
The problem is that I want to make hot reload work properly for my frontend which is built upon react.
I tried many things but the properties volumes and build do not seem to be able to find my directories.
So, the directory for both projects are:
C:\Users\pwdie\Downloads\projects\typescript-api (api)
C:\Users\pwdie\Downloads\projects\frontend-api-consumer (front)
being "projects" for the root for both of them, and frontend-api-consumer containing the docker-compose.yml as the image shows.
Didn't understand that part of the docker-compose system, explanations will be well received.
Front Dockerfile
FROM node:17
WORKDIR /app
COPY package.json ./
RUN yarn
COPY ./ ./
EXPOSE 3000:3000
CMD ["yarn", "dev"]
Api Dockerfile
FROM node:17
WORKDIR /app
COPY package.json ./
RUN yarn
COPY . .
ENV DB_HOST=host.docker.internal
EXPOSE 5000:5000
CMD ["yarn", "dev"]
Docker-compose.yml
version: "3.8"
services:
api:
image: api
build: ../typescript_api
volumes:
- ../typescript_api:/var/app
environment:
DB_USER: postgres
DB_PASSWORD: postgres
DB_HOST: host.docker.internal
DB_PORT: 5432
DB_NAME: typescript_api
ACCESS_TOKEN_SECRET: 1c6c3296f699e051220674d329e040dee0abae986f62d62eb89f55dfa95bff1ac9b52731177e664e25bff9b6ce0eba6ec7a9b6cf7d03e94487dc03179dc31c7e
ports:
- "5000:5000"
front:
image: front
build: .
volumes:
- ./:/var/app
environment:
REACT_APP_MAPBOX_TOKEN: pk.eyJ1Ijoic291c2FkaWVnbzExIiwiYSI6ImNrdHEwbDRrdTBycTEycXBtbXZ5eXEzMm4ifQ.U58H7S1um_WcRC2rBoEuNw
REACT_APP_API_URL: http://localhost:5000
depends_on:
- api
ports:
- "3000:3000"
Hello i tried to build docker-compose in my project with these structure file:
app/
-front-end/src/Components
-back-end/images
but when i run build i have these error with img relative url:
frontend_1 | Module not found: Can't resolve '../../../../../back-end/images'
And these is my docker-compose file:
version: '2'
services:
backend:
network_mode: host
build: ./back-end/
ports:
- "6200:6200"
volumes:
- ./back-end:/usr/src/app
frontend:
build: ./front-end/
ports:
- "3000:3000"
volumes:
- ./front-end:/usr/src/app
depends_on:
- backend
My frontend Dockerfile:
FROM node:10.15.3
RUN mkdir -p /usr/src/app
WORKDIR /TuKanasta
EXPOSE 3000
CMD ["npm", "start"]
the backend Dockerfile:
FROM node:10.15.3
RUN mkdir -p /usr/src/app
WORKDIR /TuKanasta
RUN npm install -g nodemon
EXPOSE 4000
CMD [ "npm", "start" ]
Note: My project run 100 % without docker.
volumes:
- ./back-end:/usr/src/app
...
volumes:
- ./front-end:/usr/src/app
If set in the same image, the second bind mount volume would overwrite the first /usr/src/app content, as illustrated in gladiusio/gladius-archive-node issue 4.
If set in two different images, /usr/src/app in frontend1 would not be able to see back-end, copied in /usr/src/app separate volume of backend service.
Declaring the volume as external might help, as illustrated in this thread.
Or copying into an existing volume (shown here)
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/
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"]