How to dockerize React Nextjs - docker

I want to build my next js project by docker tool, but I got some trouble like this:
Error: Could not find a production build in the '/var/app/.next' directory. Try building your app with 'next build' before starting the production server. https://nextjs.org/docs/messages/production-start-no-build-id
Dockerfile:
FROM node:16-alpine
RUN mkdir -p /var/app
COPY ["./", "/var/app"]
WORKDIR /var/app
RUN npm i -g next
EXPOSE 3002
RUN npm run build
CMD ["npm", "run", "start"]
docker-compose.yml
version: '3.3'
services:
next-project:
container_name: next-project
build: ./
working_dir: /var/app
restart: 'unless-stopped'
volumes:
- ./:/var/app
env_file:
- .env
ports:
- "54000:3002"
I do run commands like this
docker-compose build && docker-compose up -d
the build was successful but when it run is failed, is there any missing configuration?

When you map your current directory to /var/app, all the files that are in that directory in the container become hidden and replaced with the files in the current directory.
Since you don't have a .next directory in the host directory, the container can't find the built files.
To get it to run, you need to remove the mapping of the current directory, so your docker-compose file becomes
version: '3.3'
services:
next-project:
container_name: next-project
build: ./
working_dir: /var/app
restart: 'unless-stopped'
env_file:
- .env
ports:
- "54000:3002"

Related

Run commands on docker container and sync automatically with host

I Dockerkized a MENN(Nextjs) stack App, now everything works fine. I run into issues when i need to install npm packages. let me first show you the structure
src/server/Dockerfile
FROM node:14-alpine
WORKDIR /usr/app
COPY package*.json ./
RUN npm install -qyg nodemon#2.0.7
RUN npm install -qy
COPY . .
CMD ["npm", "run", "dev"]
src/client/Dockerfile
FROM node:14-alpine
WORKDIR /usr/app
COPY package*.json ./
RUN npm install -qy
COPY . .
CMD ["npm", "run", "dev"]
src/docker-compose.yml
version: "3"
services:
client:
build:
context: ./client
dockerfile: Dockerfile
ports:
- 3000:3000
networks:
- mern-network
volumes:
- ./client/src:/usr/app/src
- ./client/public:/usr/app/public
depends_on:
- server
environment:
- REACT_APP_SERVER=http://localhost:5000
- CHOKIDAR_USEPOLLING=true
command: npm run dev
stdin_open: true
tty: true
server:
build:
context: ./server
dockerfile: Dockerfile
ports:
- 5000:5000
networks:
- mern-network
volumes:
- ./server/src:/usr/app/src
depends_on:
- db
environment:
- MONGO_URL=mongodb://db:27017
- CLIENT=http://localhost:3000
command: /usr/app/node_modules/.bin/nodemon -L src/index.js
db:
image: mongo:latest
ports:
- 27017:27017
networks:
- mern-network
volumes:
- mongo-data:/data/db
networks:
mern-network:
driver: bridge
volumes:
mongo-data:
driver: local
Now if i install any packages using the host machine it is as expected updated in package.json file and if run
docker-compose build
the package.json is also updated inside the container which is fine, but i feel like this kinda breaks the whole point of having your App Dockerized! , if multiple developers need to work on this App and they all need to install node/npm in their machines whats the point of using docker other than for deployments? so what I do right now is
sudo docker exec -it cebc4bcd9af6 sh //login into server container
run a command e.g
npm i express
it installs the package and updates package.json but the host package.json is not updated and if i run the build command again all changes are lost as Dockerfile copies in the source code of host into container, is there a way to synchronize the client and host? in a way that if i install a package inside my container that should also update the host files? this way i dont need to have node/npm installed locally and fulfills the purpose of having your App Dockerized!

How to build docker file for a VueJs application

I am new in docker. I've built an application with VueJs2 that interacts with an external API. I would like to run the application on docker.
Here is my docker-compose.yml file
version: '3'
services:
ew_cp:
image: vuejs_img
container_name: ew_cp
build:
context: .
dockerfile: Dockerfile
volumes:
- '.:/app'
- '/app/node_modules'
ports:
- '8080:8080'
Here is my Dockerfile:
FROM node:14.17.0-alpine as develop-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
RUN yarn install
COPY . .
EXPOSE 8080
CMD ["node"]
Here is the building command I run to build my image an container.
docker-compose up -d
The image and container is building without error but when I run the container it stops immediately. So the container is not running.
Are the DockerFile and compose files set correctly?
First of all you run npm install and yarn install, which is doing the same thing, just using different package managers. Secondly you are using CMD ["node"] which does not start your vue application, so there is no job running and docker is shutting down.
For vue applicaton you normally want to build the app with static assets and then run a simple http server to serve the static content.
FROM node:lts-alpine
# install simple http server for serving static content
RUN npm install -g http-server
# make the 'app' folder the current working directory
WORKDIR /app
# copy 'package.json' to install dependencies
COPY package*.json ./
# install dependencies
RUN npm install
# copy files and folders to the current working directory (i.e. 'app' folder)
COPY . .
# build app for production with minification
RUN npm run build
EXPOSE 8080
CMD [ "http-server", "dist" ]
Your docker-compose file could be as simple as
version: "3.7"
services:
vue-app:
build:
context: .
dockerfile: Dockerfile
container_name: vue-app
restart: always
ports:
- "8080:8080"
networks:
- vue-network
networks:
vue-network:
driver: bridge
to run the service from docker-compose use command property in you docker-compose.yml.
services:
vue-app:
command: >
sh -c "yarn serve"
I'm not sure about the problem but by using command: tail -f /dev/null in your docker-compose file , it will keep up your container so you could track the error within it and find its problem. You could do that by running docker exec -it <CONTAINER-NAME> bash and track the error logs in your container.
version: '3'
services:
ew_cp:
image: vuejs_img
container_name: ew_cp
build:
context: .
dockerfile: Dockerfile
volumes:
- '.:/app'
- '/app/node_modules'
command: tail -f /dev/null
ports:
- '8080:8080'
In your Dockerfile you have to start your application e.g. npm run start or any other scripts that you are using for running your application in your package.json.

docker-compose doesn't refresh volumes on file changes

I am using Docker Toolbox on Windows 10 Home. I am not able to see the changes in my code on the docker-container.
My docker-compose.yml file looks like this
version: "3.7"
services:
flask:
build: ./flask
container_name: flask
restart: always
environment:
- APP_NAME=MyFlaskApp
expose:
- 8080
volumes:
- ./flask:/app
nginx:
build: ./nginx
container_name: nginx
restart: always
ports:
- "80:80"
And my Dockerfile looks like this
FROM python:3.7.2-stretch
# Set the working directory to /app
WORKDIR /app
# Copy the current directory contents into the container at /app
ADD . /app
# Install the dependencies
RUN pip install -r requirements.txt
# run the command to start uWSGI
CMD ["uwsgi", "app.ini"]
My folder structure is like this
-project
- flask
- app.ini
- Dockerfile
- requirements.txt
- run.py
-nginx
- Dockerfile
- nginx.conf
I'm pretty sure everything is in order here but I still can't make live changes to the server

Unable to npm install in a node docker image

FROM node:latest
WORKDIR /frontend/
ENV PATH /frontend/node_modules/.bin:$PATH
COPY package.json /frontend/package.json
COPY . /frontend/
RUN npm install --silent
RUN npm install react-scripts#3.0.1 -g --silent
CMD ["npm", "run", "start"]
This is my Dockerfile for the frontend of my project.
I put this as one of the services in my docker-compose.yml file, and when I run docker-compose up -d --build, it gives me
Step 6/8 : RUN npm install --silent
---> Running in 09a4f59a96fa
ERROR: Service 'frontend' failed to build: The command '/bin/sh -c npm install --silent' returned a non-zero code: 1
My docker-compose file looks like below for your reference:
# Docker Compose
version: '3.7'
services:
frontend:
container_name: frontend
build:
context: frontend
dockerfile: Dockerfile
ports:
- "3000:3000"
volumes:
- '.:/frontend'
- '/frontend/node_modules'
backend:
build: ./backend
ports:
- "5000:5000"
volumes:
- .:/code
Thanks in advance
EDIT: Error in the frontend after build
For docker-compose, I think it should be like
- ./frontend/:/frontend'
as the build context is frontend.
Second, thing if you are using volume then why you are installing and copying code in Dockerfile? If you are using bind volume then remove these from your Dockerfile as these will be overridden from the host code.
COPY package.json /frontend/package.json
COPY . /frontend/

docker-compose up --build becomes very slow using cloud docker-machine

docker-compose up --build becomes very slow using cloud docker-machine and after one hour i have and error of a not found entrypoint.sh file.
On local Mac docker-machine same config work fine.
My docker file
FROM python:3.5.2
ENV PYTHONUNBUFFERED 1
RUN mkdir /code
WORKDIR /code
ADD requirements.txt /code/
RUN pip install -r requirements.txt
ADD app/ /code/
ADD static/ /code/
ADD entrypoint.sh /code/
my docker compose
version: '3.7'
services:
web:
build: .
command: gunicorn --bind 0.0.0.0:8000 app.wsgi
volumes:
- .:/code
entrypoint: ./entrypoint.sh
expose:
- "80"
nginx:
image: nginx:1.15.5
restart: always
ports:
- "80:80"
volumes:
- ./static:/static
depends_on:
- web
commands I run
cd myprojectfolder
eval $(docker-machine env [my-cloud-machine-name])
docker-compose -f docker-compose.yml -f envs/prd/prd.yml up --build -d
error i have after one hour (my project files are only 40mb)
ERROR: for web Cannot start service web: OCI runtime create failed: container_linux.go:348: starting container process caused "exec: \"./entrypoint.sh\": stat ./entrypoint.sh: no such file or directory": unknown
ERROR: compose.cli.main.main: Encountered errors while bringing up the project.
Please help me
Thanks
I changed as suggested to this configuration but nothing changed. I'm stuck on this:
docker.api.build._set_auth_headers: Sending auth config ()
this is my new config
docker compose
version: '3.7'
services:
web:
command: gunicorn --bind 0.0.0.0:8000 app.wsgi
entrypoint: ./entrypoint.sh
expose:
- "80"
nginx:
image: nginx:1.15.5
restart: always
ports:
- "80:80"
volumes:
- ./static:/static
depends_on:
- web
my prd.yml file
version: '3.7'
services:
web:
build:
context: .
dockerfile: ./envs/prd/Dockerfile
nginx:
volumes:
- ./envs/prd/nginx/nginx.conf /etc/nginx/nginx.conf
my prd dockerfile
FROM python:3.5.2
ENV PYTHONUNBUFFERED 1
WORKDIR /
ADD requirements.txt .
RUN pip install -r requirements.txt
ADD app/ ./app
ADD static/ ./static
ADD envs/prd/settings.py /app/settings.py
ADD entrypoint.sh .
my .dockerignore
.DS_Store
.dockerignore
.git/
.gitignore
README.rst
README.md
*.pyc
__pycache__
.idea/*
Remove the volume declarations from your docker-compose and instead copy all relevant files in during the build stage (in your Dockerfile). For example in your web service remove volumes: .:/code and add COPY * /code to its Dockerfile.

Resources