一篇文章教會你部署vue項目到docker

更新時間：2022年04月05日 11:34:29 作者：mad?man

在前端開發(fā)中,部署項目是我們經(jīng)常發(fā)生的事情,下面這篇文章主要給大家介紹了關(guān)于部署vue項目到docker的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

第一步

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 .

注意圖上打錯字了，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中props組件和slot標(biāo)簽的區(qū)別
props?和?slot?在?Vue?中的作用略有不同，props?更多地用于父子組件之間的數(shù)據(jù)傳遞，而?slot?則更多地用于組件的復(fù)用和擴(kuò)展。感興趣的同學(xué)可以參考閱讀
2023-04-04
Vue插槽具體用法及實例分析
本文主要介紹了Vue框架中插槽的使用方法和應(yīng)用場景。通過具體實例分析，詳細(xì)講解了插槽的具體用法，幫助讀者深入理解Vue中插槽的使用和實現(xiàn)方式
2023-05-05
封裝一個Vue文件上傳組件案例詳情
這篇文章主要介紹了封裝一個Vue文件上傳組件案例詳情，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
2022-08-08
Vue+axios 實現(xiàn)http攔截及路由攔截實例
這篇文章主要介紹了Vue+axios 實現(xiàn)http攔截及路由攔截 ,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-04-04
vue draggable resizable gorkys與v-chart使用與總結(jié)
這篇文章主要介紹了vue draggable resizable gorkys與v-chart使用與總結(jié),本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-09-09
前端大文件上傳與下載(分片上傳)的詳細(xì)過程
最近遇見一個需要上傳超大大文件的需求,所以下面這篇文章主要給大家介紹了關(guān)于前端大文件上傳與下載(分片上傳)的詳細(xì)過程,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11
vue中銷毀定時器的幾種解決方案
這篇文章主要給大家介紹了關(guān)于vue中銷毀定時器的幾種解決方案,銷毀定時器的操作一般是在beforeDestroy鉤子中進(jìn)行，根據(jù)定時器的數(shù)量不同可以有多種解決方法,需要的朋友可以參考下
2023-08-08
Vue3中Vuex狀態(tài)管理學(xué)習(xí)實戰(zhàn)示例詳解
這篇文章主要為大家介紹了Vue3中Vuex狀態(tài)管理學(xué)習(xí)實戰(zhàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-06-06
Vue的click事件防抖和節(jié)流處理詳解
今天小編就為大家分享一篇Vue的click事件防抖和節(jié)流處理詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
Vue中使用Printjs插件實現(xiàn)打印功能
Print.js 主要是為了幫助我們直接在我們的應(yīng)用程序中打印 PDF 文件，無需離開界面，也無需使用嵌入，這篇文章主要介紹了Vue中使用Printjs插件實現(xiàn)打印功能,需要的朋友可以參考下
2022-08-08