{"id":87615,"date":"2024-12-10T13:20:44","date_gmt":"2024-12-10T09:50:44","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/a-step-by-step-guide-to-cicd-pipeline-for-angular-app-with-azure-container-apps-3b79\/"},"modified":"2024-12-10T13:20:44","modified_gmt":"2024-12-10T09:50:44","slug":"a-step-by-step-guide-to-cicd-pipeline-for-angular-app-with-azure-container-apps-3b79","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/a-step-by-step-guide-to-cicd-pipeline-for-angular-app-with-azure-container-apps-3b79\/","title":{"rendered":"\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u06af\u0627\u0645 \u0628\u0647 \u06af\u0627\u0645 \u062e\u0637 \u0644\u0648\u0644\u0647 CI\/CD \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 Angular \u0628\u0627 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 Azure"},"content":{"rendered":"

Summarize this content to 400 words in Persian Lang <\/p>\n

\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n

\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627<\/p>\n

\u0645\u0631\u062d\u0644\u0647 1: Dockerfile<\/p>\n

\u0645\u0631\u062d\u0644\u0647 2: \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u062e\u0637\u0648\u0637 \u0644\u0648\u0644\u0647 Azure<\/p>\n

\u0645\u0631\u062d\u0644\u0647 3: \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0627\u0636\u0627\u0641\u06cc Azure CLI<\/p>\n

\u0628\u0647\u062a\u0631\u06cc\u0646 \u0634\u06cc\u0648\u0647 \u0647\u0627<\/p>\n

\u0639\u06cc\u0628 \u06cc\u0627\u0628\u06cc<\/p>\n

\u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<\/p>\n

\u0645\u0646\u0627\u0628\u0639<\/p>\n

Dockerizing \u0633\u0627\u06cc\u0631 \u067e\u0634\u062a\u0647 \u0647\u0627\u06cc \u0641\u0646\u0627\u0648\u0631\u06cc<\/p>\n

\u067e\u06cc\u0634 \u0646\u06cc\u0627\u0632\u0647\u0627<\/p>\n

\u062d\u0633\u0627\u0628 Azure DevOps
\n\u0627\u0634\u062a\u0631\u0627\u06a9 \u0644\u0627\u062c\u0648\u0631\u062f\u06cc
\n\u067e\u0631\u0648\u0698\u0647 \u0632\u0627\u0648\u06cc\u0647 \u0627\u06cc
\nAzure CLI \u0646\u0635\u0628 \u0634\u062f\u0647 \u0627\u0633\u062a
\n\u062f\u0627\u06a9\u0631 \u0646\u0635\u0628 \u0634\u062f\u0647 \u0627\u0633\u062a
\n\u0631\u062c\u06cc\u0633\u062a\u0631\u06cc \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 \u0644\u0627\u062c\u0648\u0631\u062f
\n\u0645\u062d\u06cc\u0637 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 Azure<\/p>\n

\u0645\u0631\u062d\u0644\u0647 1: Dockerfile<\/p>\n

# Stage 1: Build Angular application
\nFROM node:16-alpine AS build
\nWORKDIR \/usr\/src\/app
\nCOPY package.json package-lock.json .\/
\nRUN npm install
\nCOPY . .
\nRUN npm run build –configuration=production<\/p>\n

# Stage 2: Serve with Nginx
\nFROM nginx:alpine
\nCOPY –from=build \/usr\/src\/app\/dist\/your-angular-app \/usr\/share\/nginx\/html
\nCOPY nginx.conf \/etc\/nginx\/conf.d\/default.conf
\nEXPOSE 80
\nCMD [“nginx”, “-g”, “daemon off;”]\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0645\u0631\u062d\u0644\u0647 2: \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u062e\u0637\u0648\u0637 \u0644\u0648\u0644\u0647 Azure<\/p>\n

trigger:
\n – main<\/p>\n

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

# Azure Container Apps details
\n containerAppName: ‘your-container-app-name’
\n resourceGroup: ‘your-resource-group’<\/p>\n

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

– script: |
\n npm ci
\n npm run lint
\n npm run test — –watch=false –browsers=ChromeHeadless
\n displayName: ‘npm install, lint, and test’<\/p>\n

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

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

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

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

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

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0645\u0631\u062d\u0644\u0647 3: \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u0627\u0636\u0627\u0641\u06cc Azure CLI<\/p>\n

\u0642\u0628\u0644 \u0627\u0632 \u0627\u062c\u0631\u0627\u06cc \u062e\u0637 \u0644\u0648\u0644\u0647\u060c \u0628\u0631\u0646\u0627\u0645\u0647\u200c\u0647\u0627\u06cc \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 Azure \u062e\u0648\u062f \u0631\u0627 \u0631\u0627\u0647\u200c\u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\n

# Create Container Registry
\naz acr create –resource-group your-resource-group \\
\n –name yourcontainerregistry \\
\n –sku Basic<\/p>\n

# Create Container Apps Environment
\naz containerapp env create \\
\n –name your-container-app-environment \\
\n –resource-group your-resource-group \\
\n –location eastus<\/p>\n

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

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0628\u0647\u062a\u0631\u06cc\u0646 \u0634\u06cc\u0648\u0647 \u0647\u0627<\/p>\n

\u0627\u0632 Azure Key Vault \u0628\u0631\u0627\u06cc \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u062d\u0633\u0627\u0633 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f
\n\u0627\u062c\u0631\u0627\u06cc \u0622\u0632\u0645\u0627\u06cc\u0634 \u062c\u0627\u0645\u0639 \u0642\u0628\u0644 \u0627\u0632 \u0627\u0633\u062a\u0642\u0631\u0627\u0631
\n\u0627\u0632 \u0647\u0648\u06cc\u062a \u0647\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0634\u062f\u0647 \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u0631\u0633\u06cc \u0627\u06cc\u0645\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f
\nRBAC \u0645\u0646\u0627\u0633\u0628 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f
\n\u0628\u0631\u0631\u0633\u06cc\u200c\u0647\u0627\u06cc \u0633\u0644\u0627\u0645\u062a \u0631\u0627 \u062f\u0631 Container Apps \u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u06a9\u0646\u06cc\u062f
\n\u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0642\u0631\u0627\u0631\u0647\u0627\u06cc \u0628\u062f\u0648\u0646 \u062a\u0648\u0642\u0641 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f<\/p>\n

\u0639\u06cc\u0628 \u06cc\u0627\u0628\u06cc<\/p>\n

\u0628\u0631\u0631\u0633\u06cc \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0634\u0628\u06a9\u0647
\n\u0644\u0627\u06af \u0647\u0627\u06cc \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 \u0631\u0627 \u062f\u0631 \u067e\u0631\u062a\u0627\u0644 Azure \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f
\n\u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0646\u0642\u0634 \u0647\u0627\u06cc IAM \u0645\u0646\u0627\u0633\u0628 \u0627\u062e\u062a\u0635\u0627\u0635 \u062f\u0627\u062f\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a
\n\u0645\u062c\u0648\u0632\u0647\u0627\u06cc ACR \u0631\u0627 \u062a\u0623\u06cc\u06cc\u062f \u06a9\u0646\u06cc\u062f
\n\u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0634\u0628\u06a9\u0647 Container Apps \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f<\/p>\n

\u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<\/p>\n

\u0627\u06cc\u0646 \u062e\u0637 \u0644\u0648\u0644\u0647 \u06cc\u06a9 \u06af\u0631\u062f\u0634 \u06a9\u0627\u0631 \u0642\u0648\u06cc CI\/CD \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u06cc\u06a9 \u0628\u0631\u0646\u0627\u0645\u0647 Angular \u062f\u0631 Azure Container Apps \u0628\u0627 \u0645\u0631\u062d\u0644\u0647 \u062a\u0623\u06cc\u06cc\u062f \u062f\u0633\u062a\u06cc \u0641\u0631\u0627\u0647\u0645 \u0645\u06cc\u200c\u06a9\u0646\u062f.<\/p>\n

\u0645\u0646\u0627\u0628\u0639<\/p>\n

\u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646 \u0628\u0647 \u0637\u0648\u0631 \u062e\u0644\u0627\u0635\u0647\u060c \u062e\u0637 \u0644\u0648\u0644\u0647 \u0634\u0627\u0645\u0644:<\/p>\n

\u0645\u0631\u062d\u0644\u0647 \u0633\u0627\u062e\u062a \u0648 \u062a\u0633\u062a
\n\u0645\u0631\u062d\u0644\u0647 \u062a\u0627\u06cc\u06cc\u062f \u062f\u0633\u062a\u06cc
\n\u0627\u0633\u062a\u0642\u0631\u0627\u0631 \u062f\u0631 \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 Azure
\n\u0627\u062f\u063a\u0627\u0645 \u0631\u062c\u06cc\u0633\u062a\u0631\u06cc \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 Azure<\/p>\n

Dockerizing \u0633\u0627\u06cc\u0631 \u067e\u0634\u062a\u0647 \u0647\u0627\u06cc \u0641\u0646\u0627\u0648\u0631\u06cc<\/p>\n

\u0631\u0648\u06cc\u06a9\u0631\u062f Dockerfile \u0646\u0634\u0627\u0646\u200c\u062f\u0627\u062f\u0647\u200c\u0634\u062f\u0647 \u0628\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647 Angular \u0631\u0627 \u0645\u06cc\u200c\u062a\u0648\u0627\u0646 \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0628\u0627 \u062f\u06cc\u06af\u0631 \u067e\u0634\u062a\u0647\u200c\u0647\u0627\u06cc \u0641\u0646\u0627\u0648\u0631\u06cc \u0645\u062d\u0628\u0648\u0628 \u0646\u06cc\u0632 \u062a\u0637\u0628\u06cc\u0642 \u062f\u0627\u062f<\/p>\n

\n
\n
\n

\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n