前面我已經成功將Vue專案生成的dist資料夾上傳伺服器，並通過nginx，在伺服器搭起了網站，但是小組作業需要把整個專案都放到docker（我這只是專案中customer那部分而已），所以我嘗試著生成docker映象，方便其他組員使用。
　　首先我把dist資料夾還有之前修改過的nginx的配置檔案nginx.conf放在同一個目錄，然後準備在這個目錄編寫Dockerfile（本目錄就只有dist資料夾、nginx.conf、Dockerfile這三樣東西），寫好之後就可以生成映象了。
　　我最終要得到的映象是在指定位置放置好了dist資料夾的nginx，這樣當別人用這個映象生成容器，我的前端專案也就直接能跑起來了。
　　不知道是不是docker裡最新版本的nginx和我在伺服器配置的nginx版本不同，我發現它們的檔案結構是不一樣的，docker裡直接安裝的nginx配置檔案在映象內的/etc/nginx/nginx.conf位置，具體內容也有所不同，它將原來的nginx.conf的內容分成了兩個檔案，在其中include了它的另外一部分，不過總體是和之前的nginx.conf等價的，因此我們將之前準備的nginx.conf將映象內的nginx.conf覆蓋也不會出問題，只是資源的路徑要做相應改動。由於我打算將專案放在映象的/usr/share/nginx/customer/dist位置，並開放8889埠，因此nginx.conf部分配置如下：

# yang jianfeng add for web server
server {
    listen 8889;
    server_name localhost;

    root /usr/share/nginx/customer/dist;
    location / {
    try_files $uri $uri/ @router; #需要指向下面的@router否則會出現vue的路由在nginx中刷新出現404
        index  index.html index.htm;
    }
    #對應上面的@router，主要原因是路由的路徑資源並不是一個真實的路徑，所以無法找到具體的檔案
 

    #因此需要rewrite到index.html中，然後交給路由在處理請求資源
    location @router {
        rewrite ^.*$ /index.html last;
    }
}

　　接下來正式寫Dockerfile，其內容如下

FROM nginx
RUN mkdir /usr/share/nginx/customer
RUN mkdir /usr/share/nginx/customer/dist
RUN rm -rf /etc/nginx/nginx.conf
COPY ./nginx.conf /etc/nginx/nginx.conf
COPY ./dist /usr/share/nginx/customer/dist
EXPOSE 8889
 

　每一句對應的內容如下：
　1.這個映象基於nginx
　2.在nginx映象中/usr/share/nginx目錄下新建customer資料夾
　3.在nginx映象中/usr/share/nginx/customer目錄下新建dist資料夾
　4.在nginx映象中刪除/etc/nginx目錄下的nginx.conf檔案
　5.將宿主機本目錄nginx.conf複製到映象/etc/nginx/nginx.conf
　6.將宿主機本目錄dist資料夾複製到映象/usr/share/nginx/customer目錄dist資料夾
　6.開放埠8889
然後生成映象，-t將這個映象命名為eatwelly/customer-page（這是方便我上傳到docker hub而起的名字），最後的那個.不要漏掉，它表明是在當前目錄生成映象。

sudo docker image build -t eatwelly/customer-page .

用這個映象生成名為customer的容器，本機8889埠對映到容器8889並後臺執行

sudo docker run -d --name=customer -p 8889:8889 eatwelly/customer-page

搭建完畢