i have been trying to make a CI-CD pipline for a project i have 2 backends one is deployed on http://141.9*.*****:8800/
and the other one is depolyed on vps-a******.*******:8800
(some of the server links are hidden for security reasons)
anyway in .env
i have this
REACT_APP_SERVER_URL='http://vps-a******.*******:8800'
just this one line
and this is what i have in my dockefile
#you have to build the app manually first
# production environment
# pull official base image
FROM node:16-alpine AS node-build
# set working directory
WORKDIR /app
# add `/app/node_modules/.bin` to $PATH
# install app dependencies
COPY package.json ./
COPY package-lock.json ./
RUN npm i --force
#RUN npm install [email protected] -g --silent
# add app
COPY . ./
RUN npm run build --force
# production environment
FROM nginx:stable-alpine
COPY /build /usr/share/nginx/html
COPY nginx/nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 6100
CMD ["nginx", "-g", "daemon off;"]
it doenst matter what i make in .env like change it to localhost
or 141.****
it keeps always connecting to vps-a******.*******:8800
well if i build the app manually and run npm run build
in terminal then build the image it connects to whatever link i put in .env
i cant keep doing that(building the app locally before building the image) because im working on a ci-cd pipline i want it to be done via docker file so how can i take .env in considartion while building the app using docker file ?
2
Answers
So I guess you have a .env file which your backend requires it in the code.
Any way, you could use the ENV method.
This will write your variable to the container on it’s runtime.
Please, be aware that I normally don’t work with React, excuse me if I say something incorrect.
You mentioned
react-scripts
and the way your properties look like makes me think you are trying providing custom environment variables to your React application.If you created your application with the
create-react-app
generator, as described in the documentation, for this feature work properly you need to use an appropriate version ofreact-scripts
and to create a.env
file in your application root directory, and define in that file the appropriate variables. React will recognize all the environment variables starting with theREACT_APP_
prefix. Exactly as you did.These variables will be defined for on
process.env
. For example, in your use case, the environment variableREACT_APP_SERVER_URL
will be exposed in your JS asprocess.env.REACT_APP_SERVER_URL
.Be aware that
create-react-app
provides a simplification of the functionally exposed bydotenv
. Please, consider read this related SO question for a more general use case explanation.As indicated in the aforementioned documentation, is important to understand that generally:
i.e, it will replace the placeholders for your environments variables when compiling the application, when it generates your HTML, JS and CSS resources.
You are using a docker multistage build to first, create your application bundle, and then deploy it to
nginx
.I am assuming your are using a stardard
create-react-app
directory structure:Note I included the required
.env
file.Your
Dockerfile
looks fine to me, although I tried to provide a simplified version, something like this: