Vue項(xiàng)目打包成Docker鏡像包的簡(jiǎn)單步驟
要將 Vue 項(xiàng)目打包為 Docker 鏡像，可以按照下面的步驟進(jìn)行操作：
1、在 Vue 項(xiàng)目根目錄下創(chuàng)建一個(gè)名為 Dockerfile 的文件。
2、在 Dockerfile 中定義應(yīng)用程序所需的環(huán)境，例如 Node.js 運(yùn)行時(shí)和依賴(lài)項(xiàng)。
以下是一個(gè)示例：
# 使用 Node.js 18 作為基礎(chǔ)鏡像 FROM node:18 # 在容器中創(chuàng)建工作目錄 WORKDIR /app # 拷貝 package.json 和 package-lock.json 到工作目錄 COPY package*.json ./ # 安裝依賴(lài) RUN npm install # 拷貝整個(gè)應(yīng)用程序到工作目錄 COPY . . # 構(gòu)建應(yīng)用程序 RUN npm run build # 暴露端口 EXPOSE 80 # 運(yùn)行應(yīng)用程序 CMD [ "npm", "run", "start" ]
3、構(gòu)建 Docker 鏡像。在終端中導(dǎo)航到項(xiàng)目根目錄并運(yùn)行以下命令：
docker build -t your-image-name .
其中 your-image-name 是你要為鏡像取的名稱(chēng)。
4、運(yùn)行 Docker 鏡像。運(yùn)行以下命令：
docker run -it -p 8080:80 your-image-name
其中 -p 參數(shù)指定要綁定的主機(jī)端口和容器端口。在這個(gè)例子中，將主機(jī)端口 8080 綁定到容器端口 80。
補(bǔ)充：運(yùn)行前端鏡像容器
容器內(nèi)部的端口號(hào)是443 我使用--net=host，就不需要映射端口號(hào)了
如果防火墻開(kāi)著的話，需要放行443和80端口哦
docker run -d --privileged=true --name nss-web1.0 --restart always --net=host nss-web:1.0
--privileged=true #容器內(nèi)部擁有root權(quán)限 --restart always #自啟動(dòng) --net=host #網(wǎng)絡(luò)與宿主機(jī)保持一致
總結(jié)
到此這篇關(guān)于Vue項(xiàng)目打包成Docker鏡像包的文章就介紹到這了,更多相關(guān)Vue打包Docker鏡像包內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vuejs 用$emit與$on來(lái)進(jìn)行兄弟組件之間的數(shù)據(jù)傳輸通信
本篇文章主要介紹了Vuejs 用$emit 與 $on 來(lái)進(jìn)行兄弟組件之間的數(shù)據(jù)傳輸示例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下。2017-02-02
這篇文章主要介紹了安裝vue/cli后查看版本顯示找不到vue指令的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue3使用Proxy構(gòu)建高效響應(yīng)式數(shù)據(jù)的示例代碼
在 Vue 3 中,Proxy 主要用于 攔截對(duì)象的基本操作,包括 屬性讀?。╣et）、修改（set）、刪除（deleteProperty） 等,本文給大家介紹了Vue3使用Proxy構(gòu)建高效響應(yīng)式數(shù)據(jù)的操作教程,需要的朋友可以參考下2025-03-03
這篇文章主要介紹了vue為什么要封裝全局組件引入，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，感興趣的小伙伴可以參考一下2022-07-07
Vue2遞歸組件實(shí)現(xiàn)樹(shù)形菜單
這篇文章主要為大家詳細(xì)介紹了Vue2遞歸組件實(shí)現(xiàn)樹(shù)形菜單的相關(guān)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
vue子傳父關(guān)于.sync與$emit的實(shí)現(xiàn)
這篇文章主要介紹了vue子傳父關(guān)于.sync與$emit的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)一個(gè)漂亮、靈活、可復(fù)用的提示組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
在Vue中,有兩種類(lèi)型的自定義指令：局部指令和全局指令,但是除了這些指令?Vue也允許我們自己定義自己的指令,下面我們就來(lái)學(xué)習(xí)一下Vue中自定義指令的用法吧2023-08-08
Vue-scoped(局部)樣式使用方法及實(shí)例代碼
這篇文章主要介紹了Vue-scoped(局部)樣式使用方法及實(shí)例代碼，文中示例代碼介紹了的非常詳細(xì)感興趣的同學(xué)可以參考閱讀一下2023-05-05
關(guān)于在vue 中使用百度ueEditor編輯器的方法實(shí)例代碼
這篇文章主要介紹了在vue 中使用百度ueEditor編輯器的方法實(shí)例代碼 ,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09