Vue專案打包成docker鏡像部署
一、介紹
我們部署Vue專案，可以build之后，直接放到nginx下面即可，今天給大家介紹創建docker鏡像，使用docker鏡像啟動容器運行部署Vue專案的方式，可以嘗試嘗試，原理和使用nginx部署一樣，不過是使用的docker容器而已，內部還是使用的是nginx作為基礎鏡像，
二、docker安裝
docker安裝就不介紹了，不懂的伙伴可以去看我的docker安裝文章，之前也寫過關于docker介紹、安裝的文章，不了解如何安裝使用的可以看以往的文章，
三、撰寫DockerFile
docker安裝完成之后，在我們需要部署的專案目錄中新建檔案dockerFile，檔案內容如下：
FROM nginx:latest
LABEL Author xpy
COPY build /usr/share/nginx/html
第一行：設定基礎鏡像，基礎鏡像使用nginx
第二行：作者資訊
第三行：將build檔案夾下面的內容拷貝到/usr/share/nginx/html目錄下面（nginx的默認專案路徑），其中build檔案夾有可能是dist檔案夾，如果沒有，重新npm run build一下就出來了,也就是我們Vue專案打包之后我們正常使用nginx是拷貝過去的檔案夾，
四、創建鏡像
docker build -t xxx .
注意：后面的.不能省略，鏡像創建成功之后使用docker images即可看到自己創建的鏡像
五、啟動鏡像
docker run -d --name xxx -p 8888:80 xxx
啟動命令說明：
-d：容器后臺啟動
—name : 容器名稱
-p 8888:80 ：將nginx容器的80埠映射到主機的8888埠，我們訪問時直接訪問主機ip+映射到主機的埠，這里是8888，如果有路徑，后面還要帶上路徑，
xxx : 我們剛剛創建的自己的鏡像的名稱
六、總結
以上步驟即可幫助我們使用docker容器部署Vue專案，原理其實和我們使用nginx部署Vue是一樣的，我們打包自己的鏡像使用的基礎鏡像也是nginx，感興趣的小伙伴可以自己動手嘗試嘗試，
原文鏈接:https://monkey.blog.xpyvip.top/archives/vue-xiang-mu-da-bao-cheng-docker-jing-xiang-bu-shu
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/517647.html
標籤：其他
下一篇：前端首屏渲染時間的極致優化