Docker入门到实践之构建简单的WEB个人主页

本文适用于 docker 初学者，从0构建镜像搭建NGINX环境架设个人主页。

基于 Docker 尝试构建

1. Docker 基础知识

什么是 Docker：Docker 是一个开源的平台，用于开发、发布和运行应用程序。它可以将应用程序及其所有依赖项打包成一个标准化的单元（容器），确保应用程序在任何环境中都能一致运行。

基本概念：

镜像（Image）：一个包含了应用程序及其运行时环境的只读模板，可以用来创建容器。
容器（Container）：镜像的一个实例，运行中的应用程序。
Dockerfile：定义如何创建镜像的文本文件。

Docker 的优势：

一致性：应用程序在任何环境下运行一致。
隔离性：不同的应用程序和服务可以独立运行在各自的容器中。
可移植性：容器可以在开发、测试和生产环境中无缝迁移。

2. 搭建静态网页的 Docker 环境

准备一个简单的静态网页：
创建一个基本的 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 创建自定义 Docker 镜像：

# 使用 nginx 官方基础镜像
FROM nginx:alpine

# 将本地的 index.html 复制到镜像中的 nginx html 目录下
COPY index.html /usr/share/nginx/html

# 运行 nginx 服务
CMD ["nginx", "-g", "daemon off;"]

3. 通过 Docker 启动附带参数改变网页内容

使用环境变量改变网页内容：

我们需要一个方法让网页根据传入的参数改变内容，可以使用简单的环境变量和 JavaScript 来实现。

修改 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 可执行权限
RUN chmod +x /entrypoint.sh

# 运行 entrypoint.sh
ENTRYPOINT ["/entrypoint.sh"]

4. 实际操作

创建并运行 Docker 容器：
在包含 index.html 和 Dockerfile 的目录中运行以下命令创建镜像：

docker build -t my-dynamic-webpage .

运行容器时传入环境变量改变内容：

docker run -e CONTENT="Hello, Docker!" -p 8080:80 my-dynamic-webpage

访问 http://localhost:8080 查看效果。

测试不同参数的效果：
再试几个不同的参数值，观察网页内容的变化。

项目体验

Docker Hub: zsuroy/docker-for-learner
Github: 基于Docker构建简单的WEB个人主页
技术栈: Docker + Alpine + Nginx + HTML + CSS + Javascript

本项目旨在展示如何使用 Docker 构建一个简单且美观的个人主页网站。该网站通过 Docker 容器化技术实现，可以动态地显示内容，并且支持在运行容器时传入参数来改变网页的显示内容。网站包括个人头像、简介和以座右铭形式展示的动态内容。

使用说明


# 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