一、前言
本篇文章主要介紹如何使用Docker部署Vue程序。
二、安裝Nginx
我們部署Vue程序依賴Nginx，首先拉取Nginx的鏡像，這里使用Nginx最新的鏡像
docker pull nginx
如圖所示
我們查看鏡像
已經有了nginx鏡像。
我們根據nginx鏡像運行容器
docker run --name=nginx -d -p 4030:80 nginx
如圖所示
然后在瀏覽器里面訪問4030端口，驗證容器是否運行正常
出現上面的截圖，說明容器運行正常。
三、創建Vue程序
1、創建項目
我們使用下面的命令創建一個Vue程序，這里使用PowerShell創建
vue create docker-vue
創建過程省略，創建完成
使用VSCode打開項目，然后執行運行命令
npm run serve
如圖所示
在瀏覽器里面訪問
2、編譯項目
項目創建完成以后，我們編譯項目
npm run build
如圖所示
編譯完成之后，在項目的根目錄下面就會生成一個dist文件夾，里面是編譯后的項目
3、添加Dockerfile文件
我們要構建鏡像，必須依靠Dockerfile文件，我們在項目的根目錄下面創建一個Dockerfile文件，沒有后綴名，文件內容如下
# 設置基礎鏡像，這里使用最新的nginx鏡像，前面已經拉取過了 FROM nginx # 定義作者 Edison MAINTAINER Edison # 將dist文件中的內容復制到 /usr/share/nginx/html/ 這個目錄下面 COPY dist/ /usr/share/nginx/html/
4、上傳文件
我們在Linux里面的demo文件夾下面創建vue文件夾，然后把dist文件夾和Dockerfile文件上傳到該目錄下
5、構建鏡像
文件上傳以后，我們構建Vue程序的鏡像
docker build -t dockervue .
如圖所示
可以看到鏡像構建成功了。
6、運行容器
我們根據上步構建的鏡像去運行鏡像
docker run --name=dockervue -d -p 9020:80 dockervue
如圖所示
可以看到容器在運行，我們在瀏覽器里面訪問9020端口
可以看到Vue程序使用Docker部署就成功了。