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构建简单网站内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了详解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,并展示了如何进行基本的监控配置和数据可视化,感兴趣的朋友跟随小编一起看看吧2024-12-12
这篇文章主要介绍了Skywalking Docker单机环境搭建,本次搭建是基于MySQL进行持久化，因此需要提前准备好一个MySQL容器，需要的朋友可以参考下2024-02-02
本文主要介绍了docker screen命令的使用,Screen命令则提供了强大的多会话管理功能,让我们可以实时监控和操作容器,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
这篇文章主要介绍了docker-compose安装db2数据库操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-12-12
Docker-compose搭建Redis集群(Sentinel)的实现
本文主要介绍了Docker-compose搭建Redis集群(Sentinel)的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
FTP是一种传输协议,本文主要介绍了Docker安装FTP服务器的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-05-05
这篇文章主要为大家介绍了docker push遇到unknown blob问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
在当今的软件开发领域,容器化技术已经成为了部署和管理应用程序的重要手段,下面这篇文章主要给大家介绍了关于Docker项目部署之从后端到前端部署的相关资料,需要的朋友可以参考下2024-08-08
最新评论