So I have this working as expected with flask where I used...
volumes:
- ./api:/app
And any files that I change in the api are picked up by the running session. I'd like to do the same for the frontend code.
For node/nginx, I used the below configuration. The only way for the file changes to be picked up is if I rebuild. I'd like for file changes to be picked up as they do for python but a bit stuck on why similar set up is not working for src files. Anyone know why this might be happening?
local path structure
public\
src\
Dockerfile.client
docker--compose.yml
docker file...
FROM node:16-alpine as build-step
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json ./
COPY ./src ./src
COPY ./public ./public
RUN yarn install
RUN yarn build
FROM nginx:alpine
COPY --from=build-step /app/build /usr/share/nginx/html
COPY nginx/nginx.conf /etc/nginx/nginx.conf
docker-compose
client:
build:
context: .
dockerfile: Dockerfile.client
volumes:
- ./src:/src
restart: always
ports:
- "80:80"
depends_on:
- api
This is happening because you are building the application.
...
RUN yarn build
...
and them using your build folder:
FROM nginx:alpine
COPY --from=build-step /app/build /usr/share/nginx/html
I believe that what you are looking for is a live reload. You can find a good example here.
But basically what you need is a Dockerfile like this:
# Dockerfile
# Pull official Node.js image from Docker Hub
FROM node:12
# Create app directory
WORKDIR /usr/src/app
# Install dependencies
COPY package*.json ./
RUN npm install
# Bundle app source
COPY . .
# Expose container port 3000
EXPOSE 3000
# Run "start" script in package.json
CMD ["npm", "start"]
your npm start script:
"start": "nodemon -L server/index.js"
and your volume:
volumes:
- ./api:/usr/src/app/serve
Related
I am pretty new to Docker, so in order to train it a bit i would like to fully dockerize my app. App consists of 3 main folders:
Folder - backend - where i have php backend of my app
Folder - frontend - where i have vue frontend of my app
File docker-compose.yml - nothing to add i guess :D
Folder - docker -> where i have folders with Dockerfiles for each system -> vue,php,nginx
Dockerfile for nginx:
FROM nginx:1.17.8-alpine
# Copy the public directory
COPY . /app/
# Copy the nginx config file
COPY ./docker/nginx/nginx.conf /etc/nginx/conf.d/default.conf
Dockerfile for php:
FROM php:7.4.3-fpm-alpine3.11
RUN docker-php-ext-install pdo pdo_mysql
COPY ./sunday_league_backend/ /app
VOLUME ["/app"]
And Dockerfile for vue:
FROM node:14.5.0-alpine
WORKDIR /sunday_league_frontend
# Install VueCLI
RUN npm install -g #vue/cli
# Copy project files
COPY . sunday_league_frontend
# Install dependencies
RUN npm install
# Expose the app port
EXPOSE 8080
# Start the app
CMD ["npm", "run", "serve"]
The server and backend part of code are working great. However when i try to add frontend to it i`m getting errno error. It says that the path is wrong npm ERR! path /sunday_league_frontend/package.json
PS What i discovered by trying multiple configurations if i switch Dockerfile for vue like this:
FROM node:14.5.0-alpine
RUN mkdir -p /app
WORKDIR /app
# Install VueCLI
RUN npm install -g #vue/cli
# Copy project files
COPY . /app/
# Install dependencies
RUN npm install
# Expose the app port
EXPOSE 8080
# Start the app
CMD ["npm", "run", "serve"]
And move all files from frontend file into main app folder, so it would be on same level as Folders for backend, docker and docker-compose.yml it will work just great. However it makes the architecture of files look terrible. What am i still missing :/
docker-compose file for better visualisation:
version: '3'
services:
web:
build:
context: .
dockerfile: docker/nginx/Dockerfile
ports:
- '8080:80'
volumes:
- .:/app/
links:
- php
- vue
php:
build:
context: .
dockerfile: docker/php/Dockerfile
volumes:
- .:/app/
vue:
build:
context: .
dockerfile: docker/vue/Dockerfile
ports:
- '8081:8080'
volumes:
- .:/app/
I have the following dockerfile
# Install dependencies only when needed
FROM node:16-alpine AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile
# Rebuild the source code only when needed
FROM node:16-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
RUN yarn build
COPY . .
# Production image, copy all the files and run next
FROM node:16-alpine AS runner
WORKDIR /app
ENV NODE_ENV production
RUN addgroup -g 1001 nodejs
RUN adduser -S 1001 nextjs
# You only need to copy next.config.js if you are NOT using the default configuration
COPY --from=builder /app/next.config.js ./
COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json
USER nextjs
EXPOSE 3000
# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Uncomment the following line in case you want to disable telemetry.
ENV NEXT_TELEMETRY_DISABLED 1
ENV HOST=0.0.0.0
CMD yarn start
and the following docker-compose file
version: '3.5'
services:
ellis-development:
image: ellis-development
container_name: app
build:
context: .
dockerfile: dockerfile.dev
environment:
- NEXT_PUBLIC_ENV
- SENDGRID_API_KEY
- MONGODB_URI
- NEXTAUTH_SECRET
- NEXTAUTH_URL
ports:
- 3000:3000
volumes:
- .:/app
links:
- mongodb
depends_on:
- mongodb
mongodb:
image: mongo:latest
# environment:
# MONGO_INITDB_ROOT_USERNAME: root
# MONGO_INITDB_ROOT_PASSWORD: testing123
ports:
- 27017:27017
volumes:
- data:/data/db
volumes:
data:
I have all my envs setup in a .env file like so
NEXT_PUBLIC_ENV=local
SENDGRID_API_KEY=<redacted>
MONGODB_URI=mongodb://localhost:27017/<redacted>
NEXTAUTH_SECRET=eb141u85
NEXTAUTH_URL="http://localhost:3000"
This creates the following when running docker compose
and I can connect to localhost:27017 using mongodb compass.
However, for some reason docker cannot connect to my application.
What am I doing wrong here? First time setting up mongodb with docker so 🤷♂️
Fixed, spotted the error as soon as I posted the question... 😅
Changed
MONGODB_URI=mongodb://localhost:27017/<redacted>
to
MONGODB_URI=mongodb://mongodb:27017/<redacted>
I want to generate an .env and and an .env.example file and push it to the docker image during the docker build with Dockerfile.
The problem is that the .env.example file is not copied to the docker image. I think it works with the normal env, because I copy the env.production and save it as an env.
However, I am using node.js and typescript. Most people know that there is a way to use env viriables in the code by generating an env.d.ts and env.example.
During docker compose i am getting unfortunately that error.
no such file or directory, open '.env.example'
apparently the env.example is not copied to the dist folder. I need this one though.
Dockerfile
# stage 1 building the code
FROM node as builder
WORKDIR /usr/app
COPY package*.json ./
RUN npm install
COPY . .
COPY .env.production .env
RUN npm run build
COPY .env.example ./dist
# stage 2
FROM node
WORKDIR /usr/app
COPY package*.json ./
RUN npm install --production
COPY --from=builder /usr/app/dist ./dist
COPY ormconfig.docker.json ./ormconfig.json
EXPOSE 4000
CMD node dist/index.js
.dockerignore
node_modules
docker-compose.yaml
version: "3.7"
services:
db:
image: postgres
environment:
POSTGRES_PASSWORD: postgres
POSTGRES_USER: postgres
POSTGRES_DB: postgres
volumes:
- ./pgdata:/var/lib/postgresql/data
ports:
- "5432:5432"
web:
build:
context: ./
dockerfile: ./Dockerfile
depends_on:
- db
ports:
- "4000:4000"
volumes:
- ./src:/src
Could somebody please help me !
here is my Dockerfile:
FROM node AS builder
WORKDIR /app
COPY package*.json ./
COPY prisma ./prisma/
COPY tsconfig.build.json ./
COPY tsconfig.json ./
RUN npm install
COPY . .
RUN npm run build
FROM node
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package*.json ./
COPY --from=builder /app/dist ./dist
EXPOSE 3000
CMD [ "npm", "run", "start:dev" ]
and here is my docker-compose.yml:
version: "3.7"
services:
web:
image: Dockerfile
build:
context: ./
dockerfile: Dockerfile.development
volumes:
- ./:/app:z
environment:
NODE_ENV : development
TZ: "${TZ:-America/Los_Angeles}"
ports:
- "3000:3000"
After I run the docker-compose up -d, I can have the error from the console :
Error Could not find TypeScript configuration file "tsconfig.build.json". Please, ensure that you are running this command in the appropriate directory (inside Nest workspace).
I have tried to copy and paste tsconfig.build.json to the docker, but it still does not work.
please help.
In your last step, you never copy over the tsconfig.build.json file or the tsconfig.json. Though, I don't see why you're using start:dev when you've already built the server in the docker image. You should just be calling node dist/main
I don't use Docker, but I've got the same error:
Error Could not find TypeScript configuration file "tsconfig.build.json". Please, ensure that you are running this command in the appropriate directory (inside Nest workspace).
I solved this by deleting the dist folder and npm run start:dev again.
I have created a nx workspace with 2 react app (client/admin) et 1 server with node.
For each, I have created a DockerFile and at the root of the project I have my docker-compose.yml.
My issue : when I use the command docker-compose up --build, the 3 app runs but for the react-app, I have a blank page whereas with the command nx serve <name_app>, we can see the app. Here is my code :
Dockerfile
FROM node:14-alpine
WORKDIR /home/node/app
COPY ./apps/front-client/src .
COPY ./package.json package.json
RUN npm install --production
EXPOSE 3000
USER node
CMD ["npx", "serve", "-s", ".", "-l", "3000"]
docker-compose.yml
services:
client:
build:
context: .
dockerfile: ./apps/front-client/Dockerfile
ports:
- 3000:3000
volumes:
- ./apps/front-client/src:/app/src
...
The root div doesn't have anything inside. Do you know why ?
Your WORKDIR is set to /home/node/app, which means that the source is placed in /home/nome/app/src.
The npx server -s . -l 3000 is executed in the /home/nome/app/src.
When you mount the volume in docker-compose, you are mounting the application on /app/src, but there is no npx serving from this folder.
Align both folders. By an unwritten convention the proper place is /app/src so change the build file to be WORKDIR /app