I want to run my Next.js code using docker. Here is my code structure
When I build it, it returns success like this.
But, when I open it, I get this...
my docker.compose.yaml file contain this...
version: '3.8'
services:
web:
image: 'app'
ports:
- '3000:3000'
container_name: app-next
build:
context: web
dockerfile: Dockerfile
volumes:
- ./web:/usr/src/app
- /usr/src/app/node_modules
- /usr/src/app/.next
my Dockerfile contain this...
FROM node:12-alpine
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
COPY package*.json yarn.lock /usr/src/app/
RUN yarn install
EXPOSE 3000
CMD ["yarn", "dev"]
my browser console contain this...
Anyone can fix this?
Thanks
Related
I have some issues with docker. It's my first time and I don't understand everything.
I use it for my front: React and ViteJS, and for my backend express/MySQL. 1 folder for the front and 1 folder for the back.
If I understand correctly, I need 1 docker file for each folder, and in the parent one docker-compose.yml, right?
They are my docker file for front :
FROM node:16 as build
WORKDIR /src
COPY package*.json ./
RUN npm install --silent
COPY . .
RUN npm run build
FROM nginx
COPY --from=build /src/build /usr/share/nginx/html
EXPOSE 80
and the back :
FROM node:16 AS production
WORKDIR /node
COPY package*.json ./
RUN npm install
COPY . .
CMD ["npm", "run", "start"]
The docker-compose :
version: "3.9"
services:
frontend:
build:
context: ./FindMeAStreamer
dockerfile: Dockerfile.prod
ports:
- "5173:80"
# env_file:
# - ./FindMeAStreamer/.env
environment:
- NODE_ENV=production
backend:
build:
context: ./FindMeAStreamer_server
dockerfile: Dockerfile.prod
ports:
- "3000:3000"
# env_file:
# - ./FindMeAStreamer_server/.env
environment:
- DB_HOST=db
- DB_USER=root
- DB_PASSWORD=secret-pw
- DB_DATABASE=findmeastreamer
restart: always
depends_on:
- db
db:
image: mysql:5.7
restart: always
environment:
- MYSQL_DATABASE=findmeastreamer
# - MYSQL_USER=root
# - MYSQL_PASSWORD=secret-pw
- MYSQL_ALLOW_EMPTY_PASSWORD='no'
- MYSQL_ROOT_PASSWORD=secret-pw
ports:
- "3306"
# volumes:
# - my-database:/var/lib/mysql
# networks:
# - mynetwork
adminer:
image: adminer
restart: always
ports:
- 8081:8081
When I do on local npm run build, viteJS make a new folder : dist, with minify code. Inside it's :
---dist
-assets (inside my .png and two index like index-e3d58a7f.js, same for CSS )
index.html
favicon.png
I use this command to launch the docker-compose : docker-compose -f docker-compose-prod.yml up -d --build
But when I check the front containers's logs, i see all my files, but index are not correct. For me, my dockerfile don't copy correctly my folder.. and nothing works. Can you help me to understand why docker doesn't work? :(
I try :
Modify my docker file in the frontend, and change workdir to other names.
Try to add a nginx.conf.
I am trying to run a docker on my React app but it does not connect. Actually I see it is up at address 0.0.0.0:3000, but does not open in a browser. I am new to docker and still figuring out in how it works. How can I connect and open the app?
docker-compose.yml
version: "3"
services:
node:
build: .
image: node:16
container_name: myapp
tty: true
stdin_open: true
command: bash
restart: always
working_dir: /app
volumes:
- ./:/app
ports:
- 3000:3000
Dockerfile
FROM node:16-alpine
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
CMD ["npm", "start"]
Running at port 3000
e810d9f622c0 node:16 "docker-entrypoint.s…" 5 minutes ago Up 5 minutes 0.0.0.0:3000->3000/tcp, :::3000->3000/tcp
Your docker-compose file contains a number of misunderstandings
When you have both build: and image: docker-compose will build an image based on your dockerfile and tag it with the name you give in image:. However, you name yours node:16 which is not a good idea since that could be mistaken for the official node image.
you have both tty: and stdin_open: set to true. If you want to run node, then there's no need to run it interactively.
Your command: overrides the CMD defined in the Dockerfile, so your npm start command is no longer run.
Setting work_dir: to /app is superfluous since the WORKDIR is already set to /app in the Dockerfile.
Mapping a volume to /app hides everything in the /app path in the docker image. You've probably added this to get hot reload. Doing it this way is not a good idea, since it makes evereything in your Dockerfile that builds the /app directory irrelevant.
That leaves us with
version: "3"
services:
node:
build: .
container_name: myapp
restart: always
ports:
- 3000:3000
Run that and you should be able to go to http://localhost:3000/ and see your app.
I am using Docker 20.10.12 and docker-compose v2.2.3 and I want to enable hot reload in my react application, environment windows 11.
My Dockerfile
FROM node:alpine
WORKDIR /app
COPY ./package.json ./
COPY ./package-lock.json ./
RUN npm install
COPY ./ ./
CMD [ "npm", "run", "start" ]
My docker-compose.yml
version: "3"
services:
frontend:
build:
context: .
dockerfile: Dockerfile.dev
environment:
CHOKIDAR_USEPOLLING: "true"
volumes:
- /app/node_modules
- ./:/app
ports:
- 3000:3000
I've even tried to use this command docker run -it -p 3000:3000 -v /app/node_modules -v "$(pwd):/app" sha256:c20d9ef0854b483 but it didn't work.
If you know how I can achieve this, you can help me.
I've tried to implement the solution given in this question but it doesn't work. Can't seem to figure out where I'm going wrong.
File structure looks like this:
backend/
- Dockerfile
frontend/
- node_modules/
- src/
- Dockerfile
docker-compose.yml
frontend/Dockerfile:
FROM node:16.13.2
WORKDIR /app
COPY package.json .
COPY package-lock.json .
RUN npm ci
EXPOSE 3000
COPY . ./
CMD ["npm", "start"]
docker-compose.yml
version: '3.9'
services:
backend:
build: backend/.
command: python manage.py runserver 0.0.0.0:8000
ports:
- "8000:8000"
links:
- frontend
frontend:
build: frontend/.
environment:
- CHOKIDAR_USEPOLLING=true
volumes:
- './frontend:/app'
ports:
- "3000:3000"
I'm almost certain it's my volumes that are defined wrong, just can't seem to figure out the exact details.
EDIT:
It would appear that this is an issue with the latest version of create-react-app. Ref github issues: #11879 and #11897
Now I am developing a React application. For the deployment I want to use nginx as the web server. I have written a docker-compose file with two services (One for React app and another for nginx webserver). Usually nginx service needs only the 'build' folder from the react project.
Now my question is how can I copy the 'build' folder from the react container to the nginx container directory when the react container is running.
Please take a look on the Dockerfiles and the yaml file.
docker-compose.yaml
version: "3"
services:
nginx-server:
image: nginx_server:dev
container_name: nginx
build:
context: ./nginx
dockerfile: Dockerfile
restart: always
command: >
sh -c "cp -R /build/ /var/www/html/" // I want to do something like that
volumes:
- .:/react_app_server/nginx
ports:
- 80:80
depends_on:
- react-app
networks:
- server_network
react-app:
container_name: my_react_app
build:
context: .
dockerfile: ./Dockerfile
image: my_react_app:dev
tty: true
volumes:
- .:/react_app
ports:
- "1109:1109"
networks:
- frontend_network
command: >
bash -c "npm run-script build"
networks:
frontend_network:
driver: bridge
server_network:
driver: bridge
volumes:
static-volume:
Dockerfile for React app
FROM node:10.16.3
RUN mkdir /app
WORKDIR /app
COPY . /app
ENV PATH /app/node_modules/.bin:$PATH
RUN npm install --silent
RUN npm install react-scripts#3.0.1 -g --silent
RUN npm run-script build
Dockerfile for Nginx
FROM nginx:1.16.1-alpine
RUN rm /etc/nginx/conf.d/default.conf
COPY /prod.conf /etc/nginx/conf.d
Project Directory
My_React_App
build
nginx
Dockerfile
prod.conf
node_modules
public
src
.dockerignore
docker-compose.yaml
Dockerfile
package-lock.json
package.json
README.md
You don't actually need to copy the data, rather making use of same volume should work.
You need to share a named volume between the two containers.
Your docker-compose.yaml should be:
version: "3"
services:
nginx-server:
image: nginx_server:dev
container_name: nginx
|
|
volumes:
- .:/react_app_server/nginx
- app-volume:/var/www/html/
|
|
react-app:
container_name: my_react_app
build:
context: .
|
|
volumes:
- .:/react_app
- app-volume:/path/to/build/folder/
|
|
NOTE: Here app-volume is a named volume which we are mounting at directory inside react-app container where the build folder is expected to get created. The same app-volume named volume is also mounted inside nginx container at /var/www/html/ where you want the build folder to get copied.
Also instead of named volume you can also mount same host directory in both the containers and share the data. -v /samepath/on/host:/path/to/build/folder and -v /samepath/on/host:/var/www/html.
Hope this helps.