《Docker 入门实战:把静态网页装进容器,一条命令跑起来》

举报
yd_274623194 发表于 2026/10/25 13:31:48 2026/10/25
【摘要】 关键词:Docker、容器、静态网站部署、云服务器上一篇我们用原生 Nginx 把静态网页部署到了云服务器上。今天换一个更"工程师"的做法:用 Docker 把网页装进容器。好处很直接——环境跟着镜像走,换一台服务器也能一条命令跑出同样的结果,不用再重装、重配一遍。本文以前文的静态页面(index.html)为例,假设服务器上已经装好 Docker。 一、先确认 Docker 能用docke...

关键词:Docker、容器、静态网站部署、云服务器

上一篇我们用原生 Nginx 把静态网页部署到了云服务器上。今天换一个更"工程师"的做法:用 Docker 把网页装进容器。好处很直接——环境跟着镜像走,换一台服务器也能一条命令跑出同样的结果,不用再重装、重配一遍。

本文以前文的静态页面(index.html)为例,假设服务器上已经装好 Docker。

一、先确认 Docker 能用

docker --version
docker ps

能输出版本号、且 docker ps 不报错,就说明 Docker 已经在跑了。如果提示权限问题,前面加 sudo 再试一次。

二、写一个 Dockerfile

在放 index.html 的目录里,新建一个名叫 Dockerfile 的文件(没有后缀):

FROM nginx:alpine
COPY index.html /usr/share/nginx/html/index.html
EXPOSE 80

只有三行,但每行都有用:

  • FROM nginx:alpine:以轻量的 Nginx 官方镜像为底,容器里自带 Nginx,不用自己装
  • COPY index.html ...:把你的页面拷进容器里 Nginx 的默认网站目录
  • EXPOSE 80:声明这个容器对外提供 80 端口的服务

注意:COPY 的源文件要和 Dockerfile 在同一个目录下,否则构建时会找不到文件。

三、构建镜像

docker build -t my-web:v1 .
  • -t my-web:v1:给镜像起个名字和版本号,方便以后区分
  • 最后那个 . 不能少:它表示 Dockerfile 所在的当前目录

构建成功后,用 docker images 能看到刚打好的 my-web:v1。

四、一条命令跑起来

docker run -d -p 80:80 --name my-web my-web:v1

参数拆开看:

  • -d:后台运行,不占用终端
  • -p 80:80:把主机的 80 端口映射到容器的 80 端口,浏览器访问服务器公网 IP 就能看到页面
  • --name my-web:给容器起个名字,之后管理起来不用记一串容器 ID

跑起来后,在浏览器输入服务器公网 IP,看到你的页面就成功了。

五、改了页面怎么更新

静态页面改了,不用进容器里手动换文件,重新走一遍"构建 + 替换"就行:

docker stop my-web
docker rm my-web
docker build -t my-web:v2 .
docker run -d -p 80:80 --name my-web my-web:v2

先停掉、删掉旧容器,再用新镜像起一个。容器本身不存重要数据,删了重建是常规操作,不用心疼。

六、常用命令速查

命令 作用
docker ps 查看正在运行的容器
docker ps -a 查看所有容器(含已停止的)
docker logs my-web 查看容器日志,出问题先看它
docker stop my-web 停止容器
docker start my-web 重新启动已停止的容器
docker rm my-web 删除容器(先停再删)
docker images 查看本地镜像

七、两个新手最容易踩的坑

1. 端口被占用

如果 docker run 报错说 80 端口已被占用,说明主机上已经有别的服务(比如之前原生装的 Nginx)在用 80 端口。先停掉那个服务,或者把映射改成 -p 8080:80,改用 8080 端口访问。

2. 容器退出了,但不知道为什么

别急着重建,先 docker logs my-web 看日志。多数情况是 Dockerfile 里路径写错、或者页面文件没拷进去,日志里一般写得很清楚。

结语

Docker 上手的核心就四步:写 Dockerfile、构建镜像、跑容器、会看日志。和原生 Nginx 相比,它多了一层抽象,换来的是一致性——本地能跑,服务器上就能跑。下一篇可以继续往下走:用 docker-compose 把"静态页面 + 后端接口"一次编排起来。

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0)

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。