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

docker打包前端项目

news 2025/7/4 22:16:57

🎉 前言

之前有出过一期打包后端项目和数据库的教程，现在填个坑，出一期打包前端项目的教程，废话不多说，我们直接进入正题。

🎉 编写Dockerfile文件

老规矩，先描述项目结构，结构图如下：
在这里插入图片描述

进入前端项目文件夹，我的项目根目录是Web，因此，之后都是以Web来指代根目录。在Web文件夹下面新建一个Dockerfile文件，用记事本打开，粘贴以下内容：

# 使用官方的 Nginx 镜像作为基础镜像
FROM nginx:alpine# 删除默认的 Nginx 静态页面
RUN rm -rf /usr/share/nginx/html/*# 复制构建后的静态文件到 Nginx 的默认文件夹
COPY . /usr/share/nginx/html# 将 Nginx 配置文件复制到容器中 (可选)
#COPY ./nginx.conf /etc/nginx/nginx.conf# 暴露 Nginx 的默认端口
EXPOSE 80# 启动 Nginx
CMD ["nginx", "-g", "daemon off;"]

因为前端项目没有全局用到框架，因此没有打包，所以在Dockerfile文件中直接将当前目录，也就是web复制到容器的/usr/share/nginx/html文件夹下，以我浅薄的一些nginx知识解释一下，这个路径是用来存放各种静态资源的，包括我们的网页。

这个Dockerfile文件我们之前的博客也说过，是用于创建镜像的，因此，文件编写好之后我们就可以着手开始创建镜像了。
执行以下这条指令以创建镜像：

docker build -t my-frontend-app .

再执行下面这条指令以创建容器：

docker run -d -p 9999:80 --name frontend-container my-frontend-app

再执行下面这条指令以连接网络：

docker network connect qiuchuang frontend-container

因为之前那篇博客已经提到过后端容器和数据库容器都连接到了这个名为“qiuchuang”的网络，因此，如此一来，三个容器之间就可以通信了。

打开docker-desktop,可以查看到容器已经创建完成，点击相应的连接，就可以跳转到部署在本地的前端项目啦（当然，别忘了开启后端容器和数据库容器）。

🎉 小插曲

在部署的时候遇到两个小问题，在这里记录一下：

nacicat导入原项目的数据时会存在导入为空的情况，具体表现在“数据表在，但数据不全，甚至直接为空”，解决方法非常的简单粗暴，我尝试了一下直接ctrl+c和ctrl+v，没想到竟然可以，当然前提是表已经建立好了，可以直接粘贴数据进去，妙哉！
我的前端项目有一处涉及跳转到详情页的代码，这行代码的实现原理是通过改变链接实现的，问题来了，当时在vscode编写的时候链接路径中有一处是news-details,但是实际上文件夹是News-details,就只有首字母大小写不一样，因为宿主机是mac系统，因此大小写不敏感，但是我们的nginx是基于linux的alpine发行版，对大小写敏感，这导致我点击详情页链接会显示404 NOT FOUND,后来花了好一番功夫才找到这个问题所在，看来下次写代码要细心一点了（doge）。