Vue項目打包成Docker鏡像包的簡單步驟
要將 Vue 項目打包為 Docker 鏡像,可以按照下面的步驟進行操作:
1、在 Vue 項目根目錄下創(chuàng)建一個名為 Dockerfile 的文件。
2、在 Dockerfile 中定義應用程序所需的環(huán)境,例如 Node.js 運行時和依賴項。
以下是一個示例:
# 使用 Node.js 18 作為基礎鏡像 FROM node:18 # 在容器中創(chuàng)建工作目錄 WORKDIR /app # 拷貝 package.json 和 package-lock.json 到工作目錄 COPY package*.json ./ # 安裝依賴 RUN npm install # 拷貝整個應用程序到工作目錄 COPY . . # 構建應用程序 RUN npm run build # 暴露端口 EXPOSE 80 # 運行應用程序 CMD [ "npm", "run", "start" ]
3、構建 Docker 鏡像。在終端中導航到項目根目錄并運行以下命令:
docker build -t your-image-name .
其中 your-image-name
是你要為鏡像取的名稱。
4、運行 Docker 鏡像。運行以下命令:
docker run -it -p 8080:80 your-image-name
其中 -p
參數(shù)指定要綁定的主機端口和容器端口。在這個例子中,將主機端口 8080 綁定到容器端口 80。
補充:運行前端鏡像容器
容器內部的端口號是443 我使用--net=host
,就不需要映射端口號了
如果防火墻開著的話,需要放行443和80端口哦
docker run -d --privileged=true --name nss-web1.0 --restart always --net=host nss-web:1.0
--privileged=true #容器內部擁有root權限 --restart always #自啟動 --net=host #網絡與宿主機保持一致
總結
到此這篇關于Vue項目打包成Docker鏡像包的文章就介紹到這了,更多相關Vue打包Docker鏡像包內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue3+vite兼容低版本的白屏問題詳解(安卓7/ios11)
這篇文章主要給大家介紹了關于vue3+vite兼容低版本的白屏問題的相關資料,還給大家介紹了vue打包項目以后白屏和圖片加載不出來問題的解決方法,需要的朋友可以參考下2022-12-12elementUI同一頁面展示多個Dialog的實現(xiàn)
這篇文章主要介紹了elementUI同一頁面展示多個Dialog的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-11-11vue?使用addRoutes動態(tài)添加路由及刷新頁面跳轉404路由的問題解決方案
我自己使用addRoutes動態(tài)添加的路由頁面,使用router-link標簽可以跳轉,但是一刷新就會自動跳轉到我定義的通配符?*?指向的404路由頁面,這說明沒有找到指定路由才跳到404路由的,這樣的情況如何處理呢,下面小編給大家分享解決方案,一起看看吧2023-10-10vue2中的el-select組件數(shù)據(jù)太多,如何實現(xiàn)滾動加載數(shù)據(jù)效果
這篇文章主要介紹了vue2中的el-select組件數(shù)據(jù)太多,如何實現(xiàn)滾動加載數(shù)據(jù)效果,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04vue 使用lodash實現(xiàn)對象數(shù)組深拷貝操作
這篇文章主要介紹了vue 使用lodash實現(xiàn)對象數(shù)組深拷貝操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09