使用Docker容器部署Vue程序
更新時間：2022年03月26日 09:53:23 作者：.NET開發(fā)菜鳥
這篇文章介紹了使用Docker容器部署Vue程序的方法，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
一、安裝Nginx
我們部署Vue程序依賴Nginx，首先拉取Nginx的鏡像，這里使用Nginx最新的鏡像
docker pull nginx
如圖所示
我們查看鏡像
已經有了nginx鏡像。
我們根據nginx鏡像運行容器
docker run --name=nginx -d -p 4030:80 nginx
如圖所示
然后在瀏覽器里面訪問4030端口，驗證容器是否運行正常
出現上面的截圖，說明容器運行正常。
二、創(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文件，沒有后綴名，文件內容如下
# 設置基礎鏡像，這里使用最新的nginx鏡像，前面已經拉取過了 FROM nginx # 定義作者 Edison MAINTAINER Edison # 將dist文件中的內容復制到 /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、運行容器
我們根據上步構建的鏡像去運行鏡像
docker run --name=dockervue -d -p 9020:80 dockervue
如圖所示
可以看到容器在運行，我們在瀏覽器里面訪問9020端口
可以看到Vue程序使用Docker部署就成功了。
到此這篇關于使用Docker容器部署Vue程序的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了利用docker在服務器運行多個版本php,本文以php7為例，通過實例代碼的形式給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
本文主要介紹了Docker使用數據容器的具體示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
這篇文章主要介紹了docker 容器自定義 hosts 網絡訪問操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2021-03-03
今天通過本文給大家介紹docker配置Runner容器的方法，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-11-11
本文主要介紹了遠程docker服務器攜帶證書連接的實現方法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要介紹了如何利用Docker部署一個簡單的springboot項目,本文通過實例圖文實例代碼相結合給大家介紹的非常詳細,需要的朋友可以參考下2024-02-02
docker-compose 配置spring環(huán)境的方法步驟
這篇文章主要介紹了docker-compose 配置spring環(huán)境的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
win7環(huán)境下Docker快速構建及阿里云容器加速配置詳解
這篇文章主要介紹了win7環(huán)境下Docker快速構建及阿里云容器加速配置詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
Docker是當今使用范圍最廣的開源容器技術之一,具有高效易用的優(yōu)點,然而如果使用Docker時采取不當安全策略,則可能導致系統(tǒng)面臨安全威脅,這篇文章主要給大家介紹了關于Docker容器與宿主機相互訪問更方便的方法,需要的朋友可以參考下2023-05-05
這篇文章主要介紹了通過Dockerfile構建Docker鏡像的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-02-02