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

2024-11-2 22:51| 发布者: 44f6fa4f5| 查看: 111| 评论: 0

摘要: 目录Docker 基础知识搭建静态网页的 Docker 环境通过 Docker 启动附带参数改变网页内容实际利用项目体验利用阐明运行命令表明总结Docker 基础知识什么是 Docker：Docker 是一个开源的平台，用于开发、发布和运行应

Docker 基础知识

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

根本概念：

镜像（Image）：一个包罗了应用步调及其运行时环境的只读模板，可以用来创建容器。
容器（Container）：镜像的一个实例，运行中的应用步调。
Dockerfile：界说怎样创建镜像的文本文件。

Docker 的优势：

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

搭建静态网页的 Docker 环境

预备一个简朴的静态网页：
创建一个根本的 HTML 文件，名为 [code]index.html[/code]，内容如下：

[code]<!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>[/code]

编写 Dockerfile 创建自界说 Docker 镜像：

[code]# 利用 nginx 官方基础镜像 FROM nginx:alpine # 将当地的 index.html 复制到镜像中的 nginx html 目录下 COPY index.html /usr/share/nginx/html # 运行 nginx 服务 CMD ["nginx", "-g", "daemon off;"] [/code]

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

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

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

修改 [code]index.html[/code]：

[code]<!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> [/code]

然后我们可以利用一个简朴的 shell 脚本在启动容器前更换 [code]{{ content }}[/code] 占位符：

[code]#!/bin/sh sed -i "s/{{ content }}/${CONTENT}/g" /usr/share/nginx/html/index.html nginx -g 'daemon off;' [/code]

更新 Dockerfile：

[code]# 利用 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"] [/code]

实际利用

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

[code]docker build -t my-dynamic-webpage . [/code]

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

访问 [code]http://localhost:8080[/code] 检察效果。

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

项目体验

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

[code]本项目旨在展示怎样利用 Docker 构建一个简朴且雅观的个人主页网站。该网站通过 Docker 容器化技能实现，可以动态地显示内容，并且支持在运行容器时传入参数来改变网页的显示内容。网站包罗个人头像、简介和以座右铭形式展示的动态内容。[/code]

利用阐明

[code] # 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 [/code]

运行命令表明

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

总结

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

来源：https://www.jb51.net/server/3283386ls.htm
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

收藏分享邀请

上一篇：Linux中制止客户端与服务端的端口冲突下一篇：Nginx反向代理和内容更换模块实现网页内容动态更换功能

账号		自动登录	找回密码
密码			立即注册