快捷導(dǎo)航

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

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

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

Docker 基礎(chǔ)知識(shí)

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

基本概念：

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

Docker 的優(yōu)勢(shì)：

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

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

準(zhǔn)備一個(gè)簡(jiǎn)單的靜態(tài)網(wǎng)頁(yè)：
創(chuàng)建一個(gè)基本的 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>

編寫(xiě) 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;"]

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

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

我們需要一個(gè)方法讓網(wǎng)頁(yè)根據(jù)傳入的參數(shù)改變內(nèi)容，可以使用簡(jiǎn)單的環(huán)境變量和 JavaScript 來(lái)實(shí)現(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>

然后我們可以使用一個(gè)簡(jiǎn)單的 shell 腳本在啟動(dòng)容器前替換 {{ 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"]

實(shí)際操作

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

docker build -t my-dynamic-webpage .

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

訪問(wèn) http://localhost:8080 查看效果。

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

項(xiàng)目體驗(yàn)

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

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

使用說(shuō)明

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

## 1.2 國(guó)內(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. 瀏覽器訪問(wèn)
http://127.0.0.1:8080

運(yùn)行命令解釋

通過(guò)環(huán)境變量 ABOUT 指定關(guān)于信息，CONTENT 確定座右銘區(qū)域內(nèi)容，在 docker 啟動(dòng)時(shí)會(huì)先執(zhí)行 sed 命令替換相關(guān)內(nèi)容，啟動(dòng)后通過(guò) javascript 動(dòng)態(tài)的加載到網(wǎng)頁(yè)中顯示。

總結(jié)

到此這篇關(guān)于Docker構(gòu)建簡(jiǎn)單的個(gè)人主頁(yè)網(wǎng)站實(shí)戰(zhàn)教程的文章就介紹到這了,更多相關(guān)Docker構(gòu)建簡(jiǎn)單網(wǎng)站內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: