当前位置：首页 > news >正文

Dockerfile - 自定义 Nginx 镜像构建

news 来源：原创 2025/6/15 7:26:02

Dockerfile

FROM nginx:alpine
COPY custom-index.html /usr/share/nginx/html/index.html

编译

docker build -t nginx:v519 .查看版本
docker run --rm nginx:v519 nginx -v启动
docker run -d -p 5173:80 --name nginx_519 nginx:v519测试
http://xxx:5173/

custom-index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>自定义首页</title><style>body {font-family: Arial, sans-serif;margin: 0;padding: 0;background-color: #f4f4f4;}.container {width: 80%;margin: auto;overflow: hidden;}header {background: #333;color: #fff;padding-top: 30px;min-height: 70px;border-bottom: #555 3px solid;}header a {color: #fff;text-decoration: none;text-transform: uppercase;font-size: 16px;}header ul {padding: 0;list-style: none;}header li {display: inline;padding: 0 20px 0 20px;}header #branding {float: left;}header #branding h1 {margin: 0;}header nav {float: right;margin-top: 10px;}header .highlight, header .current a {color: #e8491d;font-weight: bold;}header a:hover {color: #ffffff;font-weight: bold;}.showcase {background: url('showcase.jpg') no-repeat center center/cover;min-height: 300px;text-align: center;color: #fff;}.showcase h1 {margin-top: 100px;font-size: 55px;margin-bottom: 10px;}.showcase p {font-size: 20px;}.newsletter {padding: 15px;color: #fff;background: #333;}.newsletter h2 {margin: 0;}.newsletter p {margin: 0;}.box {float: left;width: 30%;padding: 10px;text-align: center;}.box img {width: 90px;}.box h3 {margin: 10px 0;}.box p {line-height: 1.8;}footer {background: #333;color: #fff;text-align: center;padding: 10px;position: fixed;width: 100%;bottom: 0;}</style>
</head>
<body><header><div class="container"><div id="branding"><h1>我的网站</h1></div><nav><ul><li class="current"><a href="index.html">首页</a></li><li><a href="about.html">关于我们</a></li><li><a href="services.html">服务</a></li><li><a href="contact.html">联系我们</a></li></ul></nav></div></header><section class="showcase"><div class="container"><h1>欢迎来到我的网站</h1><p>这是一个自定义的首页，你可以在这里展示你的内容。</p></div></section><section class="newsletter"><div class="container"><h2>订阅我们的新闻</h2><p>获取最新的信息和更新。</p></div></section><section class="boxes"><div class="container"><div class="box"><img src="logo1.png" alt=""><h3>服务一</h3><p>这里是服务一的描述。</p></div><div class="box"><img src="logo2.png" alt=""><h3>服务二</h3><p>这里是服务二的描述。</p></div><div class="box"><img src="logo3.png" alt=""><h3>服务三</h3><p>这里是服务三的描述。</p></div></div></section><footer><p>版权所有 &copy; 2025</p></footer>
</body>
</html>