-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
290 lines (270 loc) · 8.81 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Azure DevOps CI/CD Pipeline: Technical Implementation</title>
<style>
body, html {
height: 100%;
margin: 0;
font-family: 'Consolas', monospace;
background-color: #1e1e1e;
color: #d4d4d4;
}
.slide {
height: 100%;
padding: 40px;
box-sizing: border-box;
display: none;
}
.slide.active {
display: block;
}
h1 {
color: #569cd6;
margin-bottom: 30px;
}
ul {
list-style-type: none;
padding-left: 0;
}
li {
margin-bottom: 15px;
line-height: 1.5;
}
.code-block {
background-color: #2d2d2d;
border: 1px solid #3e3e3e;
border-radius: 5px;
padding: 15px;
margin-top: 15px;
font-family: 'Consolas', monospace;
white-space: pre-wrap;
}
.tech-stack {
display: flex;
justify-content: space-around;
margin-top: 30px;
}
.tech-item {
text-align: center;
font-weight: bold;
color: #4ec9b0;
}
</style>
</head>
<body>
<div id="slideContainer">
<div class="slide active">
<h1>Azure DevOps CI/CD Pipeline: Technical Implementation</h1>
<ul>
<li>Objective: Implement a robust, scalable CI/CD pipeline</li>
<li>Key Technologies:</li>
</ul>
<div class="tech-stack">
<div class="tech-item">Azure DevOps</div>
<div class="tech-item">Azure Pipelines</div>
<div class="tech-item">Jira API</div>
<div class="tech-item">Azure Web Apps</div>
<div class="tech-item">Docker</div>
</div>
</div>
<div class="slide">
<h1>Pipeline Architecture</h1>
<ul>
<li>1. Code Commit (Azure Repos)</li>
<li>2. CI Pipeline Trigger</li>
<li>3. Build, Lint, and Unit Test</li>
<li>4. Containerization & Push to Azure Container Registry</li>
<li>5. Blue-Green Deployment to Staging</li>
<li>6. Automated Jira Issue Creation</li>
<li>7. Integration Testing & Approval</li>
<li>8. Production Deployment (Blue-Green Swap)</li>
</ul>
</div>
<div class="slide">
<h1>Local Agent Implementation</h1>
<ul>
<li>Challenge: Azure for Students subscription parallelism limitations</li>
<li>Solution: Implement self-hosted agent</li>
<li>Implementation Steps:
<ol>
<li>Download and install agent on local machine</li>
<li>Configure agent pool in Azure DevOps</li>
<li>Set up authentication for the agent</li>
</ol>
</li>
</ul>
<div class="code-block">
# PowerShell script to configure and run the agent
.\config.cmd --unattended `
--url https://dev.azure.com/yourorg `
--auth pat `
--token yourpat `
--pool default `
--agent myagent `
--replace
.\run.cmd
</div>
</div>
<div class="slide">
<h1>Azure Pipelines Configuration</h1>
<ul>
<li>YAML-based pipeline definition</li>
<li>Multi-stage pipeline for CI/CD</li>
</ul>
<div class="code-block">
# Azure Pipelines YAML
trigger:
- main
stages:
- stage: Build
jobs:
- job: BuildJob
pool:
vmImage: 'ubuntu-latest'
steps:
- task: NodeTool@0
inputs:
versionSpec: '14.x'
- script: |
npm install
npm run build
npm test
displayName: 'npm install, build and test'
- stage: Deploy
jobs:
- deployment: DeployWeb
pool:
vmImage: 'ubuntu-latest'
environment: 'production'
strategy:
runOnce:
deploy:
steps:
- task: AzureWebApp@1
inputs:
azureSubscription: 'Resource Manager Connection'
appName: 'yourwebappname'
appType: 'webApp'
</div>
</div>
<div class="slide">
<h1>Blue-Green Deployment Implementation</h1>
<ul>
<li>Utilized Azure Web App deployment slots</li>
<li>Process:
<ol>
<li>Deploy to staging slot</li>
<li>Run tests against staging</li>
<li>Swap slots if tests pass</li>
</ol>
</li>
</ul>
<div class="code-block">
# Azure CLI commands for slot swapping
az webapp deployment slot swap \
--resource-group myResourceGroup \
--name myWebApp \
--slot staging \
--target-slot production
</div>
</div>
<div class="slide">
<h1>Jira Integration</h1>
<ul>
<li>Used Jira REST API for issue creation</li>
<li>Implemented in Azure Pipeline using a custom task</li>
</ul>
<div class="code-block">
# Python script for Jira issue creation
import requests
import json
url = "https://your-domain.atlassian.net/rest/api/2/issue"
auth = ("email@example.com", "api_token")
headers = {"Accept": "application/json", "Content-Type": "application/json"}
payload = json.dumps({
"fields": {
"project": {"key": "PROJECT_KEY"},
"summary": "New build ready for testing",
"description": "A new build has been deployed to staging.",
"issuetype": {"name": "Task"}
}
})
response = requests.post(url, data=payload, headers=headers, auth=auth)
print(json.dumps(json.loads(response.text), sort_keys=True, indent=4, separators=(",", ": ")))
</div>
</div>
<div class="slide">
<h1>Containerization</h1>
<ul>
<li>Used Docker for application containerization</li>
<li>Implemented multi-stage Dockerfile for optimized images</li>
</ul>
<div class="code-block">
# Multi-stage Dockerfile
FROM node:14 AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
FROM node:14-alpine
WORKDIR /app
COPY --from=builder /app/dist ./dist
COPY package*.json ./
RUN npm install --only=production
EXPOSE 3000
CMD ["npm", "start"]
</div>
</div>
<div class="slide">
<h1>Security Implementation</h1>
<ul>
<li>Azure Key Vault for secrets management</li>
<li>Implemented least-privilege access model</li>
<li>Container image scanning</li>
</ul>
<div class="code-block">
# Azure CLI command to create a Key Vault and add a secret
az keyvault create --name "myKeyvault" --resource-group "myResourceGroup" --location "eastus"
az keyvault secret set --vault-name "myKeyvault" --name "mySecret" --value "secretValue"
# Retrieving secret in pipeline
variables:
mySecret: $[azKeyVault(myKeyvault)mySecret]
</div>
</div>
<div class="slide">
<h1>Challenges and Solutions</h1>
<ul>
<li>Challenge: Complex service principal configuration
<br>Solution: Implemented a script to automate service principal creation and role assignment</li>
<li>Challenge: Inconsistent build environments
<br>Solution: Implemented Docker-based build agents for consistency</li>
<li>Challenge: Long-running tests slowing down the pipeline
<br>Solution: Implemented parallel test execution and test splitting strategies</li>
</ul>
</div>
</div>
<script>
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
function showSlide(n) {
slides[currentSlide].classList.remove('active');
currentSlide = (n + slides.length) % slides.length;
slides[currentSlide].classList.add('active');
}
function nextSlide() {
showSlide(currentSlide + 1);
}
function prevSlide() {
showSlide(currentSlide - 1);
}
document.addEventListener('keydown', function(e) {
if (e.key === "ArrowRight") nextSlide();
if (e.key === "ArrowLeft") prevSlide();
});
</script>
</body>
</html>