Vue項(xiàng)目打包成Docker鏡像包的簡單步驟
要將 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í)和依賴項(xiàng)。
以下是一個(gè)示例:
# 使用 Node.js 18 作為基礎(chǔ)鏡像 FROM node:18 # 在容器中創(chuàng)建工作目錄 WORKDIR /app # 拷貝 package.json 和 package-lock.json 到工作目錄 COPY package*.json ./ # 安裝依賴 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
是你要為鏡像取的名稱。
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)部的端口號是443 我使用--net=host
,就不需要映射端口號了
如果防火墻開著的話,需要放行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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue3+vite兼容低版本的白屏問題詳解(安卓7/ios11)
這篇文章主要給大家介紹了關(guān)于vue3+vite兼容低版本的白屏問題的相關(guān)資料,還給大家介紹了vue打包項(xiàng)目以后白屏和圖片加載不出來問題的解決方法,需要的朋友可以參考下2022-12-12elementUI同一頁面展示多個(gè)Dialog的實(shí)現(xiàn)
這篇文章主要介紹了elementUI同一頁面展示多個(gè)Dialog的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11vue富文本框(插入文本、圖片、視頻)的使用及問題小結(jié)
這篇文章主要介紹了vue富文本框(插入文本、圖片、視頻)的使用及問題小結(jié),需要的朋友可以參考下2018-08-08vue?使用addRoutes動(dòng)態(tài)添加路由及刷新頁面跳轉(zhuǎn)404路由的問題解決方案
我自己使用addRoutes動(dòng)態(tài)添加的路由頁面,使用router-link標(biāo)簽可以跳轉(zhuǎn),但是一刷新就會(huì)自動(dòng)跳轉(zhuǎn)到我定義的通配符?*?指向的404路由頁面,這說明沒有找到指定路由才跳到404路由的,這樣的情況如何處理呢,下面小編給大家分享解決方案,一起看看吧2023-10-10vue2中的el-select組件數(shù)據(jù)太多,如何實(shí)現(xiàn)滾動(dòng)加載數(shù)據(jù)效果
這篇文章主要介紹了vue2中的el-select組件數(shù)據(jù)太多,如何實(shí)現(xiàn)滾動(dòng)加載數(shù)據(jù)效果,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04Vue使用vm.$set()解決對象新增屬性不能響應(yīng)的問題
這篇文章主要介紹了Vue使用vm.$set()解決對象新增屬性不能響應(yīng)的問題,為了解決這個(gè)問題,Vue提供了一個(gè)特殊的方法vm.$set(object, propertyName, value),也可以使用全局的Vue.set(object, propertyName, value)方法,需要的朋友可以參考下2023-05-05vue 使用lodash實(shí)現(xiàn)對象數(shù)組深拷貝操作
這篇文章主要介紹了vue 使用lodash實(shí)現(xiàn)對象數(shù)組深拷貝操作,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09