ECE366 - Lesson 9
Hosting on the Cloud, Testing
Instructor: Professor Hong
## Your First Azure Container
## Installing CLI
- [https://learn.microsoft.com/en-us/cli/azure/install-azure-cli](https://learn.microsoft.com/en-us/cli/azure/install-azure-cli)
- Azure Login:
- WSL: ```az login --use-device-code```
- Mac: ```az login```
## Your First Container
- [https://learn.microsoft.com/en-us/azure/container-instances/container-instances-quickstart](https://learn.microsoft.com/en-us/azure/container-instances/container-instances-quickstart)
```
az group create --name myResourceGroup --location eastus
az container create --resource-group myResourceGroup --name mycontainer --image mcr.microsoft.com/azuredocs/aci-helloworld --dns-name-label aci-demo324 --ports 80 --os-type Linux --cpu 1 --memory 1.5
az container show --resource-group myResourceGroup --name mycontainer --query "{FQDN:ipAddress.fqdn,ProvisioningState:provisioningState}" --out table
```
- Run the site provided
- You will have to update your dns label name
## Creating and Deploying a Container Image
## Creating and Deploying a Container Image
[https://learn.microsoft.com/en-us/azure/container-instances/container-instances-tutorial-prepare-app](https://learn.microsoft.com/en-us/azure/container-instances/container-instances-tutorial-prepare-app)
```
az acr login --name acr324 --expose-token
az container create --resource-group myResourceGroup --name aci-tutorial-app --image acr324.azurecr.io/aci-tutorial-app:v1 --cpu 1 --memory 1 --registry-login-server acr324.azurecr.io --registry-username 00000000-0000-0000-0000-000000000000 --ip-address Public --dns-name-label mydns324 --ports 80 --os-type Linux
```
## Create a New React App
```
npx create-react-app myapp
cd myapp
npm install
npm start
```
## Dockerfile
```
FROM node:16.13.1-alpine as build
RUN npm install -g serve # A simple webserver
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 80
CMD ["serve", "-s", "build", "-l", "80"]
```
## Docker-compose.yaml
```
version: '3'
services:
ui:
build: .
image: samplereactacr.azurecr.io/ui
container_name: samplereact
ports:
- "80:80"
```
```
docker compose build
docker compose up
```
Note: We're using port 80
## Create Azure Parts
- Create an Azure Resource Group
- Create an Azure Container Registry
- Create an Azure Container Instance docker context
```
az login --use-device-code
az acr login --name samplereactacr
```
## Push to Azure and Run Container Instances
```
docker-compose push
```
## Deploying with a deploy-aci.yaml file
```
apiVersion: 2019-12-01
location: eastus
name: myContainerGroup5
properties:
containers:
- name: ui
properties:
image: acr324.azurecr.io/prepreact:latest
resources:
requests:
cpu: 1
memoryInGb: 1.5
ports:
- port: 80
- port: 8080
osType: Linux
ipAddress:
type: Public
dnsNameLabel: myappdnslabel3233 # Add your desired DNS name label here
ports:
- protocol: tcp
port: 80
- protocol: tcp
port: 8080
imageRegistryCredentials:
- server: acr324.azurecr.io
username: 00000000-0000-0000-0000-000000000000
password: yourpassword
tags: {exampleTag: tutorial}
type: Microsoft.ContainerInstance/containerGroups
```
```
az container create --resource-group myResourceGroup --file deploy-aci-react.yaml
```
## Deploying a Multi-Container Group
[https://learn.microsoft.com/en-us/azure/container-instances/container-instances-multi-container-yaml](https://learn.microsoft.com/en-us/azure/container-instances/container-instances-multi-container-yaml)
```
apiVersion: 2019-12-01
location: eastus
name: myContainerGroup3
properties:
containers:
- name: aci-tutorial-app
properties:
image: acr324.azurecr.io/aci-tutorial-app:v1
resources:
requests:
cpu: 1
memoryInGb: 1.5
ports:
- port: 80
- port: 8080
osType: Linux
ipAddress:
type: Public
dnsNameLabel: myappdnslabel323 # Add your desired DNS name label here
ports:
- protocol: tcp
port: 80
- protocol: tcp
port: 8080
imageRegistryCredentials:
- server: acr324.azurecr.io
username: 00000000-0000-0000-0000-000000000000
password: yourtoken
tags: {exampleTag: tutorial}
type: Microsoft.ContainerInstance/containerGroups
```
## Deploying a Multi-Container Group
```
apiVersion: 2019-12-01
location: eastus
name: myContainerGroup4
properties:
containers:
- name: aci-tutorial-app
properties:
image: acr324.azurecr.io/aci-tutorial-app:v1
resources:
requests:
cpu: 1
memoryInGb: 1.5
ports:
- port: 80
- port: 8080
- name: ui
properties:
image: acr324.azurecr.io/ui:latest
resources:
requests:
cpu: 1
memoryInGb: 1.5
osType: Linux
ipAddress:
type: Public
dnsNameLabel: myappdnslabel3232 # Add your desired DNS name label here
ports:
- protocol: tcp
port: 80
- protocol: tcp
port: 8080
imageRegistryCredentials:
- server: acr324.azurecr.io
username: 00000000-0000-0000-0000-000000000000
password: yourpassword
tags: {exampleTag: tutorial}
type: Microsoft.ContainerInstance/containerGroups
```
## Database
```
docker compose build
docker tag postgres:latest acr324.azurecr.io/postgres:latest
docker push acr324.azurecr.io/postgres:latest
```
```
apiVersion: 2019-12-01
location: eastus
name: postgresContainerGroup
properties:
containers:
- name: db
properties:
image: acr324.azurecr.io/postgres:latest
environmentVariables:
- name: POSTGRES_USER
value: postgres
- name: POSTGRES_PASSWORD
value: password
resources:
requests:
cpu: 1
memoryInGb: 1.5
ports:
- port: 5432
osType: Linux
ipAddress:
type: Public
dnsNameLabel: postgresdnslabel # Add your desired DNS name label here
ports:
- protocol: tcp
port: 5432
imageRegistryCredentials:
- server: acr324.azurecr.io
username: 00000000-0000-0000-0000-000000000000
password: yourpassword
tags: {exampleTag: tutorial}
type: Microsoft.ContainerInstance/containerGroups
```
```
az container create --resource-group myResourceGroup --file deploy-aci.yaml
```
## Check db with dbeaver
- Check dbeaver
- host: postgresdnslabel.eastus.azurecontainer.io
- port: 5432
- database: rps
- username/password: postgres/password
## UI Docker File Update
```
# Use the official Node.js 20 image as the base image
FROM node:20
# Install serve globally, a simple web server for serving static files
RUN npm install -g serve
# Set the working directory inside the container
WORKDIR /usr/src/app
# Copy package.json and package-lock.json to the working directory
COPY package*.json ./
# Install the project dependencies
RUN npm install
# Copy the rest of the application code to the working directory
COPY . .
# Build the React application
RUN npm run build
# Expose port 80 to the outside world
EXPOSE 80
# Start the application using serve, serving the build directory on port 80
CMD ["serve", "-s", "build", "-l", "80"]
```
## Adding the spring boot layer and react UI
docker-compose.yaml
```
services:
db:
image: acr324.azurecr.io/postgres:latest
build: db
environment:
- POSTGRES_DB=postgres
- POSTGRES_PASSWORD=password
ports:
- 5432:5432
restart: always
app:
image: acr324.azurecr.io/springboot-app:latest
build: server/rpsjdbc
environment:
- POSTGRES_DB=postgres
- POSTGRES_PASSWORD=password
depends_on:
- db
ports:
- 8080:8080
ui:
image: acr324.azurecr.io/rpsui:latest
build: rpsui
depends_on:
- app
ports:
- 80:80
```
## Building and Pushing
```
docker compose build
docker compose push
```
## Updating the deploy-aci.yaml
```
apiVersion: 2019-12-01
location: eastus
name: fullStackContainerGroup
properties:
containers:
- name: db
properties:
image: acr324.azurecr.io/postgres:latest
environmentVariables:
- name: POSTGRES_USER
value: postgres
- name: POSTGRES_PASSWORD
value: password
- name: POSTGRES_DB
value: postgres
resources:
requests:
cpu: 1
memoryInGb: 1.5
ports:
- port: 5432
- name: springboot-app
properties:
image: acr324.azurecr.io/springboot-app:latest
environmentVariables:
- name: POSTGRES_DB
value: postgres
- name: POSTGRES_PASSWORD
value: password
resources:
requests:
cpu: 1
memoryInGb: 1.5
ports:
- port: 8080
- name: ui
properties:
image: acr324.azurecr.io/rpsui:latest
resources:
requests:
cpu: 1
memoryInGb: 1.5
ports:
- port: 80
osType: Linux
ipAddress:
type: Public
dnsNameLabel: fullStackDns # Add your desired DNS name label here
ports:
- protocol: tcp
port: 5432
- protocol: tcp
port: 8080
- protocol: tcp
port: 80
imageRegistryCredentials:
- server: acr324.azurecr.io
username: 00000000-0000-0000-0000-000000000000
password: yourpassword
tags: {exampleTag: tutorial}
type: Microsoft.ContainerInstance/containerGroups
```
- Update IP address of server
## Deploy to Azure
```
az container create --resource-group myResourceGroup --file deploy-aci.yaml
```