119 lines
3.2 KiB
HTML
119 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="vi">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Hello DevOps CI/CD</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<style>
|
||
body {
|
||
font-family: Arial, Helvetica, sans-serif;
|
||
margin: 0;
|
||
background: #f4f6f8;
|
||
color: #333;
|
||
}
|
||
header {
|
||
background: #0d6efd;
|
||
color: white;
|
||
padding: 20px;
|
||
text-align: center;
|
||
}
|
||
section {
|
||
max-width: 900px;
|
||
margin: auto;
|
||
padding: 20px;
|
||
background: white;
|
||
}
|
||
h2 {
|
||
color: #0d6efd;
|
||
border-bottom: 2px solid #eee;
|
||
padding-bottom: 5px;
|
||
}
|
||
ul {
|
||
line-height: 1.8;
|
||
}
|
||
.box {
|
||
background: #f1f1f1;
|
||
padding: 15px;
|
||
border-left: 5px solid #0d6efd;
|
||
margin: 15px 0;
|
||
}
|
||
footer {
|
||
text-align: center;
|
||
padding: 15px;
|
||
background: #222;
|
||
color: #aaa;
|
||
margin-top: 30px;
|
||
}
|
||
.badge {
|
||
display: inline-block;
|
||
background: #198754;
|
||
color: white;
|
||
padding: 5px 10px;
|
||
border-radius: 5px;
|
||
font-size: 14px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header>
|
||
<h1>🚀 Hello DevOps CI/CD Demo</h1>
|
||
<p>Mini CI/CD Pipeline – Jenkins + Docker + Gitea</p>
|
||
<span class="badge">Deploy Success</span>
|
||
</header>
|
||
|
||
<section>
|
||
<h2>📌 Giới thiệu</h2>
|
||
<p>
|
||
Đây là ứng dụng web HTML tĩnh dùng để minh họa mô hình
|
||
<b>Mini CI/CD Pipeline</b> trong DevOps.
|
||
Mỗi khi code được thay đổi và đẩy lên Git, Jenkins sẽ tự động
|
||
build Docker image và deploy container mới.
|
||
</p>
|
||
|
||
<h2>⚙️ Công nghệ sử dụng</h2>
|
||
<ul>
|
||
<li><b>Gitea</b>: Quản lý mã nguồn (Git Server)</li>
|
||
<li><b>Jenkins</b>: Công cụ CI/CD tự động hóa</li>
|
||
<li><b>Docker</b>: Đóng gói và triển khai ứng dụng</li>
|
||
<li><b>Nginx</b>: Web server chạy ứng dụng</li>
|
||
<li><b>Linux VPS</b>: Môi trường triển khai</li>
|
||
</ul>
|
||
|
||
<h2>🔄 Quy trình CI/CD</h2>
|
||
<div class="box">
|
||
<ol>
|
||
<li>Lập trình viên chỉnh sửa mã nguồn</li>
|
||
<li>Push code lên Git repository</li>
|
||
<li>Jenkins tự động kéo code mới</li>
|
||
<li>Build Docker image</li>
|
||
<li>Triển khai container lên server</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<h2>🧪 Mục đích Demo</h2>
|
||
<ul>
|
||
<li>Kiểm tra pipeline CI/CD hoạt động đúng</li>
|
||
<li>Minh họa tự động hóa triển khai</li>
|
||
<li>Phù hợp cho học tập và báo cáo DevOps</li>
|
||
</ul>
|
||
|
||
<h2>📅 Thông tin triển khai</h2>
|
||
<p>
|
||
<b>Ngày deploy:</b> <span id="date"></span><br>
|
||
<b>Trạng thái:</b> Thành công
|
||
</p>
|
||
</section>
|
||
|
||
<footer>
|
||
<p>© 2025 - Hello DevOps | Mini CI/CD Pipeline Demo</p>
|
||
</footer>
|
||
|
||
<script>
|
||
document.getElementById("date").innerText = new Date().toLocaleString();
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|
||
|