使用Docker容器部署Vue程序
一、安裝Nginx
我們部署Vue程序依賴Nginx，首先拉取Nginx的鏡像，這里使用Nginx最新的鏡像
docker pull nginx
如圖所示
我們查看鏡像
已經(jīng)有了nginx鏡像。
我們根據(jù)nginx鏡像運行容器
docker run --name=nginx -d -p 4030:80 nginx
如圖所示
然后在瀏覽器里面訪問4030端口，驗證容器是否運行正常
出現(xiàn)上面的截圖，說明容器運行正常。
二、創(chuàng)建Vue程序
1、創(chuàng)建項目
我們使用下面的命令創(chuàng)建一個Vue程序，這里使用PowerShell創(chuàng)建
vue create docker-vue
創(chuàng)建過程省略，創(chuàng)建完成
使用VSCode打開項目，然后執(zhí)行運行命令
npm run serve
如圖所示
在瀏覽器里面訪問
2、編譯項目
項目創(chuàng)建完成以后，我們編譯項目
npm run build
如圖所示
編譯完成之后，在項目的根目錄下面就會生成一個dist文件夾，里面是編譯后的項目
3、添加Dockerfile文件
我們要構建鏡像，必須依靠Dockerfile文件，我們在項目的根目錄下面創(chuàng)建一個Dockerfile文件，沒有后綴名，文件內(nèi)容如下
# 設置基礎鏡像，這里使用最新的nginx鏡像，前面已經(jīng)拉取過了 FROM nginx # 定義作者 Edison MAINTAINER Edison # 將dist文件中的內(nèi)容復制到 /usr/share/nginx/html/ 這個目錄下面 COPY dist/ /usr/share/nginx/html/
4、上傳文件
我們在Linux里面的demo文件夾下面創(chuàng)建vue文件夾，然后把dist文件夾和Dockerfile文件上傳到該目錄下
5、構建鏡像
文件上傳以后，我們構建Vue程序的鏡像
docker build -t dockervue .
如圖所示
可以看到鏡像構建成功了。
6、運行容器
我們根據(jù)上步構建的鏡像去運行鏡像
docker run --name=dockervue -d -p 9020:80 dockervue
如圖所示
可以看到容器在運行，我們在瀏覽器里面訪問9020端口
可以看到Vue程序使用Docker部署就成功了。
到此這篇關于使用Docker容器部署Vue程序的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
docker 容器數(shù)據(jù)在盤與盤之間遷移方法
這篇文章主要介紹了docker 容器數(shù)據(jù)在盤與盤之間遷移方法,本文給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-04-04
本文介紹了Docker配置鏡像源的方法,以及如何在Docker中拉取鏡像和創(chuàng)建運行容器,詳細說明了使用MinIO創(chuàng)建Bucket、設置AccessKey、安裝和配置Cpolar以及SpringBoot集成MinIO的步驟,需要的朋友可以參考下2024-10-10
本篇文章主要介紹了深入理解docker的四種網(wǎng)絡方式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
主從復制是 MySQL 中一種用于實現(xiàn)數(shù)據(jù)冗余、提高可用性和性能的重要機制,本文主要介紹了mysql8.4.0實現(xiàn)主從復制部署,具有一定的參考價值,感興趣的可以了解一下2024-07-07
詳解使用Dockerfile創(chuàng)建帶Apache服務的CentOS Docker鏡像
本篇文章主要介紹了使用Dockerfile創(chuàng)建帶Apache服務的CentOS Docker鏡像，具有一定的參考價值，有興趣的可以了解一下。2016-12-12
這篇文章主要介紹了windows docker環(huán)境設置注意事項的相關資料,需要的朋友可以參考下2017-01-01
docker部署微信小程序自動構建發(fā)布和更新的詳細步驟
通過 Jenkins 和 Docker 部署微信小程序,并實現(xiàn)自動構建、發(fā)布和版本更新,主要涉及到幾個步驟,下面給大家分享docker部署微信小程序自動構建發(fā)布和更新的詳細步驟,感興趣的朋友一起看看吧2024-12-12
Docker Desktop安裝本地Kubernetes集群的實現(xiàn)
Kubernetes用于協(xié)調(diào)高度可用的計算機集群,本文主要介紹了Docker Desktop安裝本地Kubernetes集群的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2024-02-02
一文教會你用Docker打包Python運行環(huán)境
Docker提供了容器級別的資源隔離,由于Python的外部依賴管理中存在的問題,我們通常會使用virtualenv來對不同的項目創(chuàng)建其唯一的依賴環(huán)境,下面這篇文章主要給大家介紹了如何通過一篇文章教會你用Docker打包Python運行環(huán)境的相關資料,需要的朋友可以參考下2022-05-05
Docker搭建并啟動Logstash的實現(xiàn)方式
這篇文章主要介紹了Docker搭建并啟動Logstash的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-08-08