Why my react build folder doesn't serve after run python manage.py collectstatic command in Dockerfile? I have tried for a long time to dockerized my whole project but I did fail to collect static files. Where I miss please have a look into it.
***This is my backend/Dockerfile inside django project ***
FROM python:3.9.5-slim
ENV PYTHONUNBUFFERED 1
RUN pip install --upgrade pip
RUN apt-get update && apt-get install build-essential python-dev -y
COPY requirements.txt requirements.txt
RUN pip3 install -r requirements.txt && pip3 install uwsgi
WORKDIR /django
COPY . .
CMD ['RUN', 'python', 'manage.py', 'collectstatic', '--noinput']
EXPOSE 8000
CMD ["uwsgi", "--http", ":9090", "--wsgi-file", "IMS/wsgi.py", "--master", "--processes", "4", "--threads", "2"]
And this is my frontend/Dockerfile inside my react folder
FROM node:13.12.0-alpine
WORKDIR /react
COPY . .
RUN npm install
RUN npm run build
EXPOSE 3000
And finally, this is my docker-compose.yml file where I setup 3 services
version: "3.3"
services:
backend:
build:
context: ./backend/
command: gunicorn IMS.wsgi --bind 0.0.0.0:8000
container_name: ims-backend
restart: always
ports:
- "8000:8000"
networks:
- ims-network
ims-postgres:
image: "postgres:14beta2-alpine3.14"
restart: always
container_name: ims-postgres
hostname: emrdsaws.czlz2b677ytu.ap-south-1.rds.amazonaws.com
environment:
- POSTGRES_PASSWORD=zkf!%uW_?&UG%4
- POSTGRES_DB=imsrds
- POSTGRES_USER=dbrdsubuntume12
ports:
- 5432
frontend:
build:
context: ./frontend/
volumes:
- react_build:/react/build
expose:
- 3000
stdin_open: true
nginx:
image: nginx:latest
ports:
- "8080:8080"
volumes:
- ./nginx/nginx-setup.conf:/etc/nginx/conf.d/default.conf:ro
- react_build:/var/www/react
depends_on:
- backend
- frontend
- ims-postgres
volumes:
react_build:
networks:
ims-network:
driver: bridge
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 can't get all the routes of React with docker-compose up command.
docker-compose up => that only allows me to access the default route of the react app. Also, I can access them successfully with local npm run command. Am I missing something, may be in containerisation?
Any ideas why is it happening?
Here's my .yml file
version: "3"
services:
client:
build:
context: ./client
dockerfile: Dockerfile
image: fc-client-app
restart: always
ports:
- "80:80"
volumes:
- /client-app/node_modules
- .:/client-app
depends_on:
- "server"
server:
build:
context: ./server
dockerfile: Dockerfile
image: fc-server-app
ports:
- "8080:8080"
volumes:
- /server-app/node_modules
- .:/server-app
The problem is with the client service.
And here's my Docker File of Client service:-
FROM node:lts
WORKDIR /usr/src/client-app
ENV PATH /usr/src/client-app/node_modules/.bin:$PATH
COPY package*.json ./
RUN npm install
RUN npm install react-scripts#3.4.1 -g
COPY . .
EXPOSE 80
CMD ["npm", "start"]
You are exposing port 8080 in your client docker file, but the port specified in the docker-compose is 80 for your client service. And 8080 is for your server service. Please try changing the client port in your docker file.
I'm trying to make one Docker Compose file to up an WEB (reactJS), API (.NET Core 2.1) and an SQL Server instance.
When I init the database and run .NET with dotnet cli, it works (using a connection string Server=localhost). However what I've been googling is that localhost does not work on containers. And when using container I can't get my .NET Core to connect with my SQL Server.
Can anyone shed some light what am I doing wrong?
I have this repo:
https://github.com/lucasgozzi/sagetest
And I'm currently using a branch names 'docker'. Here is my Docker files and composer in case you don't want to clone the repo.
Backend dockerfile:
FROM mcr.microsoft.com/dotnet/core/aspnet:2.1
WORKDIR /app
FROM mcr.microsoft.com/dotnet/core/sdk:2.1
WORKDIR /src
COPY . .
RUN dotnet restore "./Api/Api.csproj"
RUN dotnet build "Api/Api.csproj" -c Release -o /app/build
RUN dotnet publish "Api/Api.csproj" -c Release -o /app/publish
EXPOSE 5000
WORKDIR /app/publish
ENTRYPOINT ["dotnet", "Api.dll"]
Frontend dockerfile:
# base image
FROM node:12.2.0-alpine
# set working directory
WORKDIR /app
EXPOSE 3000
# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH
# install and cache app dependencies
COPY . .
RUN npm install --silent
RUN npm install react-scripts -g --silent
# start app
CMD ["npm", "start"]
Docker compose:
version: '3.1'
services:
api:
container_name: "teste-sage-api"
image: 'teste-sage-api'
build:
context: ./backend
dockerfile: Dockerfile
volumes:
- ./backend:/var/www/backend
ports:
- "5000:5000"
depends_on:
- "database"
networks:
- sagetest-network
web:
container_name: "teste-sage-web"
image: 'teste-sage-web'
build:
context: ./frontend_react
dockerfile: Dockerfile
ports:
- "3000:3000"
depends_on:
- "api"
networks:
- sagetest-network
database:
container_name: "sql-server"
image: "mcr.microsoft.com/mssql/server"
environment:
SA_PASSWORD: "Teste#123"
ACCEPT_EULA: "Y"
ports:
- "1433:1433"
networks:
- sagetest-network
networks:
sagetest-network:
driver: bridge
You can access the database form your containers on the service name, in your case this will be database. But you need to make sure that the database container is up and running before trying to connect to it. depends_on is not enough for this case. you may need to implement a waitfor in your dotnet container. check this for more info https://docs.docker.com/compose/startup-order/
I would like to create a Dockerfile that builds the static files for a react application and copy it into another image.
When I run docker-compose up with the files below, I find that the nginx container doesn't have the files I want in /config/www. Any ideas what I'm missing?
docker-compose.yml
version: '3.7'
services:
api:
build:
context: ./api
dockerfile: Dockerfile-prod
volumes:
- ./db:/usr/src/app/db
ports:
- 5000
environment:
- FLASK_ENV=production
- EMAIL_USERNAME=${EMAIL_USERNAME}
- EMAIL_PASSWORD=${EMAIL_PASSWORD}
- JWT_SECRET_KEY=${JWT_SECRET_KEY}
- JWT_COOKIE_DOMAIN=${JWT_COOKIE_DOMAIN}
- ADMIN_USERNAME=${ADMIN_USERNAME}
- ADMIN_PASSWORD=${ADMIN_PASSWORD}
# client:
# build:
# context: ./client
# dockerfile: Dockerfile-prod
# volumes:
# - react:/usr/src/app/build
# environment:
# - NODE_ENV=production
nginx:
build:
context: ./
dockerfile: Dockerfile-prod
container_name: nginx
ports:
- 80:80
- 443:443
restart: unless-stopped
volumes:
# - react:/config/www
- ./nginx/prod.conf:/config/nginx/site-confs/default
environment:
- PUID=1050
- PGID=1050
- URL=${JWT_COOKIE_DOMAIN}
- TZ=Australia/Sydney
depends_on:
- api
# volumes:
# react:
Dockerfile-prod
FROM node:10.16.0-alpine AS build
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
ENV PATH /usr/src/app/node_modules/.bin:$PATH
ADD client /usr/src/app
RUN npm install
RUN npm run build
FROM linuxserver/letsencrypt
COPY --from=build /usr/src/app/build /config/www
build output
Step 7/9 : RUN npm run build
---> Running in 555e104b262d
> learning#1.3.0 build /usr/src/app
> react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
150.58 KB (-11.48 KB) build/static/js/2.c3a02695.chunk.js
18.89 KB (-2.06 KB) build/static/js/main.7370b4bd.chunk.js
18.7 KB (-128 B) build/static/css/2.0ce8856a.chunk.css
17.2 KB (-807 B) build/static/css/main.7a2495bd.chunk.css
762 B build/static/js/runtime~main.a8a9905a.js
The project was built assuming it is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add this to build it for GitHub Pages:
"homepage" : "http://myname.github.io/myapp",
The build folder is ready to be deployed.
You may serve it with a static server:
npm install -g serve
serve -s build
Find out more about deployment here:
https://********
Removing intermediate container 555e104b262d
---> 56f493772583
Step 8/9 : FROM linuxserver/letsencrypt
---> 17f7eabbfdf4
Step 9/9 : COPY --from=build /usr/src/app/build /config/www
---> e4f875f96fd3
Successfully built e4f875f96fd3
Successfully tagged learning_nginx:latest
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.