dockerfile部署前端vue打包的ist文件實戰(zhàn)
在Dockerfile中部署前端Vue打包的dist文件
創(chuàng)建一個Dockerfil
在Dockerfile中部署前端Vue打包的dist文件,你需要創(chuàng)建一個Dockerfile,然后在其中定義如何構(gòu)建你的Docker鏡像。
以下是一個基本的示例:
首先,你需要在你的項目根目錄下創(chuàng)建一個Dockerfile文件。這個文件會告訴Docker如何構(gòu)建你的應用的鏡像。
# 基于Node的鏡像,用于構(gòu)建我們的前端代碼 FROM node:lts-alpine as build-stage # 設置工作目錄 WORKDIR /app # 復制package.json和package-lock.json COPY package*.json ./ # 安裝依賴 RUN npm install # 復制項目文件 COPY . . # 打包項目 RUN npm run build
創(chuàng)建一個用于運行你的應用的Dockerfile
然后,你需要創(chuàng)建一個用于運行你的應用的Dockerfile。這個文件會從構(gòu)建階段復制你的打包文件,并使用nginx來提供這些文件。
# 基于Nginx的鏡像,用于運行我們的應用 FROM nginx:stable-alpine as production-stage # 從構(gòu)建階段復制打包文件 COPY --from=build-stage /app/dist /usr/share/nginx/html # 暴露80端口 EXPOSE 80 # 啟動Nginx CMD ["nginx", "-g", "daemon off;"]
最后,你可以使用以下命令來構(gòu)建和運行你的Docker鏡像:
docker build -t vue-app . docker run -it -p 8080:80 --rm --name vue-app-container vue-app
這樣,你的Vue應用就會在Docker容器中運行,你可以通過訪問http://localhost:8080來查看你的應用。
以上就是dockerfile部署前端vue打包的ist文件實戰(zhàn)的詳細內(nèi)容,更多關(guān)于dockerfile部署vue打包dist的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
harbor可視化私有鏡像倉庫環(huán)境及服務部署示例
這篇文章主要為大家介紹了harbor可視化私有鏡像倉庫環(huán)境及服務部署示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步早日升職加薪2022-04-04Docker網(wǎng)絡原理及自定義網(wǎng)絡詳細解析
一般使用自定義網(wǎng)絡,自定義網(wǎng)絡使用network創(chuàng)建,創(chuàng)建時可以指定子網(wǎng)網(wǎng)段及網(wǎng)關(guān)等信息,在創(chuàng)建并啟動容器時指定使用的網(wǎng)絡,今天通過本文給大家介紹Docker網(wǎng)絡原理及自定義網(wǎng)絡的相關(guān)知識,感興趣的朋友一起看看吧2021-05-05關(guān)于docker容器優(yōu)雅退出的問題詳解
在Docker大火的今天,我們能夠非常方便的使用容器打包我們的應用程序,并且將它在我們的服務器上部署并運行起來。而下面這篇文章主要給大家介紹了關(guān)于docker容器如何優(yōu)雅退出的問題,需要的朋友可以參考下。2017-09-09Docker安裝阿里云服務器和在虛擬機安裝遇到的坑(問題小結(jié))
這篇文章主要介紹了Docker安裝阿里云服務器和在虛擬機安裝遇到的坑,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-03-03Docker創(chuàng)建一個mysql容器并保存為本地鏡像
本篇文章主要介紹了Docker創(chuàng)建一個mysql容器并保存為本地鏡像 ,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-05-05