一篇文章教會你部署vue項目到docker
更新時間：2022年04月05日 11:34:29 作者：mad?man
在前端開發(fā)中,部署項目是我們經(jīng)常發(fā)生的事情,下面這篇文章主要給大家介紹了關(guān)于部署vue項目到docker的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
讓我在5分鐘你教不會你把項目部署到docker，前提是你得服務(wù)器裝有docker，這里方便裝寶塔，大佬當我沒說。
大致分為3步：
第一是弄一個nginx的配置文件然后構(gòu)建鏡像的時候把它放進去取代原來的配置和寫Dockerfile生成鏡像的一些配置
第二是生成鏡像
第三是生成啟動容器，ok開始，順便拋磚引玉
第一步
server {
listen 80;
server_name localhost; # docker服務(wù)宿主機的ip
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}寫docker鏡像配置
FROM nginx MAINTAINER yaohuowang RUN rm /etc/nginx/conf.d/default.conf ADD default.conf /etc/nginx/conf.d/ COPY dist/ /usr/share/nginx/html/
第二步，生成鏡像
來到當前文件夾，輸入命令 docker build -t yaohot .
注意圖上打錯字了，yoahou，以圖片的命令為主
然后構(gòu)建鏡像完成
第三步，生成(啟動)一個容器
命令：docker run -d -p 86:80 --name houtai yaohot
ok
總結(jié)
到此這篇關(guān)于部署vue項目到docker的文章就介紹到這了,更多相關(guān)部署vue項目到docker內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue項目中jsonp跨域獲取qq音樂首頁推薦問題，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-05-05
Vue $router.push打開新窗口的實現(xiàn)方法
在Vue中,$router.push方法默認不支持在新窗口中打開頁面,但通過結(jié)合window.open方法和$router.resolve方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-09-09
Vue mixins提供了一個非常靈活的方式來分發(fā)Vue組件中的可復(fù)用功能,通過全局混入和局部混入,可以將預(yù)定義的方法、數(shù)據(jù)等混合到Vue組件中,這種技術(shù)可以簡化代碼,提高開發(fā)效率,并允許在不同組件間共享功能2024-09-09
這篇文章主要介紹了Vue SPA 如何解決瀏覽器緩存問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue3.0?移動端二次封裝van-uploader實現(xiàn)上傳圖片(vant組件庫)
這篇文章主要介紹了vue3.0?移動端二次封裝van-uploader上傳圖片組件,此功能最多上傳6張圖片，并可以實現(xiàn)本地預(yù)覽，實現(xiàn)代碼簡單易懂，需要的朋友可以參考下2022-05-05
這篇文章主要介紹了 詳解在vue使用weixin-js-sdk常見使用方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
vue實現(xiàn)元素拖動并互換位置的實現(xiàn)代碼
在使用Vue的場景下,需要實現(xiàn)對元素進行拖動交換位置,接下來通過本文給大家介紹vue實現(xiàn)元素拖動并互換位置的實現(xiàn)代碼,需要的朋友可以參考下2023-09-09
這篇文章主要為大家展示了一個demo，即利用Vue和OpenLayer在地圖上面添加風場效果，文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下2022-04-04
這篇文章主要為大家介紹了petite?vue的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要介紹了vue項目如何引入json數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10