Build the docker with react app throws error - reactjs

Create the scratch react application using "create-react-app docker-build" then try to build the docker image for it with below docker script but it throws error when try to run that docker image.
Docker version have used: Docker version 18.09.0, build 4d60db4
Simply follow the steps in below post for docker exploration with react app but i end up with error like below
Reference : https://medium.com/#shakyShane/lets-talk-about-docker-artifacts-27454560384f
Step 1:
Build the docker image success.
docker build -t testwebapp .
Step 2:
Run the that image with below command
docker run -p 8080:80 testwebapp:latest
Docker script used:
FROM node:10.9 as build-deps
WORKDIR /usr/src/app
COPY package.json yarn.lock ./
RUN yarn
COPY . ./
RUN yarn build
FROM nginx:1.12-alpine
COPY - from=build-deps /usr/src/app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
Error log:
docker: Error response from daemon: driver failed programming external connectivity on endpoint festive_margulis (71686edb7753ec2fdf019ef4cfcf0e95476e1fb7c2368084feb17fd2551fcf45): Error starting userland proxy: mkdir /port/tcp:0.0.0.0:8080:tcp:172.17.0.3:80: input/output error.

Usually, this is a problem with the Docker engine.
service docker restart

If you are working with Windows you have to specify the ip address like
docker run -ip 127.0.0.1 -p 8080:80 testwebapp:latest
And usually for me i have to restart the docker on windows after pc start twice then works everything as it should

Related

I am facing an error while running docker file locally

Here is my docker file for create-react-app
# Stage 1 - the build process
FROM node:8.10 as build-deps
WORKDIR /usr/src/app
COPY package.json yarn.lock ./
RUN yarn
COPY . ./
RUN yarn build
# Stage 2 - the production environment
FROM nginx:1.12-alpine
COPY --from=build-deps /usr/src/app/build /usr/share/nginx/html
EXPOSE 3000
CMD ["nginx", "-g", "daemon off;"]
So when I am running the command -
sudo docker build -t react-docker
I am facing this issue :-
Sending build context to Docker daemon 12.17MB
Step 1/10 : FROM node:8.10 as build-deps
Get https://registry-1.docker.io/v2/: proxyconnect tcp: dial tcp: lookup proxy.example.com on 127.0.1.1:53: no such host
Can you please help me with this issue. On the first step only it is throwing error I guess.
Looks like docker was set to use a proxy (by mistake)?
If it's intentional but has a typo, fix it, otherwise remove it.
Look for it with:
systemctl show --property=Environment docker
If found, fix/(or comment it out), flush, restart, check
More details : https://docs.docker.com/config/daemon/systemd/
Another place to check where it might be set:
cat /etc/sysconfig/docker

Why don't I get access to the React application inside Docker?

I executed npm run build and created a react build then I build a Docker image with the Docker file.
FROM node:12.2.0-alpine
COPY build ./
RUN ["npm", "install", "-g", "serve"]
CMD ["serve", "-s", "build"]
I run this docker image with the command:
docker run -ip 5000:5000 steinko/testreacttutorial:1
Then I got the message:
INFO: Accepting connections at http://localhost:5000
When I enter localhost:5000 in the browser I get the following:
404 Request path could not be found
How do I fix this error?
please check the docker inspect command output for your image to find the application port exposed and then map that to 5000 port in the docker run command

Connection refused error between react and spring boot in a docker environment

I'm trying to run a full stack application of React JS and Spring Boot in my docker environment. Locally everything works fine. But inside the docker environment, the react js and spring boot application both starts. But I'm getting a connection refused error when I'm trying to establish communication between react and spring boot.
I've added a ProxyPass in my apache2 config file inside the docker environment as follows :-
ProxyPass /app-name/ http://0.0.0.0:9090/
Error :- OPTIONS http://localhost:8080/login net::ERR_CONNECTION_REFUSED.
Docker commands used :-
Docker command to build the docker image :-
docker build --rm -t <image-name>.
I've exposed the ports required in the docker run command as follows :-
docker run --rm -p 5050:8080 -p 6060:3000 --name <container-name> <image-name>
Docker command to exec inside the container :-
docker exec -it <container-name> /bin/bash
Inside the docker environment, I started the spring boot application using
mvn spring-boot:run and started the react application using yarn install followed by yarn start
How do I solve the connection refused error here?
As per comment ERR_CONNECTION_REFUSED is shown because you are exposing port 5050 on the host and not 8080.
Using http://localhost:5050 will work or you can run the docker command and expose the port on the host as 8080 too
docker run --rm -p 8080:8080 -p 6060:3000 --name <container-name> <image-name>
If you are using separate containers for react app and spring boot app run docker inspect and be shure you are pointing to the Ip address of the container and not to localhost

Why does docker run do nothing when i try to run my app?

I made a website to React and I'm trying to deploy it to an Nginx server by using Docker. My Dockerfile is in the root folder of my project and looks like this:
FROM tiangolo/node-frontend:10 as build-stage
WORKDIR /app
COPY . ./
RUN yarn run build
# Stage 1, based on Nginx, to have only the compiled app, ready for production with Nginx
FROM nginx:1.15
COPY --from=build-stage /app/build/ /usr/share/nginx/html
# Copy the default nginx.conf provided by tiangolo/node-frontend
COPY --from=build-stage /nginx.conf /etc/nginx/conf.d/default.conf
When I run docker build -t mywebsite . on the docker terminal I receive a small warning that I'm building a docker image from windows against a non-windows Docker host but that doesn't seem to be a problem.
However, when I run docker run mywebsite nothing happens, at all.
In case it's necessary, my project website is hosted on GitHub: https://github.com/rgomez96/Tecnolab
What are you expecting ? Nothing will happen on the console except the nginx log.
You should see something happening if you go to http:ip_of_your_container.
Otherwise, you can just launch your container with this command :
docker container run -d -p 80:80 mywebsite
With this command you'll be able to connect to your nginx at this address http://localhost as you are forwarding all traffic from the port 80 of your container to the port 80 of your host.

Create-react-app livereload with Docker on Windows

I'm trying to run docker on Windows 10 (Linux Containers Mode) to run react development workspace. I managed to run React app boilerplate but livereloading is not working.
Here's some details:
Dockerfile is exposing both 5000 and 35729 ports
Files are mounted and created inside the container via docker exec and create-react-app . commands
WS request status is 101 (that's correct)
Dockerfile:
FROM node:latest
#installing react app first
RUN npm install -g create-react-app
VOLUME [ "/application" ]
#First example was EXPOSE 3000 35729
EXPOSE 3000
EXPOSE 35729
Build command: docker build . -t react-image
Run command: docker run -d -p 3000:3000 -p 35729:35729 -v %PATH_TO_APP_FOLDER%\application:/application --name react-container react-image
Exec command: docker exec -it react-container bash
Then inside the container:
cd application
create-react-app .
yarn start
OUTPUT:
Compiled successfully!
You can now view application in the browser.
Local: http://localhost:3000/ On Your Network:
http://172.17.0.2:3000/
Note that the development build is not optimized. To create a
production build, use yarn build.
Once I open: http://localhost:3000 everything seems to work fine. If I change files from my host machine files are also changed inside the container (checked with cat App.js). But changing files doesn't trigger webpack re-compiling and livereload.
Any suggestions?
Please let me know if I need to provide more details. Thanks
This can be solved by setting watchOptions.poll to true inside the webpack config:
References

Resources