快捷導(dǎo)航

Docker構(gòu)建簡單的個人主頁網(wǎng)站實戰(zhàn)教程

更新時間：2024年10月05日 11:42:05 作者：zsuroy

Docker是一種開源容器化技術(shù),可以打包、發(fā)布和運(yùn)行應(yīng)用程序,本教程介紹了如何使用Docker構(gòu)建一個簡單的個人主頁網(wǎng)站,通過編寫Dockerfile來自定義鏡像,并展示了如何通過傳入環(huán)境變量來動態(tài)更改網(wǎng)頁內(nèi)容,項目使用的技術(shù)包括Docker、Alpine、Nginx、HTML、CSS和JavaScript

Docker 基礎(chǔ)知識

什么是 Docker：Docker 是一個開源的平臺，用于開發(fā)、發(fā)布和運(yùn)行應(yīng)用程序。它可以將應(yīng)用程序及其所有依賴項打包成一個標(biāo)準(zhǔn)化的單元（容器），確保應(yīng)用程序在任何環(huán)境中都能一致運(yùn)行。

基本概念：

鏡像（Image）：一個包含了應(yīng)用程序及其運(yùn)行時環(huán)境的只讀模板，可以用來創(chuàng)建容器。
容器（Container）：鏡像的一個實例，運(yùn)行中的應(yīng)用程序。
Dockerfile：定義如何創(chuàng)建鏡像的文本文件。

Docker 的優(yōu)勢：

一致性：應(yīng)用程序在任何環(huán)境下運(yùn)行一致。
隔離性：不同的應(yīng)用程序和服務(wù)可以獨(dú)立運(yùn)行在各自的容器中。
可移植性：容器可以在開發(fā)、測試和生產(chǎn)環(huán)境中無縫遷移。

搭建靜態(tài)網(wǎng)頁的 Docker 環(huán)境

準(zhǔn)備一個簡單的靜態(tài)網(wǎng)頁：
創(chuàng)建一個基本的 HTML 文件，名為 index.html，內(nèi)容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Web Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p id="content">Default Content</p>
</body>
</html>

編寫 Dockerfile 創(chuàng)建自定義 Docker 鏡像：

# 使用 nginx 官方基礎(chǔ)鏡像
FROM nginx:alpine

# 將本地的 index.html 復(fù)制到鏡像中的 nginx html 目錄下
COPY index.html /usr/share/nginx/html

# 運(yùn)行 nginx 服務(wù)
CMD ["nginx", "-g", "daemon off;"]

通過 Docker 啟動附帶參數(shù)改變網(wǎng)頁內(nèi)容

使用環(huán)境變量改變網(wǎng)頁內(nèi)容：

我們需要一個方法讓網(wǎng)頁根據(jù)傳入的參數(shù)改變內(nèi)容，可以使用簡單的環(huán)境變量和 JavaScript 來實現(xiàn)。

修改 index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Web Page</title>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var content = "{{ content }}";
            document.getElementById("content").innerText = content;
        });
    </script>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p id="content">Default Content</p>
</body>
</html>

然后我們可以使用一個簡單的 shell 腳本在啟動容器前替換 {{ content }} 占位符：

#!/bin/sh
sed -i "s/{{ content }}/${CONTENT}/g" /usr/share/nginx/html/index.html
nginx -g 'daemon off;'

更新 Dockerfile：

# 使用 nginx 官方基礎(chǔ)鏡像
FROM nginx:alpine

# 將本地的 index.html 復(fù)制到鏡像中的 nginx html 目錄下
COPY index.html /usr/share/nginx/html
COPY entrypoint.sh /entrypoint.sh

# 給予 entrypoint.sh 可執(zhí)行權(quán)限
RUN chmod +x /entrypoint.sh

# 運(yùn)行 entrypoint.sh
ENTRYPOINT ["/entrypoint.sh"]

實際操作

創(chuàng)建并運(yùn)行 Docker 容器：
在包含 index.html 和 Dockerfile 的目錄中運(yùn)行以下命令創(chuàng)建鏡像：

docker build -t my-dynamic-webpage .

運(yùn)行容器時傳入環(huán)境變量改變內(nèi)容：

訪問 http://localhost:8080 查看效果。

測試不同參數(shù)的效果：
再試幾個不同的參數(shù)值，觀察網(wǎng)頁內(nèi)容的變化。

項目體驗

Docker Hub: zsuroy/docker-for-learner
Github: 基于Docker構(gòu)建簡單的WEB個人主頁
技術(shù)棧: Docker + Alpine + Nginx + HTML + CSS + Javascript

本項目旨在展示如何使用 Docker 構(gòu)建一個簡單且美觀的個人主頁網(wǎng)站。該網(wǎng)站通過 Docker 容器化技術(shù)實現(xiàn)，可以動態(tài)地顯示內(nèi)容，并且支持在運(yùn)行容器時傳入?yún)?shù)來改變網(wǎng)頁的顯示內(nèi)容。網(wǎng)站包括個人頭像、簡介和以座右銘形式展示的動態(tài)內(nèi)容。

使用說明

# 1.1 拉取鏡像
docker pull zsuroy/docker-for-learner:latest

## 1.2 國內(nèi)加速 | 若上一步失敗可以嘗試此命令
docker --debug pull m.daocloud.io/docker.io/zsuroy/docker-for-learner

## 1.3 若以上均失敗則建議使用離線鏡像 ｜ 需要提前下載鏡像
docker load -i docker-for-learner.tar

# 2. 運(yùn)行
docker run -e CONTENT="Hello, Welcome to my personal homepage! <br> <br> Every cloud has a silver lining." -e ABOUT="I am Suroy." -p 8080:80 docker-for-learner

# 3. 瀏覽器訪問
http://127.0.0.1:8080