docker打包前端項目的實現(xiàn)示例

更新時間：2024年09月12日 09:22:38 作者：秋窗7

本文介紹了如何將前端項目打包到Docker容器中,包括編寫Dockerfile文件、創(chuàng)建鏡像和容器以及解決部署過程中遇到的問題,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

?? 前言

之前有出過一期打包后端項目和數(shù)據(jù)庫的教程，現(xiàn)在填個坑，出一期打包前端項目的教程，廢話不多說，我們直接進入正題。

?? 編寫Dockerfile文件

老規(guī)矩，先描述項目結(jié)構(gòu)，結(jié)構(gòu)圖如下：

在這里插入圖片描述

進入前端項目文件夾，我的項目根目錄是Web，因此，之后都是以Web來指代根目錄。在Web文件夾下面新建一個Dockerfile文件，用記事本打開，粘貼以下內(nèi)容：

# 使用官方的 Nginx 鏡像作為基礎鏡像
FROM nginx:alpine

# 刪除默認的 Nginx 靜態(tài)頁面
RUN rm -rf /usr/share/nginx/html/*

# 復制構(gòu)建后的靜態(tài)文件到 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知識解釋一下，這個路徑是用來存放各種靜態(tài)資源的，包括我們的網(wǎng)頁。

這個Dockerfile文件我們之前的博客也說過，是用于創(chuàng)建鏡像的，因此，文件編寫好之后我們就可以著手開始創(chuàng)建鏡像了。
執(zhí)行以下這條指令以創(chuàng)建鏡像：

docker build -t my-frontend-app .

再執(zhí)行下面這條指令以創(chuàng)建容器：

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

再執(zhí)行下面這條指令以連接網(wǎng)絡：

docker network connect qiuchuang frontend-container

因為之前那篇博客已經(jīng)提到過后端容器和數(shù)據(jù)庫容器都連接到了這個名為“qiuchuang”的網(wǎng)絡，因此，如此一來，三個容器之間就可以通信了。

打開docker-desktop,可以查看到容器已經(jīng)創(chuàng)建完成，點擊相應的連接，就可以跳轉(zhuǎn)到部署在本地的前端項目啦（當然，別忘了開啟后端容器和數(shù)據(jù)庫容器）。

?? 小插曲

在部署的時候遇到兩個小問題，在這里記錄一下：

nacicat導入原項目的數(shù)據(jù)時會存在導入為空的情況，具體表現(xiàn)在“數(shù)據(jù)表在，但數(shù)據(jù)不全，甚至直接為空”，解決方法非常的簡單粗暴，我嘗試了一下直接ctrl+c和ctrl+v，沒想到竟然可以，當然前提是表已經(jīng)建立好了，可以直接粘貼數(shù)據(jù)進去，妙哉！
我的前端項目有一處涉及跳轉(zhuǎn)到詳情頁的代碼，這行代碼的實現(xiàn)原理是通過改變鏈接實現(xiàn)的，問題來了，當時在vscode編寫的時候鏈接路徑中有一處是news-details,但是實際上文件夾是News-details,就只有首字母大小寫不一樣，因為宿主機是mac系統(tǒng)，因此大小寫不敏感，但是我們的nginx是基于linux的alpine發(fā)行版，對大小寫敏感，這導致我點擊詳情頁鏈接會顯示404 NOT FOUND,后來花了好一番功夫才找到這個問題所在，看來下次寫代碼要細心一點了（doge）。