Day28 - 佈署 Nginx 靜態網站至 Kubernetes (上)：從專案設置到容器化 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2024 iThome 鐵人賽

DAY 28

DevOps

DevOps菜鳥的30天實踐挑戰：從 CI/CD Pipeline 到雲端佈署系列第 28 篇

Day28 - 佈署 Nginx 靜態網站至 Kubernetes (上)：從專案設置到容器化

16th鐵人賽 nginx kubernetes devops container

hsinyu9901

2024-10-12 23:14:47

107 瀏覽

分享至

不知不覺挑戰已經到了尾聲，在最後幾天的文章中，我們將要用前幾天學到的技能，從零開始建立一個 Nginx 的靜態網站，最終將其佈署到 Kubernetes 中。本篇文章將涵蓋從專案設置、內容準備、容器化到本地測試的整個流程，為佈署至 Kubernetes 做好準備。因為內容較多，分為上下兩篇文章~

什麼是靜態網站？

靜態網站是一種不需要後端伺服器動態生成網頁的網站，所有的頁面內容都是預先定義好的 HTML、CSS 和 JavaScript 文件。這種網站通常用於展示簡單的資訊，例如個人簡歷、公司簡介或是部落格等。在這次教學中，我們將建立一個簡單的靜態網站並使用 Nginx 作為 Web 伺服器。

什麼是 Nginx？

Nginx 是一個高效能的開源 Web 伺服器和反向代理伺服器，同時也可以作為郵件代理伺服器。它以其高並發、高性能和低資源消耗著稱，廣泛用於展示靜態內容和負載均衡。在這次的實作中，Nginx 將被用來作為靜態網站的伺服器。

在這個教學中，我們將構建一個簡單的靜態網站專案，並通過 Docker 將其容器化，最終佈署到 Kubernetes。專案的目錄結構如下所示：

microservices_project/
├── website/
│   ├── index.html
│   ├── style.css
│   ├── Dockerfile
└── kubernetes/
    ├── website-deployment.yaml

Step 1: 建立 Nginx 靜態網站

首先，我們需要準備網站的靜態內容，包括 HTML 和 CSS 文件。

準備網站內容

創建專案目錄

mkdir website
cd website

創建 index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>My Static Website</title>
</head>
<body>
    <h1> DevOps菜鳥的30天實踐挑戰：從 CI/CD Pipeline 到雲端佈署 系列</h1>
    <p> 今天是DAY28 - 這是一個使用 Nginx 作為伺服器的靜態網站 </p>
</body>
</html>

創建 style.css：

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    text-align: center;
    margin: 0;
    padding: 0;
}

h1 {
    color: #333;
}

Step 2: 使用 Docker 將 Nginx 容器化

撰寫 Dockerfile

在 website 目錄中創建 Dockerfile，用於將靜態網站容器化。

# 使用官方 Nginx 映像
FROM nginx:alpine

# 將網站文件複製到 Nginx 預設的網站根目錄
COPY . /usr/share/nginx/html

# 曝露容器的 80 端口
EXPOSE 80

這個 Dockerfile 使用官方的 Nginx 映像，並將我們的網站內容複製到 Nginx 的默認網站目錄中。:alpine 表示使用 Alpine Linux 版本的 Nginx 映像。Alpine Linux 是一個輕量級的 Linux 發行版，它的體積小、啟動快，這使得它非常適合用於容器化環境中，尤其是在 Docker 中。使用 nginx:alpine 可以減少 Docker 映像的大小，提高佈署和啟動效率。

建置 Docker 映像

使用以下命令來建置 Docker 映像：

docker build -t my-static-website:latest .

測試 Docker 映像

建置完成後，我們可以運行 Docker 容器並在本機測試它：

docker run -d -p 8080:80 my-static-website:latest

在瀏覽器中打開 http://localhost:8080，應該可以看到我們剛才創建的靜態網站。

Step 3: 撰寫 Kubernetes YAML 文件

撰寫 Kubernetes 的配置文件**website-deployment.yaml**來佈署這個靜態網站。

apiVersion: apps/v1
kind: Deployment
metadata:
  name: website-deployment
spec:
  replicas: 2
  selector:
    matchLabels:
      app: website
  template:
    metadata:
      labels:
        app: website
    spec:
      containers:
      - name: website
        image: my-static-website:latest
        ports:
        - containerPort: 80
---
apiVersion: v1
kind: Service
metadata:
  name: website-service
spec:
  selector:
    app: website
  ports:
  - protocol: TCP
    port: 80
    targetPort: 80
  type: ClusterIP

這個 YAML 文件定義了一個 Deployment，它有兩個副本，確保應用的高可用性。同時，它還定義了一個 Service，用於暴露靜態網站服務。

小結

今天我們從零開始建立了一個簡單的 Nginx 靜態網站，並使用 Docker 進行了容器化處理，最後撰寫了 Kubernetes 佈署的配置文件。在下一篇文章中，我們將介紹如何將這些配置文件佈署到 Kubernetes 叢集中，並使用 Helm 來管理和自動化這個佈署流程，敬請期待！