Docker构建简单的个人主页网站实战教程
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构建简单网站内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文详细介绍了在Windows环境下使用Docker Desktop进行Docker镜像的打包、运行、导出以及在Linux系统中的导入操作,重点讲解了如何在Windows中安装Docker Desktop,构建Docker镜像的步骤,文中介绍的非常详细,需要的朋友可以参考下2024-10-10
作者个人博客一直是跑在阿里云主机上的，最近接触了docker 心血来潮想把自己的应用打包到docker容器中去,方便以后的迁移部署，这里把经验给大家总结分享下2017-05-05
这篇文章主要介绍了Docker 学习文档的相关资料,需要的朋友可以参考下2016-11-11
在本教程中，我们将学习如何使用 docker 部署 golang web 应用程序。 具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2017-03-03
这篇文章主要介绍了docker-compose的build使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
本文主要介绍了在Docker中更快地构建Maven项目，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
Docker删除镜像是一个常见的操作,主要用于清理系统中不再需要的镜像,以释放存储空间,删除镜像可以通过docker rmi命令实现,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-10-10
Windows(Win11)如何安装Docker(Docker Desktop)
这篇文章主要介绍了Windows(Win11)如何安装Docker(Docker Desktop),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
利用OpenVSwitch在多台主机上部署Docker的教程
这篇文章主要介绍了利用OpenVSwitch在多台主机上部署Docker的教程,包括配置多个容器的IP地址等内容，需要的朋友可以参考下2015-03-03
这篇文章主要给大家介绍了关于Docker容器添加新端口映射的方法与详细步骤,Docker 端口映射即映射容器内应用的服务端口到本机宿主机器,文中通过代码示例介绍的非常详细,需要的朋友可以参考下2023-08-08
最新评论