Docker構建簡單的個人主頁網站實戰(zhàn)教程
Docker 基礎知識
什么是 Docker：Docker 是一個開源的平臺，用于開發(fā)、發(fā)布和運行應用程序。它可以將應用程序及其所有依賴項打包成一個標準化的單元（容器），確保應用程序在任何環(huán)境中都能一致運行。
基本概念：
- 鏡像（Image）：一個包含了應用程序及其運行時環(huán)境的只讀模板，可以用來創(chuàng)建容器。
- 容器（Container）：鏡像的一個實例，運行中的應用程序。
- Dockerfile：定義如何創(chuàng)建鏡像的文本文件。
Docker 的優(yōu)勢：
- 一致性：應用程序在任何環(huán)境下運行一致。
- 隔離性：不同的應用程序和服務可以獨立運行在各自的容器中。
- 可移植性：容器可以在開發(fā)、測試和生產環(huán)境中無縫遷移。
搭建靜態(tài)網頁的 Docker 環(huán)境
準備一個簡單的靜態(tài)網頁：
創(chuàng)建一個基本的 HTML 文件，名為 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>
</head>
<body>
<h1>Welcome to My Website</h1>
<p id="content">Default Content</p>
</body>
</html>編寫 Dockerfile 創(chuàng)建自定義 Docker 鏡像：
# 使用 nginx 官方基礎鏡像 FROM nginx:alpine # 將本地的 index.html 復制到鏡像中的 nginx html 目錄下 COPY index.html /usr/share/nginx/html # 運行 nginx 服務 CMD ["nginx", "-g", "daemon off;"]
通過 Docker 啟動附帶參數(shù)改變網頁內容
使用環(huán)境變量改變網頁內容：
我們需要一個方法讓網頁根據傳入的參數(shù)改變內容，可以使用簡單的環(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 官方基礎鏡像 FROM nginx:alpine # 將本地的 index.html 復制到鏡像中的 nginx html 目錄下 COPY index.html /usr/share/nginx/html COPY entrypoint.sh /entrypoint.sh # 給予 entrypoint.sh 可執(zhí)行權限 RUN chmod +x /entrypoint.sh # 運行 entrypoint.sh ENTRYPOINT ["/entrypoint.sh"]
實際操作
創(chuàng)建并運行 Docker 容器：
在包含 index.html 和 Dockerfile 的目錄中運行以下命令創(chuàng)建鏡像：
docker build -t my-dynamic-webpage .
運行容器時傳入環(huán)境變量改變內容：
訪問 http://localhost:8080 查看效果。
測試不同參數(shù)的效果：
再試幾個不同的參數(shù)值，觀察網頁內容的變化。
項目體驗
- Docker Hub: zsuroy/docker-for-learner
- Github: 基于Docker構建簡單的WEB個人主頁
- 技術棧: Docker + Alpine + Nginx + HTML + CSS + Javascript
本項目旨在展示如何使用 Docker 構建一個簡單且美觀的個人主頁網站。該網站通過 Docker 容器化技術實現(xiàn)，可以動態(tài)地顯示內容，并且支持在運行容器時傳入參數(shù)來改變網頁的顯示內容。網站包括個人頭像、簡介和以座右銘形式展示的動態(tài)內容。
使用說明
# 1.1 拉取鏡像 docker pull zsuroy/docker-for-learner:latest ## 1.2 國內加速 | 若上一步失敗可以嘗試此命令 docker --debug pull m.daocloud.io/docker.io/zsuroy/docker-for-learner ## 1.3 若以上均失敗則建議使用離線鏡像 ｜ 需要提前下載鏡像 docker load -i docker-for-learner.tar # 2. 運行 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
運行命令解釋
通過環(huán)境變量 ABOUT 指定關于信息，CONTENT 確定座右銘區(qū)域內容，在 docker 啟動時會先執(zhí)行 sed 命令替換相關內容，啟動后通過 javascript 動態(tài)的加載到網頁中顯示。
總結
到此這篇關于Docker構建簡單的個人主頁網站實戰(zhàn)教程的文章就介紹到這了,更多相關Docker構建簡單網站內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了詳解ASP.NET Core Docker部署。詳細介紹了如何在Docker容器中運行ASP.NET Core應用程序。有興趣的可以了解一下。2016-12-12
本文主要介紹了docker命令中必須加上sudo的問題解決方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-06-06
docker 安裝部署 Prometheus 與grafana的詳細過程
本文給大家詳細介紹了如何在CentOS 7上使用Docker和Docker Compose安裝和配置Prometheus和Grafana,并展示了如何進行基本的監(jiān)控配置和數(shù)據可視化,感興趣的朋友跟隨小編一起看看吧2024-12-12
Skywalking?Docker單機環(huán)境搭建過程
這篇文章主要介紹了Skywalking?Docker單機環(huán)境搭建,本次搭建是基于MySQL進行持久化，因此需要提前準備好一個MySQL容器，需要的朋友可以參考下2024-02-02
本文主要介紹了docker?screen命令的使用,Screen命令則提供了強大的多會話管理功能,讓我們可以實時監(jiān)控和操作容器,具有一定的參考價值,感興趣的可以了解一下2024-01-01
這篇文章主要介紹了docker-compose安裝db2數(shù)據庫操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-12-12
Docker-compose搭建Redis集群(Sentinel)的實現(xiàn)
本文主要介紹了Docker-compose搭建Redis集群(Sentinel)的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
FTP是一種傳輸協(xié)議,本文主要介紹了Docker安裝FTP服務器的方法步驟,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-05-05
這篇文章主要為大家介紹了docker push遇到unknown blob問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
在當今的軟件開發(fā)領域,容器化技術已經成為了部署和管理應用程序的重要手段,下面這篇文章主要給大家介紹了關于Docker項目部署之從后端到前端部署的相關資料,需要的朋友可以參考下2024-08-08