1.先在本地將vue專案建立，並且確定能跑起來使用npm run serve

ctrl+滑鼠左鍵在本地檢視。

然後使用npm run build,會在本地生成一個dist檔案。

然後建一個檔案Dockerfile，檔案內容可以在VS Code裡面先寫好，或者在linux伺服器上面編輯都可以。

然後需要一臺伺服器，我這裡是用的公司內部的linux伺服器，如果沒有自己的公司的伺服器可以在阿里雲或者騰訊雲購買一臺伺服器，這裡不多做闡述。

當我們連線到linux伺服器之後，需要一些環境，我們需要安裝Dokcer、nginx、解壓檔案。

2.安裝 Docker Engine-Community

yum install -y yum-utils  device-mapper-persistent-data  lvm2

設定yum源

yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo

選擇特定版本

yum list docker-ce --showduplicates | sort -r

我選擇的我當時最新的版本，使用下面命令安裝Docker，可能會消耗一點時間。

yum install docker-ce-19.03.9

啟動Docker

systemctl start docker

檢視Docker是否啟動成功，可以使用命令docker version，如果看到下圖所示，有版本號就顯示成功了:

3.使用docker安裝nginx

查詢nginx版本

docker search nginx

下載nginx

docker pull nginx

下載成功後，使用命令docker images可以檢視已經下載的映象，下圖名字是nginx的映象就是下載好的映象。

4.部署VUE專案

　　4.1把本地需要部署的vue專案使用壓縮工具打包，然後上傳到linux伺服器。

　　首先確定好要將壓縮包放在哪個目錄下，我這裡是cd /home到目錄下，然後直接使用命令 rz 將本地的壓縮包上傳到linux伺服器。

檢視目錄下的檔案命令是 ls，然後將壓縮包解壓使用命令unzip docker-vue.zip（docker-vue是檔案的名稱）。

然後進入解壓後的檔案docker-vue,使用命令ls，檢視下面的資料夾。

接下來使用編輯檔案命令 vi Dockerfile，進去直接按 i 可以編輯裡面的內容。

FROM nginx:latest
MAINTAINER xx
COPY dist/ /usr/share/nginx/html/                                             

將上面的內容複製到Dockerfile檔案裡面，然後按ESC使用 :wq 這是儲存並退出的意思。

第一行是設定的基礎映象，也就是剛才pull的nginx映象。

第二行是寫一個作者，寫上自己的郵箱就可以了。

第三行的意思就是將dist資料夾下面的內容拷貝到/usr/share/nginx/html/這個目錄下。

接下來就是建立自己的映象

docker build -t docker-vue .

docker-vue就是映象的名字。要注意後面有一個點，別忘掉了~

通過命令docker images來檢視映象，一個剛才建立的，一個是之前pull的nginx映象。

有了映象，我們再建立容器

docker run -d --name xx -p 8080:80 xxx

然後通過docker ps 檢視執行中的容器

圖中我自己用的8848埠，你們一般就用8080埠，這個埠號只要是代表網路埠就行。

最後開啟瀏覽器輸入你的伺服器ip埠號就行了。

至此，vue+nginx+docker的前端專案部署就結束了。