一篇看懂！Docker + Nginx 零基础部署前端，从此告别“我电脑上能跑”

帅比九日
582 阅读4分钟

一篇看懂！Docker + Nginx 零基础部署前端，从此告别“我电脑上能跑”

写给读者的话

如果你是一个前端新人，可能遇到过这样的场景：

  • 写了一个炫酷的网页，本地运行完美，但不知道怎么放到服务器让别人访问。
  • 听说要用 Nginx、Docker 这些工具，但完全不懂它们是什么，甚至分不清哪个是哪个。
  • 尝试照着教程部署，结果遇到一堆报错，最终放弃。

别担心！这篇文章会用最通俗的语言，带你理解 Docker、Nginx 的核心概念，并手把手教你完成一次前端部署。无需任何部署经验，跟着做就能成功！

一、先搞懂这些“黑话”是什么

1. Docker：你的“应用打包神器”

  • 是什么？ 一个工具，能把你的应用（比如前端代码）和它需要的环境（比如 Node.js、Nginx）打包成一个箱子（容器），保证在任何电脑上都能运行。
  • 为什么需要？ 解决“我电脑能跑，别人电脑跑不了”的玄学问题。
  • 核心概念：
    • 镜像（Image）：像“菜谱”，记录如何打包应用（比如“先装 Node.js，再复制代码”）。
    • 容器（Container）：像“做好的菜”，根据镜像运行的一个实例（比如你的前端应用在运行）。

2. Nginx：你的“智能服务员”

  • 是什么？ 一个高性能的 Web 服务器，主要做两件事：
    1. 托管静态文件：把 HTML/CSS/JS 文件发给用户的浏览器。
    2. 反向代理：把用户请求转发给后端服务（比如 Node.js 接口）。
  • 为什么需要？ 直接双击打开 HTML 文件虽然能看，但无法通过网址访问，Nginx 帮你实现这一点。

3. 部署流程全景图

你的代码 → 打包成静态文件 → 用 Docker 塞进容器 → Nginx 托管 → 用户通过网址访问

二、Docker + Nginx 部署原理

1. Docker 如何工作？

  • 镜像从哪里来？ 从 Docker Hub（一个“应用商店”）下载现成的镜像，比如直接下载装好 Nginx 的镜像。
  • 容器如何运行？ 基于镜像启动一个隔离的环境，你的代码在这个环境里运行，不污染本地电脑。

2. Nginx 在部署中的作用

  • 托管静态文件：将你的 index.html 和 JS/CSS 文件通过 HTTP 协议暴露给外界。
  • 解决前端路由问题：配置 try_files 让 Vue/React 的单页应用路由生效。

3. 端口映射：让外界访问容器

  • 容器默认是封闭的，通过 端口映射 将容器的端口（比如 80）映射到宿主机的端口（比如 8080）。
  • 用户访问 http://服务器IP:8080 → 请求转发到容器的 80 端口 → Nginx 处理请求。

三、手把手部署：从代码到上线

步骤 1：本地开发与打包

  1. 写一个简单的 HTML 文件（或使用 Vue/React 项目）：
<!DOCTYPE html>
<html>
<head>
    <title>我的第一个页面</title>
</head>
<body>
    <h1>Hello Docker + Nginx!</h1>
</body>
</html>
  1. 如果是 Vue/React 项目，运行 npm run build，生成 dist 文件夹。

步骤 2：准备 Docker 和 Nginx 配置

  1. 创建 Dockerfile（文件名必须为 Dockerfile，无后缀）：
# 使用 Nginx 官方镜像作为基础
FROM nginx:alpine

# 删除默认配置
RUN rm /etc/nginx/conf.d/default.conf

# 复制自定义配置
COPY nginx.conf /etc/nginx/conf.d/

# 将静态文件复制到 Nginx 的目录
COPY dist/ /usr/share/nginx/html  # 如果是 HTML 文件，直接替换 dist/ 为你的目录
  1. 创建 nginx.conf（Nginx 配置文件）：
server {
    listen 80;                 # 监听 80 端口
    server_name localhost;      # 服务器名称（本地测试无需修改）

    location / {
        root /usr/share/nginx/html;  # 静态文件目录
        index index.html;            # 默认首页
        try_files $uri $uri/ /index.html;  # 支持前端路由（如 Vue Router）
    }
}

步骤 3：构建镜像并运行

  1. 打开终端，进入项目目录，执行以下命令：
# 构建镜像（-t 给镜像起名，末尾的 . 表示当前目录）
docker build -t my-frontend .

# 运行容器（-d 后台运行，-p 端口映射，--name 容器名）
docker run -d -p 8080:80 --name my-app my-frontend
  1. 访问 http://localhost:8080，看到你的页面！

四、常见问题与解决

  1. 访问页面显示 403 或空白

    • 检查 dist 目录是否复制正确，或 HTML 文件是否在 /usr/share/nginx/html 下。
    • 查看容器日志：docker logs my-app。

  2. 端口被占用

    • 修改 -p 参数，比如 -p 3000:80，然后访问 http://localhost:3000。

  3. 修改代码后如何更新？

    • 重新构建镜像：docker build -t my-frontend .
    • 删除旧容器：docker rm -f my-app
    • 重新运行：docker run -d -p 8080:80 --name my-app my-frontend

五、总结

  • Docker 让部署不再依赖环境，真正做到“一次打包，到处运行”。
  • Nginx 作为 Web 服务器，帮你托管文件并处理网络请求。
  • 核心流程：代码 → 打包 → 塞进 Docker 容器 → Nginx 对外暴露。

现在，你可以大声说：我知道怎么部署前端了！
尝试按照步骤操作，遇到问题欢迎留言讨论。下一步，你可以探索 Docker Compose、持续集成（CI/CD），向更高效的部署迈进！

avatar
文章
阅读
粉丝