Project3.md

Project 3

Prerequisites

• Azure Account
• Git
• Node
• VS Code
• Yarn

Create React App

1. Generate React app npx create-react-app my-react-app
   • If npx is unavailable then npm install -g create-react-app then create-react-app my-react-app
2. Open ./my-react-app in VS Code
3. Add script for testing in CI "test:ci": "CI=true yarn test",
   • This turns off file "watching"
4. Add "Dockerfile"

   WORKDIR /usr/src/app
   COPY package.json yarn.lock ./
   RUN yarn
   COPY . ./
   RUN yarn build
   
   FROM nginx:mainline-alpine
   COPY --from=build-deps /usr/src/app/build /usr/share/nginx/html
   EXPOSE 80
   CMD ["nginx", "-g", "daemon off;"]
   

5. git init (use VS Code)
6. git commit -m "initial commit" (use VS Code)

Create Web App for Containers

1. Go to https://portal.azure.com/
2. Create a resource > Containers > Web App for Containers
3. Configure container > Quick Start
   • This will be changed later by DevOps

Create ACR

1. Go to https://portal.azure.com/
2. Create a resource > Containers > Container Registry
3. Enable "Admin user"
   • This allows the Web App to communicate with ACR

Create Build Pipeline

1. Create an organization
2. Create a project
   • Detail git remote add origin ${URL} here
3. Create empty build
4. Add task: Yarn Custom (install dependencies)
5. Add task: npm test (run tests)
6. Add task: Docker - Build an image
   • Container registry type: ACR
   • Azure subscription: foo
   • Azure container registry: bar
   • Command: build
   • Image Name: $(Build.Repository.Name):$(Build.BuildId)
7. Add task: Docker - Push an image
   • Container registry type: ACR
   • Azure subscription: foo
   • Azure container registry: bar
   • Command: push
   • Image Name: $(Build.Repository.Name):$(Build.BuildId)
8. Add task: Azure App Service Deploy
   • Azure subscription: foo
   • App type: Linux Web App
   • App Service name: baz
   • Image Source: Container Registry
   • Registry or Namespace: subdomain.azurecr.io
   • Image: $(Build.Repository.Name)
   • Tag: $(Build.BuildId)
9. Save
10. git push (use VS Code)