Deploy React JS Application on Production on azure portal service

Question

Currently we are deploying react js application using the following docker file content both on dev and prod environment.

FROM node:10

FROM alpine:latest

WORKDIR /usr/src/app

Install app dependencies

COPY package*.json ./
COPY yarn.lock ./
RUN yarn
RUN yarn install

If you are building your code for production

RUN npm ci --only=production

Bundle app source

COPY . .

EXPOSE 80
CMD [ "npm", "start" ]

If there are any error in production it shows the error page because we are not creating optimized production build for prod environment i.e. we should have yarn build and serve it on the production.

I am trying to use the following docker commands and try to build for the production

FROM node:10

FROM alpine:latest

WORKDIR /usr/src/app

Install app dependencies

COPY . ./
RUN yarn
RUN yarn build

If you are building your code for production

RUN npm ci --only=production

Bundle app source

COPY . .

EXPOSE 80
CMD [ "npx", "serve", "-s", "build" ]

we use the pipeline for web-app-dev. So when we run the pipeline it build the docker image and push the image. After which we run the container on that image and see if its ready to serve the request.

Then i hit the URL and try to login it . It shows me the following error:

It contains undefined in the url which shouldn't be there.

When i try to build locally using yarn build it works without any error.

Please assisst me how can i proceed further on it.

Thank you.

Answer 1

Instead of using a custom docker container, you can deploy your static React site onto the built-in PHP image.

I set up an example using GitHub Actions to build and deploy an Angular app to App Service Linux (repo here). In the repo, I’m deploying the Angular app onto the built-in PHP image. This correctly serves the Angular app as static content. We are working on a proper static site image on Linux. In the mean-time the workaround is to use the PHP image.

The webapps-deploy action is just using the zip-deploy API under the hood to place the built Angular files under /home/site/wwwroot/. So if you are using another CI/CD provider, you just need to build the files first, then deploy using zip-deploy. Azure DevOps has a task for this.

You may also want to consider hosting your static site onto Azure Storage.

... BTW you should use the blockquote to surround your Dockerfile snippets. Otherwise your comments show up as headers in the post.

Answer 2

Not sure if you have resolved the issue by other method. I guess the issue is not only about the docker file. It is also partly in your JS code. Perhaps you generate the url domain part by reading from process.env. Then if it cannot get anything, it will return "undefined" and the request library you used will generate this URL by combining this path with default host. The solution is that you can set the env in dockerfile directly.