Description: In this topic I am going to explain, How to setup React Application to Docker Image and upload image to Azure ACR [Azure Container Registry] to deploy the Dockerized React APP to Azure App service
Prepare the React Application
First I am setting up the React Application using command line
# mkdir reactapp
# cd reactapp
# npx create-react-app react-app [react-app is the application folder name]
Above command will create the folder with react-app, after created enter into folder and start the deployment server
# npm start
Dockerizing the Reactapp
Create the Dockerfile in webroot folder as follow
FROM node:18 AS build WORKDIR /app COPY package.json package-lock.json ./ RUN npm install COPY . ./ RUN npm run build # Step 2: Serve the application using Nginx FROM nginx:alpine COPY --from=build /app/build /usr/share/nginx/html EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]
node_modules build .dockerignore Dockerfile .git .gitignore
After login into Azure now login into ACR using below command # az acr login --name reactapptechserverglobal
After filled all the details click on Review + Create. Once the process completed check the URL of the Web App you will get the out put of the react
Setup AzureDevops Project: Create the Project in Azure DevOps and setup pipeline
# Docker # Build and push an image to Azure Container Registry # https://docs.microsoft.com/azure/devops/pipelines/languages/docker trigger: - main resources: - repo: self variables: # Container registry service connection established during pipeline creation dockerRegistryServiceConnection: 'acf4f71d-f988-4c52-a365-24525e269fb0' imageRepository: 'harpalnodenew' containerRegistry: 'reactapptechserverglobal.azurecr.io' dockerfilePath: '$(Build.SourcesDirectory)/Dockerfile' tag: '$(Build.BuildId)' # Agent VM image name vmImageName: 'ubuntu-latest' stages: - stage: Build displayName: Build and push stage jobs: - job: Build displayName: Build pool: vmImage: $(vmImageName) steps: - task: Docker@2 displayName: Build and push an image to container registry inputs: command: buildAndPush repository: $(imageRepository) dockerfile: $(dockerfilePath) containerRegistry: $(dockerRegistryServiceConnection) tags: | $(tag)