راهنمای گام به گام خط لوله CI/CD برای برنامه Angular با برنامه های کانتینر Azure

Summarize this content to 400 words in Persian Lang

فهرست مطالب

پیش نیازها

مرحله 1: Dockerfile

مرحله 2: پیکربندی خطوط لوله Azure

مرحله 3: پیکربندی اضافی Azure CLI

بهترین شیوه ها

عیب یابی

نتیجه گیری

منابع

Dockerizing سایر پشته های فناوری

پیش نیازها

حساب Azure DevOps
اشتراک لاجوردی
پروژه زاویه ای
Azure CLI نصب شده است
داکر نصب شده است
رجیستری کانتینر لاجورد
محیط برنامه های کانتینر Azure

مرحله 1: Dockerfile

# Stage 1: Build Angular application
FROM node:16-alpine AS build
WORKDIR /usr/src/app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build –configuration=production

# Stage 2: Serve with Nginx
FROM nginx:alpine
COPY –from=build /usr/src/app/dist/your-angular-app /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD [“nginx”, “-g”, “daemon off;”]

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 2: پیکربندی خطوط لوله Azure

trigger:
– main

variables:
# Azure Container Registry details
acrName: ‘yourcontainerregistry’
imageRepository: ‘angular-app’
dockerfilePath: ‘Dockerfile’
tag: ‘$(Build.BuildId)’

# Azure Container Apps details
containerAppName: ‘your-container-app-name’
resourceGroup: ‘your-resource-group’

stages:
– stage: Build
displayName: Build and Test
jobs:
– job: BuildAndTest
pool:
vmImage: ‘ubuntu-latest’
steps:
– task: NodeTool@0
inputs:
versionSpec: ’16.x’
displayName: ‘Install Node.js’

– script: |
npm ci
npm run lint
npm run test — –watch=false –browsers=ChromeHeadless
displayName: ‘npm install, lint, and test’

– task: Docker@2
displayName: ‘Build Docker Image’
inputs:
command: build
repository: $(imageRepository)
dockerfile: $(dockerfilePath)
tags:
– $(tag)
– latest

– task: Docker@2
displayName: ‘Push to Azure Container Registry’
inputs:
command: push
repository: $(imageRepository)
containerRegistry: $(acrServiceConnection)
tags:
– $(tag)
– latest

– stage: Approval
displayName: Deployment Approval
jobs:
– job: ApprovalJob
pool: server
steps:
– task: ManualValidation@0
inputs:
instructions: ‘Please review and approve the deployment’
onTimeout: ‘reject’
timeoutInMinutes: 120

– stage: Deploy
displayName: Deploy to Azure Container Apps
dependsOn:
– Build
– Approval
condition: succeeded()
jobs:
– deployment: DeployToContainerApp
pool:
vmImage: ‘ubuntu-latest’
environment: ‘production’
strategy:
runOnce:
deploy:
steps:
– task: AzureCLI@2
displayName: ‘Deploy to Azure Container Apps’
inputs:
azureSubscription: ‘Your-Azure-Subscription’
scriptType: ‘bash’
scriptLocation: ‘inlineScript’
inlineScript: |
# Login to Azure Container Registry
az acr login –name $(acrName)

# Update Container App with new image
az containerapp update \
–name $(containerAppName) \
–resource-group $(resourceGroup) \
–image $(acrName).azurecr.io/$(imageRepository):$(tag)

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرحله 3: پیکربندی اضافی Azure CLI

قبل از اجرای خط لوله، برنامه‌های کانتینر Azure خود را راه‌اندازی کنید:

# Create Container Registry
az acr create –resource-group your-resource-group \
–name yourcontainerregistry \
–sku Basic

# Create Container Apps Environment
az containerapp env create \
–name your-container-app-environment \
–resource-group your-resource-group \
–location eastus

# Create Container App
az containerapp create \
–name your-container-app-name \
–resource-group your-resource-group \
–environment your-container-app-environment \
–image yourcontainerregistry.azurecr.io/angular-app:latest \
–target-port 80 \
–ingress external

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

بهترین شیوه ها

از Azure Key Vault برای تنظیمات حساس استفاده کنید
اجرای آزمایش جامع قبل از استقرار
از هویت های مدیریت شده برای دسترسی ایمن استفاده کنید
RBAC مناسب را برای استقرار تنظیم کنید
بررسی‌های سلامت را در Container Apps پیکربندی کنید
برای استقرارهای بدون توقف استفاده کنید

عیب یابی

بررسی تنظیمات شبکه
لاگ های کانتینر را در پرتال Azure بررسی کنید
اطمینان حاصل کنید که نقش های IAM مناسب اختصاص داده شده است
مجوزهای ACR را تأیید کنید
تنظیمات شبکه Container Apps را بررسی کنید

نتیجه گیری

این خط لوله یک گردش کار قوی CI/CD برای استقرار یک برنامه Angular در Azure Container Apps با مرحله تأیید دستی فراهم می‌کند.

منابع

بنابراین به طور خلاصه، خط لوله شامل:

مرحله ساخت و تست
مرحله تایید دستی
استقرار در برنامه های کانتینر Azure
ادغام رجیستری کانتینر Azure

Dockerizing سایر پشته های فناوری

رویکرد Dockerfile نشان‌داده‌شده برای برنامه Angular را می‌توان به راحتی با دیگر پشته‌های فناوری محبوب نیز تطبیق داد

# Stage 1: Build Angular application
FROM node:16-alpine AS build
WORKDIR /usr/src/app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build --configuration=production

# Stage 2: Serve with Nginx
FROM nginx:alpine
COPY --from=build /usr/src/app/dist/your-angular-app /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

trigger:
  - main

variables:
  # Azure Container Registry details
  acrName: 'yourcontainerregistry'
  imageRepository: 'angular-app'
  dockerfilePath: 'Dockerfile'
  tag: '$(Build.BuildId)'

  # Azure Container Apps details
  containerAppName: 'your-container-app-name'
  resourceGroup: 'your-resource-group'

stages:
- stage: Build
  displayName: Build and Test
  jobs:
  - job: BuildAndTest
    pool:
      vmImage: 'ubuntu-latest'
    steps:
    - task: NodeTool@0
      inputs:
        versionSpec: '16.x'
      displayName: 'Install Node.js'

    - script: |
        npm ci
        npm run lint
        npm run test -- --watch=false --browsers=ChromeHeadless
      displayName: 'npm install, lint, and test'

    - task: Docker@2
      displayName: 'Build Docker Image'
      inputs:
        command: build
        repository: $(imageRepository)
        dockerfile: $(dockerfilePath)
        tags: 
          - $(tag)
          - latest

    - task: Docker@2
      displayName: 'Push to Azure Container Registry'
      inputs:
        command: push
        repository: $(imageRepository)
        containerRegistry: $(acrServiceConnection)
        tags: 
          - $(tag)
          - latest

- stage: Approval
  displayName: Deployment Approval
  jobs:
  - job: ApprovalJob
    pool: server
    steps:
    - task: ManualValidation@0
      inputs:
        instructions: 'Please review and approve the deployment'
        onTimeout: 'reject'
        timeoutInMinutes: 120

- stage: Deploy
  displayName: Deploy to Azure Container Apps
  dependsOn: 
    - Build
    - Approval
  condition: succeeded()
  jobs:
  - deployment: DeployToContainerApp
    pool: 
      vmImage: 'ubuntu-latest'
    environment: 'production'
    strategy:
      runOnce:
        deploy:
          steps:
          - task: AzureCLI@2
            displayName: 'Deploy to Azure Container Apps'
            inputs:
              azureSubscription: 'Your-Azure-Subscription'
              scriptType: 'bash'
              scriptLocation: 'inlineScript'
              inlineScript: |
                # Login to Azure Container Registry
                az acr login --name $(acrName)

                # Update Container App with new image
                az containerapp update \
                  --name $(containerAppName) \
                  --resource-group $(resourceGroup) \
                  --image $(acrName).azurecr.io/$(imageRepository):$(tag)

# Create Container Registry
az acr create --resource-group your-resource-group \
              --name yourcontainerregistry \
              --sku Basic

# Create Container Apps Environment
az containerapp env create \
  --name your-container-app-environment \
  --resource-group your-resource-group \
  --location eastus

# Create Container App
az containerapp create \
  --name your-container-app-name \
  --resource-group your-resource-group \
  --environment your-container-app-environment \
  --image yourcontainerregistry.azurecr.io/angular-app:latest \
  --target-port 80 \
  --ingress external