使用Docker容器部署Vue程序

更新時(shí)間：2022年03月26日 09:53:23 作者：.NET開(kāi)發(fā)菜鳥(niǎo)

這篇文章介紹了使用Docker容器部署Vue程序的方法，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一、安裝Nginx

我們部署Vue程序依賴(lài)Nginx，首先拉取Nginx的鏡像，這里使用Nginx最新的鏡像

docker pull nginx

如圖所示

我們查看鏡像

已經(jīng)有了nginx鏡像。

我們根據(jù)nginx鏡像運(yùn)行容器

docker run --name=nginx -d -p 4030:80 nginx

如圖所示

然后在瀏覽器里面訪(fǎng)問(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打開(kāi)項(xiàng)目，然后執(zhí)行運(yùn)行命令

npm run serve

如圖所示

在瀏覽器里面訪(fǎng)問(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文件，沒(méi)有后綴名，文件內(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覽器里面訪(fǎng)問(wèn)9020端口

可以看到Vue程序使用Docker部署就成功了。

到此這篇關(guān)于使用Docker容器部署Vue程序的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

docker 容器數(shù)據(jù)在盤(pán)與盤(pán)之間遷移方法
這篇文章主要介紹了docker 容器數(shù)據(jù)在盤(pán)與盤(pán)之間遷移方法,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
2024-04-04
使用Docker搭建minio的詳細(xì)圖文教程
本文介紹了Docker配置鏡像源的方法,以及如何在Docker中拉取鏡像和創(chuàng)建運(yùn)行容器,詳細(xì)說(shuō)明了使用MinIO創(chuàng)建Bucket、設(shè)置AccessKey、安裝和配置Cpolar以及SpringBoot集成MinIO的步驟,需要的朋友可以參考下
2024-10-10
深入理解docker的四種網(wǎng)絡(luò)方式
本篇文章主要介紹了深入理解docker的四種網(wǎng)絡(luò)方式，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-02-02
mysql8.4.0實(shí)現(xiàn)主從復(fù)制部署
主從復(fù)制是 MySQL 中一種用于實(shí)現(xiàn)數(shù)據(jù)冗余、提高可用性和性能的重要機(jī)制,本文主要介紹了mysql8.4.0實(shí)現(xiàn)主從復(fù)制部署,具有一定的參考價(jià)值,感興趣的可以了解一下
2024-07-07
詳解使用Dockerfile創(chuàng)建帶Apache服務(wù)的CentOS Docker鏡像
本篇文章主要介紹了使用Dockerfile創(chuàng)建帶Apache服務(wù)的CentOS Docker鏡像，具有一定的參考價(jià)值，有興趣的可以了解一下。
2016-12-12
windows docker環(huán)境設(shè)置注意事項(xiàng)
這篇文章主要介紹了windows docker環(huán)境設(shè)置注意事項(xiàng)的相關(guān)資料,需要的朋友可以參考下
2017-01-01
docker部署微信小程序自動(dòng)構(gòu)建發(fā)布和更新的詳細(xì)步驟
通過(guò) Jenkins 和 Docker 部署微信小程序,并實(shí)現(xiàn)自動(dòng)構(gòu)建、發(fā)布和版本更新,主要涉及到幾個(gè)步驟,下面給大家分享docker部署微信小程序自動(dòng)構(gòu)建發(fā)布和更新的詳細(xì)步驟,感興趣的朋友一起看看吧
2024-12-12
Docker Desktop安裝本地Kubernetes集群的實(shí)現(xiàn)
Kubernetes用于協(xié)調(diào)高度可用的計(jì)算機(jī)集群,本文主要介紹了Docker Desktop安裝本地Kubernetes集群的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下
2024-02-02
一文教會(huì)你用Docker打包Python運(yùn)行環(huán)境
Docker提供了容器級(jí)別的資源隔離,由于Python的外部依賴(lài)管理中存在的問(wèn)題,我們通常會(huì)使用virtualenv來(lái)對(duì)不同的項(xiàng)目創(chuàng)建其唯一的依賴(lài)環(huán)境,下面這篇文章主要給大家介紹了如何通過(guò)一篇文章教會(huì)你用Docker打包Python運(yùn)行環(huán)境的相關(guān)資料,需要的朋友可以參考下
2022-05-05
Docker搭建并啟動(dòng)Logstash的實(shí)現(xiàn)方式
這篇文章主要介紹了Docker搭建并啟動(dòng)Logstash的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-08-08