使用Docker容器部署Vue程序
一、安裝Nginx
我們部署Vue程序依賴Nginx，首先拉取Nginx的鏡像，這里使用Nginx最新的鏡像
docker pull nginx
如圖所示
我們查看鏡像
已經(jīng)有了nginx鏡像。
我們根據(jù)nginx鏡像運(yùn)行容器
docker run --name=nginx -d -p 4030:80 nginx
如圖所示
然后在瀏覽器里面訪問(wèn)4030端口，驗(yàn)證容器是否運(yùn)行正常
出現(xiàn)上面的截圖，說(shuō)明容器運(yùn)行正常。
二、創(chuàng)建Vue程序
1、創(chuàng)建項(xiàng)目
我們使用下面的命令創(chuàng)建一個(gè)Vue程序，這里使用PowerShell創(chuàng)建
vue create docker-vue
創(chuàng)建過(guò)程省略，創(chuàng)建完成
使用VSCode打開項(xiàng)目，然后執(zhí)行運(yùn)行命令
npm run serve
如圖所示
在瀏覽器里面訪問(wèn)
2、編譯項(xiàng)目
項(xiàng)目創(chuàng)建完成以后，我們編譯項(xiàng)目
npm run build
如圖所示
編譯完成之后，在項(xiàng)目的根目錄下面就會(huì)生成一個(gè)dist文件夾，里面是編譯后的項(xiàng)目
3、添加Dockerfile文件
我們要構(gòu)建鏡像，必須依靠Dockerfile文件，我們?cè)陧?xiàng)目的根目錄下面創(chuàng)建一個(gè)Dockerfile文件，沒有后綴名，文件內(nèi)容如下
# 設(shè)置基礎(chǔ)鏡像，這里使用最新的nginx鏡像，前面已經(jīng)拉取過(guò)了 FROM nginx # 定義作者 Edison MAINTAINER Edison # 將dist文件中的內(nèi)容復(fù)制到 /usr/share/nginx/html/ 這個(gè)目錄下面 COPY dist/ /usr/share/nginx/html/
4、上傳文件
我們?cè)贚inux里面的demo文件夾下面創(chuàng)建vue文件夾，然后把dist文件夾和Dockerfile文件上傳到該目錄下
5、構(gòu)建鏡像
文件上傳以后，我們構(gòu)建Vue程序的鏡像
docker build -t dockervue .
如圖所示
可以看到鏡像構(gòu)建成功了。
6、運(yùn)行容器
我們根據(jù)上步構(gòu)建的鏡像去運(yùn)行鏡像
docker run --name=dockervue -d -p 9020:80 dockervue
如圖所示
可以看到容器在運(yùn)行，我們?cè)跒g覽器里面訪問(wèn)9020端口
可以看到Vue程序使用Docker部署就成功了。
到此這篇關(guān)于使用Docker容器部署Vue程序的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
使用docker在服務(wù)器運(yùn)行多個(gè)php版本
這篇文章主要介紹了利用docker在服務(wù)器運(yùn)行多個(gè)版本php,本文以php7為例，通過(guò)實(shí)例代碼的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
本文主要介紹了Docker使用數(shù)據(jù)容器的具體示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
docker 容器自定義 hosts 網(wǎng)絡(luò)訪問(wèn)操作
這篇文章主要介紹了docker 容器自定義 hosts 網(wǎng)絡(luò)訪問(wèn)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2021-03-03
今天通過(guò)本文給大家介紹docker配置Runner容器的方法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-11-11
遠(yuǎn)程docker服務(wù)器攜帶證書連接的實(shí)現(xiàn)方法
本文主要介紹了遠(yuǎn)程docker服務(wù)器攜帶證書連接的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
如何利用Docker部署一個(gè)簡(jiǎn)單的springboot項(xiàng)目
這篇文章主要介紹了如何利用Docker部署一個(gè)簡(jiǎn)單的springboot項(xiàng)目,本文通過(guò)實(shí)例圖文實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
docker-compose 配置spring環(huán)境的方法步驟
這篇文章主要介紹了docker-compose 配置spring環(huán)境的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
win7環(huán)境下Docker快速構(gòu)建及阿里云容器加速配置詳解
這篇文章主要介紹了win7環(huán)境下Docker快速構(gòu)建及阿里云容器加速配置詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Docker容器與宿主機(jī)相互訪問(wèn)更方便的方法
Docker是當(dāng)今使用范圍最廣的開源容器技術(shù)之一,具有高效易用的優(yōu)點(diǎn),然而如果使用Docker時(shí)采取不當(dāng)安全策略,則可能導(dǎo)致系統(tǒng)面臨安全威脅,這篇文章主要給大家介紹了關(guān)于Docker容器與宿主機(jī)相互訪問(wèn)更方便的方法,需要的朋友可以參考下2023-05-05
通過(guò)Dockerfile構(gòu)建Docker鏡像的方法步驟
這篇文章主要介紹了通過(guò)Dockerfile構(gòu)建Docker鏡像的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02