React dockerized app: routes not working - reactjs

I am new to Docker and I am trying to dockerize a React app using this Dockerfile:
Dockerfile
FROM node:latest
LABEL autor="Ed de Almeida"
RUN apt-get update && apt-get install -y apache2 tree
RUN mkdir /tmp/myapp
COPY . /tmp/myapp
RUN cd /tmp/myapp && npm install
RUN cd /tmp/myapp && npm run build
RUN cd /tmp/myapp/build && cp -Rvf * /var/www/html
RUN cd /var/www && chown -Rvf www-data:www-data html/
EXPOSE 80
ENV APACHE_RUN_USER www-data
ENV APACHE_RUN_GROUP www-data
ENV APACHE_LOG_DIR /var/log/apache2
ENV APACHE_LOCK_DIR /var/lock/apache2
ENV APACHE_PID_FILE /var/run/apache2.pid
CMD /usr/sbin/apache2ctl -D FOREGROUND
This app uses react-router v4 and it is working perfectly well in my computer when I run it with npm start. It also works fine at Heroku, but there I had to add a static.json file in order to make the routes work, or else I would have only route '/' working and all other routes (like '/admin') would give me a 404.
static.json
{
"root": "build/",
"routes": {
"/**": "index.html"
}
}
By now I have five routes at Heroku:
http://businessfy.herokuapp.com/
http://businessfy.herokuapp.com/admin
http://businessfy.herokuapp.com/admin/usuarios
http://businessfy.herokuapp.com/admin/financeiro
http://businessfy.herokuapp.com/admin/equipe
and they are running fine, going where it expected.
It happend that when I start the container created with the image generated by the Dockerfile above, I only may access '/' and all the routes that are working fine will give me a 404.
I tried to add the static.json file, but it didn't work at all. First I just copied it to the application root directory, just like at Heroku. Nothing changed. Then I tried to import it from my index.js file. Again, nothing changed.
What is the problem here? Am I missing something at Docker? I'm assuming I am, because I am used to React but new to Docker.
Any hints?

Related

Trouble running a docker container for react-app where package.json is in a subfolder

I am trying to create a dockerfile for a project that has the following folder structure:
HDWD-project
|_ client
| |_ package.json
|_ server
|_ package.json
Client is a react-app and I am just working with this at the moment, before including server which is the backend.
I am having real trouble figuring out the logic of the dockerfile and have googled furiouly for the last two days. All the examples are too easy.
I just can't seem to get react-app to start in the container, and get varying error messages. But I need to know the dockerfile is fine before I proceed.
FROM node:latest
WORKDIR HDWD-project
COPY ./client/package.json .
RUN npm install
COPY . .
RUN cd client
CMD ["npm", "start"]
Going forward I have a script that can start both the server and the client, but I'm just trying to get my head around docker and getting the client frontend to run fine.
Would anyone be able to correct me on where the issue in this config is and explain it?
This is a docker file for the frontend(client in your case). You can make a dockerfile under your client folder and build the image with docker build -t image-name:tag-name .
# Pull the latest node image from dockerhub
FROM node:latest
# Create app directory
WORKDIR /usr/src/app
# Copy package.json and package-lock.json to the workdir
COPY package*.json ./
# Install the dependencies
RUN npm install
# Bundle app source
COPY . .
# Run the app in docker
CMD ["npm", "start"]

docker bind mount not working in react app

I am using docker toolbox on windows home and having trouble figuring out how to get bind mount working in my frontend app. I want changes to be reflected upon changing content in the src directory.
App structure:
Dockerfile:
FROM node
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
EXPOSE 3000
CMD [ "npm", "start" ]
Docker commands:
(within the frontend dir) docker build -t frontend .
docker run -p 3000:3000 -d -it --rm --name frontend-app -v ${cwd}:/app/src frontend
Any help is highly appreciated.
EDIT
cwd -> E:\docker\multi\frontend
cwd/src is also not working. However, i find that with /e/docker/multi/frontend/src the changes are reflected upon re running the same image
i have ran into same issue it feels like we should use nodemon to look for file changes and restart the app.
because with docker reference and tutorials project does the thing.

Issue dockerizing a React + Node + nginx app

I'm trying to build an image for my React app. It's a pretty simply create-react-app setup. I'm aware that there are many questions regarding this topic, but the distinction here is that I am trying to deploy to Heroku and, because of Heroku not supporting EXPOSE, the setup is a little different.
I've managed to get my frontend up and running, but I'm having issues with my Express portion. Here is my Dockerfile.
FROM node:14.1-alpine AS builder
WORKDIR /opt/web
COPY package.json ./
RUN npm install
ENV PATH="./node_modules/.bin:$PATH"
COPY . ./
RUN npm run build
FROM nginx:1.17-alpine
RUN apk --no-cache add curl
RUN curl -L https://github.com/a8m/envsubst/releases/download/v1.1.0/envsubst-`uname -s`-`uname -m` -o envsubst && \
chmod +x envsubst && \
mv envsubst /usr/local/bin
COPY ./nginx/nginx.conf /etc/nginx/nginx.template
CMD ["/bin/sh", "-c", "envsubst < /etc/nginx/nginx.template > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'"]
COPY --from=builder /opt/web/build /usr/share/nginx/html
It's pretty straightforward, but I'm not sure how to serve my server.js file up as an API.
I've tried many online tutorials to get nginx up and running with React and Express, but it either doesn't work with my current setup (locally) or it fails building on Heroku.
I've created a reproducible repo here. Not sure where to go from here.

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.

React doesnt work with Path and Prefix in Traefik

I have a React App, that I build with the following Dockerfile
# base image
FROM node:latest as builder
# set working directory
RUN mkdir /usr/src/app
WORKDIR /usr/src/app
# add `/usr/src/app/node_modules/.bin` to $PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH
# install and cache app dependencies
COPY app/package.json /usr/src/app/package.json
RUN npm install
RUN npm install react-scripts#1.1.1 -g
COPY ./app/usr/src/app
# start app
CMD ["npm", "start"]
# production environment
FROM nginx:alpine
RUN rm -rf /etc/nginx/conf.d
COPY conf /etc/nginx
COPY --from=builder /usr/src/app/build /etc/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
Then I run this with the following Docker Compose
build: .
labels:
- "traefik.frontend.rule=Host:www.example.com;PathPrefix:/path"
- "traefik.protocol=http"
- "traefik.frontend.entryPoints=https"
- "traefik.port=80"
- "traefik.enable=true"
restart: always
When calling example.com/path I get a lot of 404 Errors, as the React App is not looking for path, but in the root of example.com.
The App is woking when run without PathPrefix and calling example.com directly.
Your app doesn't know that traefik is adding a prefix.
You need to specify homepage property in package.json file to modify every relative URLs that will be used in your app. After building your app using npm run-script build it should be fine.
{
"homepage": "/path"
}
react documentation
I have arrived to a solution to your problem. Let me explain:
The "default" path in production environments for our project
is normally /sforms
I wanted to serve the built package -without rebuild- from any path
in production environments, so "homepage": "." was mandatory.
Example: /sforms_1.0, /sforms_legacy... etc.
So I have reconfigured the script "start" in package.json in the following way:
"start": "cross-env PUBLIC_URL=/sforms react-scripts start"
In this way I'm able to start my dev environment under /sforms,
avoiding the "magic" of traefik, but keeping the "homepage": ".".
So in Traefik I only have to redirect all the calls starting
with the prefix /sforms to my development server, and all the cases
are covered.
Let me paste here my Traefik configuration for that component. Maybe it could be useful:
http:
routers:
debugging-oe-sl-form:
service: debugging-oe-sl-form-proxy
rule: "PathPrefix(`/sforms`)"
entryPoints:
- web
services:
debugging-oe-sl-form-proxy:
loadBalancer:
servers:
- url: "http://host.docker.internal:3000"

Resources