ReactJS Production Build with Docker and Nginx
Reactjs Docker Production Build With Docker and Nginx
Hi, let me the start with the issue. YOU CANNOT ACCESS TO THE process.env when you have build.. and that's ok. dont cry about it.
Let's see what we can do.
First approach is to create an .env file in the project root and set/use you variables like this
REACT_APP_DEV_API_BASE_URL=https://dev.google.com
REACT_APP_PRODUCTION_API_BASE_URL=/api/
Second approach would be exporting your environment variables to the Docker on build like this
In your Dockerfile
ENV REACT_APP_PRODUCTION_API_BASE_URL $REACT_APP_DEV_API_BASE_URL
and build with this command
docker build -t awesome_image --build-arg REACT_APP_PRODUCTION_API_BASE_URL=my-url
I have a third approach it's ugly as ... you know I would not like to mention about it.
These are the tips so let's get to the Docker setup ( and you see i choose use .env )
FROM node:13.12.0-alpine as build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . ./
RUN npm run build
# production env
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
ENTRYPOINT ["nginx", "-g", "daemon off;"]