question

MilindGawande-5961 avatar image
1 Vote"
MilindGawande-5961 asked ·

Deploy React JS Application on Production on azure portal service

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:

7002-app-dev-error.png


6972-app-dev-error.png




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.

azure-webapps
app-dev-error.png (39.3 KiB)
app-dev-error.png (39.3 KiB)
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

JasonFreeberg-3971 avatar image
0 Votes"
JasonFreeberg-3971 answered ·

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.


· Share
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.