Problem with img reference in docker-compose - docker

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)

Related

Docker compose volumes Nuxtjs

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

Docker compose - build property and volumes

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"

How to include volumes in my docker configuration?

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

mkdir and copy files vs volume for webpack in docker

I am trying to get webpack setup on my docker container. It is working, and running, but when I save on my local computer it is not updating my files in my container. I have the following docker-compose file:
version: '2'
services:
web:
build:
context: .
dockerfile: docker/web/Dockerfile
container_name: arc-bis-www-web
restart: on-failure:3
environment:
FPM_HOST: 'php'
ports:
- 8080:8080
volumes:
- ./app:/usr/local/src/app
php:
build:
context: .
dockerfile: docker/php/Dockerfile
environment:
CRM_HOST: '192.168.1.79'
CRM_NAME: 'ARC_test_8_8_17'
CRM_PORT: '1433'
CRM_USER: 'sa'
CRM_PASSWORD: 'Multi*Gr4in'
volumes:
- ./app:/usr/local/src/app
node:
build:
context: .
dockerfile: docker/node/Dockerfile
container_name: arc-bis-www-node
volumes:
- ./app:/usr/local/src/app
and my node container is run by the following dockerfile:
FROM node:8
RUN useradd --create-home user
RUN mkdir /usr/local/src/app
RUN mkdir /usr/local/src/app/src
RUN mkdir /usr/local/src/app/test
WORKDIR /usr/local/src/app
# Copy application source files
COPY ./app/package.json /usr/local/src/app/package.json
COPY ./app/.babelrc /usr/local/src/app/.babelrc
COPY ./app/webpack.config.js /usr/local/src/app/webpack.config.js
COPY ./app/test /usr/local/src/app/test
RUN chown -R user:user /usr/local/src/app
USER user
RUN npm install
ENTRYPOINT ["npm"]
Now I have taken out the copy calls from above and it still runs fine, but neither option is allowing me to save files locally and have them show up in the localhost for my container. Ideally, I thought having a volume would allow me to update my local files and have it read by the volume in the container. Does that make sense? I am still feeling my way around Docker. Thanks in advance for any help.
If you start your container with -v tag, you can map the container and your local storage. You can find more information here.

named docker volume not updating using docker-compose

I'm trying to have one service to build my client side and then share it to the server using a named volume. Every time I do a docker-compose up --build I want the client side to build and update the named volume clientapp:. How do I do that?
docker-compose.yml
version: '2'
volumes:
clientapp:
services:
database:
image: mongo:3.4
volumes:
- /data/db
- /var/lib/mongodb
- /var/log/mongodb
client:
build: ./client
volumes:
- clientapp:/usr/src/app/client
server:
build: ./server
ports:
- "3000:3000"
environment:
- DB_1_PORT_27017_TCP_ADDR=database
volumes:
- clientapp:/usr/src/app/client
depends_on:
- client
- database
client Dockerfile
FROM node:6
ENV NPM_CONFIG_LOGLEVEL warn
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY package.json /usr/src/app
RUN npm install
COPY . /usr/src/app
# builds my application into /client
CMD ["npm", "build"]
By definition, a volume is the persistent directories that docker won't touch other than to perform an initial creation when they are empty. If this is your code, it probably shouldn't be a volume.
With that said, you can:
Delete the volume between runs with docker-compose down -v and it will be recreated and initialized on the next docker-compose up -d.
Change your container startup scripts to copy the files from some other directory in the image to the volume location on startup.
Get rid of the volume and include the code directly in the image.
I'd recommend the latter.
Imagine you shared your src folder like this :
...
volumes:
- ./my_src:/path/to/docker/src
...
What worked for me is to chown the my_src folder :
chown $USER:$USER -R my_src
It turned out some files were created by root and couldn't be modified by docker.
Hope it helps !

Resources