Міністерство освіти і науки України

Національний технічний університет України

“Київський політехнічний інститут імені Ігоря Сікорського”
Факультет інформатики та обчислювальної техніки
Кафедра інформаційних систем та технологій

Лабораторна робота №4-5

Інфраструктура інформаційних технологій
«CI/CD. ХМАРНІ ОБЧИСЛЕННЯ»

Команда-бригада №5

Виконали: Перевірив:
студенти групи ІА-03
Деркач Оля Цимбал С. І.
Костянко Вадим
Якименко Володимир

Київ 2023
 Завдання
1. Обрати хмарну платформу і створити аккаунт на ній (наприклад, AWS, GCP).
2. Створити простий веб-застосунок html + css, створити для нього Dockerfile на базі
nginx (можна використати матеріали з минулої лабораторної роботи).
3. Створити VM instance та security group (застосунок має бути доступний на 80 порті,
HTTP), встановити на нього docker.
4. Створити репозиторій з кодом (Dockerfile, код вашого застосунка).
5. Запустити два контейнери – створений образ та watchtower.
6. Написати github actions pipeline, який збиратиме docker образ і пушитиме його в
docker hub при коміті в гілку main.
7. (Додатково) Додати лінтер в пайплайн.*

Хід роботи

1. Обираємо хмарну платформу

Так як студентам КПІ випала халява у вигляді плюшок від Microsoft, в тому числі і
Azure, то для лабки візьмемо саме його, тим більше акаунт вже існує
 2. Створити простий веб-застосунок html + css, створити для нього Dockerfile
на базі nginx

Результат:
3. Створити VM instance та security group (застосунок має бути доступний на
80 порті, HTTP), встановити на нього Docker
Результат: (публічна ip адреса для підключення по порту 80 à 51.136.38.19)

Security group:
Підключаємось до віртуальної машини через SSH
Встановлюємо докер
 4. Створити репозиторій з кодом
Репозиторій на GitHub

Репозиторій на Docker Hub:

docker build --push --platform linux/amd64 -t olehola/iit-lab4-5 .
 5. Запустити два контейнери – створений образ та watchtower

sudo docker run --rm -d \ sudo docker run --rm -d \

--name lab4-5 \ --name watchtower \
-p 80:80 \ -v /var/run/docker.sock:/var/run/docker.sock \
olehola/iit-lab4-5 containrrr/watchtower \
--interval 10
Результат: (в браузері підключаємось до віртуалки: 51.136.38.19:80)

6. Написати github actions pipeline, який збиратиме docker образ і пушитиме

його в docker hub при коміті в гілку main
 Script:

name: Build & Publish Docker image

on:
push:
branches: [ "main" ]

jobs:
push_to_registry:
name: Push Docker image to Docker Hub
runs-on: ubuntu-latest
steps:
- name: Check out the repo
uses: actions/checkout@v3

- name: Log in to Docker Hub

uses: docker/login-action@f4ef78c080cd8ba55a85445d5b36e214a81df20a
with:
username: ${{ secrets.DOCKER_USERNAME }}
password: ${{ secrets.DOCKER_PASSWORD }}

- name: Extract metadata (tags, labels) for Docker

id: meta
uses: docker/metadata-action@9ec57ed1fcdbf14dcef7dfbe97b2010124a938b7
with:
images: olehola/iit-lab4-5

- name: Build and push Docker image

uses: docker/build-push-action@3b5e8027fcad23fda98b2e3ac259d8d67585f671
with:
context: .
file: ./Dockerfile
push: true
tags: olehola/iit-lab4-5:latest
Для коректної роботи створимо секретні змінні з логіном та паролем від Docker Hub

Перевіряємо роботу, внесемо зміни в застосунок:

Результат:
Бачимо роботу GitHub Actions і що всі пункти виконались успішно
Docker image на Docker Hub успішно оновився після останнього коміту

Watchtower також автоматично підтягнув актуальний образ і сайт тепер оновлений

 7. Додати лінтер в пайплайн
Створюємо новий воркфлоу на базі super-linter

Комітимо в нову гілку та відкриваємо pull request

Після завершення аналізу вже існуючих файлів, можна оцінити наскільки сильно ти
наго*нокодив
Прикол
Які помилки він мені видав:
Робимо мердж пул реквесту

Виправимо помилки та запустимо аналіз знову

УРА ПЕРЕМОГА!!!
Фінальний вигляд веб-застосунку:

Висновок: за допомогою цієї лабораторної роботи ми створили CI/CD, який

доставляє в хмару оновлені зміни до застосунку при коміті коду в GitHub репозиторій.

*Скріни і додатки проспонсовані Деркач Ольгою "

#

ДОДАТКИ [Код застосунку]

Dockerfile

FROM nginx:1.25

WORKDIR /usr/share/nginx/html
COPY . .
EXPOSE 80
 .gitignore

.DS_Store
.vscode
.idea

index.html

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IIT LAB4-5</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<header>
<img class="logo" src="assets/iit-logo.png" alt="iit-logo">
<div class="header">
<h1>LAB 4-5</h1>
</div>
</header>

<div class="content">
<h1>зарахуйте лабку, будь ласка🥺👉👈</h1>
<img class="kitty" src="assets/kitty.gif" alt="cute kitty">
</div>

<footer>
<img class="support-ukraine" src="assets/stand-with-ukraine.webp"
alt="stand-with-ukraine" height="50px">
<div class="footer-separator"></div>
<div class="footer-content">
KPI FICT Copyright © 2023 IST - All rights reserved ||
Designed By: 03 Olha &amp Vadym &amp Volodymyr
</div>
 </footer>
</body>

</html>

style.css

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
height: 100%;
}

body {
display: flex;
flex-direction: column;
height: 100vh;
font: 16px sans-serif;
}

header {
display: inline-flex;
align-items: center;
background: antiquewhite;
}

.logo {
height: 80px;
margin: 10px 20px;
}

.content {
flex: 1 0 auto;
text-align: center;
margin-top: 20px;
}

.kitty {
margin-top: 10px;
height: 450px;
}

footer {
flex-shrink: 0;
padding: 20px;
background: black;
display: flex;
flex-direction: row;
align-items: center;
}

.footer-content {
color: gray;
flex: 1 0 auto;
text-align: center;
}

.footer-separator {
flex: auto;
height: 50px;
max-width: 2px;
margin-left: 50px;
border-radius: 2px;
background-color: white;
}