Docker + Nginx 部署前端项目

下载连接

Docker Desktop: The #1 Containerization Tool for Developers | Docker

一、拉取并运行Nginx容器

打开命令行工具输入以下命令

1.拉取Nginx镜像

docker pull nginx

2.运行Nginx容器

基于刚下载的镜像启动一个容器，成功后会输出一串容器 ID

docker run -d --name my-nginx -p 8080:80 nginx

含义：docker run -d --name my-nginx -p 8080:80 nginx

docker run：运行一个容器。
-d：让容器在后台运行（"守护模式"），不会占用命令行窗口。
--name my-nginx：给这个容器起个名字，叫my-nginx。
-p 8080:80：端口映射 。是把容器内部的80端口（Nginx服务默认监听的端口）映射到电脑的8080端口。这样，访问自己电脑的8080端口，就等于访问了容器里的Nginx。
nginx：指定要使用的镜像名称

如果提示容器名字已存在

先删除旧的容器

docker rm my-nginx

或者换个名字

docker run -d --name my-nginx2 -p 8080:80 nginx

3.验证服务是否成功

docker ps

能看到名为 my-nginx 的容器状态是 Up

docker客户端会显示刚刚启动的容器详情

4.验证

打开浏览器，在地址栏输入 http://localhost:8080 可访问

二、本地部署项目

1.将打包后的dist文件放在指定目录下，在该目录下新增nginx.conf文件

复制代码

server {
    listen 80;
    server_name localhost;

    # 前端静态文件
    location / {
        root /usr/share/nginx/html;
        index index.html;
        # 支持前端路由（React Router / Vue Router）
        try_files $uri $uri/ /index.html;
    }

    # 后端 API 代理（如果需要）
    location /api {
        proxy_pass http://backend:8080;  #代理到本地的后端服务，backend 是后端容器名
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

2.用 Docker 命令运行

复制代码

docker run -d --name my-frontend -p 3000:80 -v ${PWD}/dist:/usr/share/nginx/html -v ${PWD}/nginx.conf:/etc/nginx/conf.d/default.conf nginx

命令解释：

-p 3000:80：宿主机 3000 端口映射到容器 80 端口
-v $(pwd)/dist:/usr/share/nginx/html：把 dist 文件夹挂载到 Nginx 的网站目录
-v $(pwd)/nginx.conf:/etc/nginx/conf.d/default.conf：用设置的配置文件覆盖 Nginx 默认配置

3.验证

打开http://localhost:3000 即可看到界面了

三、打镜像

从开发到测试/生产环境时，要部署到服务器上，使用镜像可以跳过配置Node.js、npm、nginx阶段，直接copy本地开发的环境

步骤：

1.在本地项目根目录下创建dockerfile文件

内容：

复制代码

FROM nginx:alpine
COPY dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80

2.构建镜像

docker build -t my-react-app:v1 .

3.运行镜像

docker run -d --name my-app-prod -p 8080:80 my-react-app:v1

可以在docker中看到运行的两个容器

现在我们有一个独立的镜像 my-react-app:v1，可以：

上传到 Docker Hub
复制给同事
部署到任何服务器
打 tag v2 做版本管理

4.在本地把镜像导出成文件

docker save -o my-react-app.tar my-react-app:v1

会生成一个 my-react-app.tar 文件

5.在服务器使用

将生成的my-react-app.tar上传到服务器中，执行导入镜像命令

docker load -i my-react-app.tar

四、命令速查

容器

|--------------------|----------------------------------------------|
| 构建镜像 | docker build -t 镜像名:标签 . |
| 运行容器 | docker run -d --name 容器名 -p 宿主机端口:容器端口镜像名 |
| 查看运行中的容器 | docker ps |
| 查看容器日志 | docker logs 容器名 |
| 停止容器 | docker stop 容器名 |
| 删除容器 | docker rm 容器名 |
| 进入容器内部 | docker exec -it 容器名 /bin/sh |
| 重新加载 Nginx 配置（容器内） | docker exec 容器名 nginx -s reload |

镜像

|----------|----------------------------------|
| 查看本地所有镜像 | docker images |
| 查看镜像详细信息 | docker inspect my-react-app:v1 |
| 删除本地镜像 | docker rmi my-react-app:v1 |
| 导出镜像为文件 | docker save -o 文件名.tar 镜像名:版本 |
| 从文件导入镜像 | docker load -i 文件名.tar |
| 给镜像打新标签 | docker tag 原镜像新镜像名:版本 |
| 推送到仓库 | docker push 镜像名:版本 |
| 从仓库拉取 | docker pull 镜像名:版本 |