docker打包前端项目的实现示例

🎉 前言

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

🎉 编写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）。

🎉 尾声

目前使用这种原始的方法去部署多容器项目还是挺麻烦的，因此后续肯定是还要学习docker-compose的知识的，过几天还会推出相关的教程，大家可以期待一下，我们下期再见👋。

到此这篇关于docker打包前端项目的实现示例的文章就介绍到这了,更多相关docker打包前端项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！