快捷導(dǎo)航

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

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

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

?? 前言

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

?? 編寫(xiě)Dockerfile文件

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

在這里插入圖片描述

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

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

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

# 復(fù)制構(gòu)建后的靜態(tài)文件到 Nginx 的默認(rèn)文件夾
COPY . /usr/share/nginx/html

# 將 Nginx 配置文件復(fù)制到容器中 (可選)
#COPY ./nginx.conf /etc/nginx/nginx.conf

# 暴露 Nginx 的默認(rèn)端口
EXPOSE 80

# 啟動(dòng) Nginx
CMD ["nginx", "-g", "daemon off;"]

因?yàn)榍岸隧?xiàng)目沒(méi)有全局用到框架，因此沒(méi)有打包，所以在Dockerfile文件中直接將當(dāng)前目錄，也就是web復(fù)制到容器的/usr/share/nginx/html文件夾下，以我淺薄的一些nginx知識(shí)解釋一下，這個(gè)路徑是用來(lái)存放各種靜態(tài)資源的，包括我們的網(wǎng)頁(yè)。

這個(gè)Dockerfile文件我們之前的博客也說(shuō)過(guò)，是用于創(chuàng)建鏡像的，因此，文件編寫(xiě)好之后我們就可以著手開(kāi)始創(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)絡(luò)：

docker network connect qiuchuang frontend-container

因?yàn)橹澳瞧┛鸵呀?jīng)提到過(guò)后端容器和數(shù)據(jù)庫(kù)容器都連接到了這個(gè)名為“qiuchuang”的網(wǎng)絡(luò)，因此，如此一來(lái)，三個(gè)容器之間就可以通信了。

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

?? 小插曲

在部署的時(shí)候遇到兩個(gè)小問(wèn)題，在這里記錄一下：

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

?? 尾聲

目前使用這種原始的方法去部署多容器項(xiàng)目還是挺麻煩的，因此后續(xù)肯定是還要學(xué)習(xí)docker-compose的知識(shí)的，過(guò)幾天還會(huì)推出相關(guān)的教程，大家可以期待一下，我們下期再見(jiàn)??。

到此這篇關(guān)于docker打包前端項(xiàng)目的實(shí)現(xiàn)示例的文章就介紹到這了,更多相關(guān)docker打包前端項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: