D6 docker 部署vue项目

vue打包

npm run build

dist src文件夹及index.html打包到服务器

获取nginx镜像

docker pull nginx

配置nginx

项目根目录创建nginx文件夹，并创建并编辑default.conf文件

mkdir nginx
cd nginx
vim default.conf

default.conf文件内容

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;
        }
}

创建DockerFile文件

项目根目录创建Dockerfile

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

创建镜像

docker build -t vuetest .

查看镜像

docker images

运行镜像

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

---

优化：

挂载运行

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

挂载运行后，每次修改，直接更新服务器上vuetest文件夹内容，并重启docker容器即可

docker restart vuetest

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