首页 > 网站技巧 > 服务器 > 云和虚拟化 > docker > Docker构建简单网站

Docker构建简单的个人主页网站实战教程

2024-10-05 11:41:35 作者：zsuroy

Docker是一种开源容器化技术,可以打包、发布和运行应用程序,本教程介绍了如何使用Docker构建一个简单的个人主页网站,通过编写Dockerfile来自定义镜像,并展示了如何通过传入环境变量来动态更改网页内容,项目使用的技术包括Docker、Alpine、Nginx、HTML、CSS和JavaScript

Docker 基础知识

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

基本概念：

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

Docker 的优势：

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

搭建静态网页的 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;"]

通过 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"]

实际操作

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

docker build -t 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

运行命令解释

通过环境变量 ABOUT 指定关于信息，CONTENT 确定座右铭区域内容，在 docker 启动时会先执行 sed 命令替换相关内容，启动后通过 javascript 动态的加载到网页中显示。

总结

到此这篇关于Docker构建简单的个人主页网站实战教程的文章就介绍到这了,更多相关Docker构建简单网站内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！