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