- Azure Account
- Git
- Node
- VS Code
- Yarn
- Generate React app
npx create-react-app my-react-app
- If npx is unavailable then
npm install -g create-react-app
thencreate-react-app my-react-app
- If npx is unavailable then
- Open
./my-react-app
in VS Code - Add script for testing in CI
"test:ci": "CI=true yarn test",
- This turns off file "watching"
- 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;"]
git init
(use VS Code)git commit -m "initial commit"
(use VS Code)
- Go to https://portal.azure.com/
- Create a resource > Containers > Web App for Containers
- Configure container > Quick Start
- This will be changed later by DevOps
- Go to https://portal.azure.com/
- Create a resource > Containers > Container Registry
- Enable "Admin user"
- This allows the Web App to communicate with ACR
- Create an organization
- Create a project
- Detail
git remote add origin ${URL}
here
- Detail
- Create empty build
- Add task: Yarn Custom (install dependencies)
- Add task: npm test (run tests)
- 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)
- 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)
- 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)
- Save
git push
(use VS Code)