vue打包

npm run build

dist src文件夾及index.html打包到服務(wù)器

獲取nginx鏡像

docker pull nginx

配置nginx

項目根目錄創(chuàng)建nginx文件夾，并創(chuàng)建并編輯default.conf文件

mkdir nginx
cd nginx
vim default.conf

default.conf文件內(nèi)容

server{
        listen  80;
        server_name     test;

        access_log      /var/log/nginx/host.access.log  main;
        error_log       /var/log/nginx/error.log        error;

        location / {
                root    /usr/share/nginx/html;
                index   index.html index.htm;
        }

        error_page      500 501 /50x.html;
        location / {
                root    /usr/share/nginx/html;
        }
}

創(chuàng)建DockerFile文件

項目根目錄創(chuàng)建Dockerfile

FROM nginx
COPY dist/ /usr/share/nginx/html/
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

創(chuàng)建鏡像

docker build -t vuetest .

查看鏡像

docker images

運行鏡像

docker run -p 8080:8080 -d --name vuetest vuetest

優(yōu)化：

掛載運行

docker run -p 80:80 -d --name vuetest \
    -v /home/vuetest/nginx/default.conf:/etc/nginx/conf.d/default.conf \
    -v /home/vuetest/dist:/usr/share/nginx/html/ \
    --privileged=true -it vuetest

掛載運行后，每次修改，直接更新服務(wù)器上vuetest文件夾內(nèi)容，并重啟docker容器即可

docker restart vuetest

參考：http://dockone.io/article/8834