一篇文章教會(huì)你部署vue項(xiàng)目到docker
更新時(shí)間：2022年04月05日 11:34:29 作者：mad?man
在前端開發(fā)中,部署項(xiàng)目是我們經(jīng)常發(fā)生的事情,下面這篇文章主要給大家介紹了關(guān)于部署vue項(xiàng)目到docker的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
讓我在5分鐘你教不會(huì)你把項(xiàng)目部署到docker，前提是你得服務(wù)器裝有docker，這里方便裝寶塔，大佬當(dāng)我沒說。
大致分為3步：
第一是弄一個(gè)nginx的配置文件然后構(gòu)建鏡像的時(shí)候把它放進(jìn)去取代原來的配置和寫Dockerfile生成鏡像的一些配置
第二是生成鏡像
第三是生成啟動(dòng)容器，ok開始，順便拋磚引玉
第一步
server {
listen 80;
server_name localhost; # docker服務(wù)宿主機(jī)的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/
第二步，生成鏡像
來到當(dāng)前文件夾，輸入命令 docker build -t yaohot .
注意圖上打錯(cuò)字了，yoahou，以圖片的命令為主
然后構(gòu)建鏡像完成
第三步，生成(啟動(dòng))一個(gè)容器
命令：docker run -d -p 86:80 --name houtai yaohot
ok
總結(jié)
到此這篇關(guān)于部署vue項(xiàng)目到docker的文章就介紹到這了,更多相關(guān)部署vue項(xiàng)目到docker內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue中props組件和slot標(biāo)簽的區(qū)別
props?和?slot?在?Vue?中的作用略有不同，props?更多地用于父子組件之間的數(shù)據(jù)傳遞，而?slot?則更多地用于組件的復(fù)用和擴(kuò)展。感興趣的同學(xué)可以參考閱讀2023-04-04
本文主要介紹了Vue框架中插槽的使用方法和應(yīng)用場(chǎng)景。通過具體實(shí)例分析，詳細(xì)講解了插槽的具體用法，幫助讀者深入理解Vue中插槽的使用和實(shí)現(xiàn)方式2023-05-05
這篇文章主要介紹了封裝一個(gè)Vue文件上傳組件案例詳情，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
Vue+axios 實(shí)現(xiàn)http攔截及路由攔截實(shí)例
這篇文章主要介紹了Vue+axios 實(shí)現(xiàn)http攔截及路由攔截 ,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
vue draggable resizable gorkys與v-chart使用與總結(jié)
這篇文章主要介紹了vue draggable resizable gorkys與v-chart使用與總結(jié),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-09-09
最近遇見一個(gè)需要上傳超大大文件的需求,所以下面這篇文章主要給大家介紹了關(guān)于前端大文件上傳與下載(分片上傳)的詳細(xì)過程,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
這篇文章主要給大家介紹了關(guān)于vue中銷毀定時(shí)器的幾種解決方案,銷毀定時(shí)器的操作一般是在beforeDestroy鉤子中進(jìn)行，根據(jù)定時(shí)器的數(shù)量不同可以有多種解決方法,需要的朋友可以參考下2023-08-08
Vue3中Vuex狀態(tài)管理學(xué)習(xí)實(shí)戰(zhàn)示例詳解
這篇文章主要為大家介紹了Vue3中Vuex狀態(tài)管理學(xué)習(xí)實(shí)戰(zhàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
今天小編就為大家分享一篇Vue的click事件防抖和節(jié)流處理詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue中使用Printjs插件實(shí)現(xiàn)打印功能
Print.js 主要是為了幫助我們直接在我們的應(yīng)用程序中打印 PDF 文件，無需離開界面，也無需使用嵌入，這篇文章主要介紹了Vue中使用Printjs插件實(shí)現(xiàn)打印功能,需要的朋友可以參考下2022-08-08