首先创建一个 Vue 应用, 然后打包:

    1. $ npm run build

    打包后, 会生成 /dist 目录, 这是构建产物

    创建 default.conf:

    1. server {
    2.     listen       80;
    3.     server_name  localhost;
    5.     location / {
    6.         root   /usr/share/nginx/html;
    7.         index  index.html index.htm;
    8.     }
    10.     error_page   500 502 503 504  /50x.html;
    11.     location = /50x.html {
    12.         root   html;
    13.     }
    14. }

    创建 Dockerfile:

    1. FROM hub.c.163.com/library/nginx
    3. MAINTAINER quanzaiyu
    5. RUN rm /etc/nginx/conf.d/default.conf
    7. ADD default.conf /etc/nginx/conf.d/
    9. COPY dist/ /usr/share/nginx/html/

    注意, 因为引用的基础容器为nginx, 因此这里不需要暴露任何端口

    打包构建为 Docker 镜像:

    $ docker build -t "731734107/vue-test" .

    以上步骤, 结合 Jenkins 会更加容易, 注意, 打包vue是在docker外部完成的, 需要的只是其构建产物

    运行测试:

    $ docker run -p 8088:80 731734107/vue-test

    将容器中的80端口映射到宿主机的8088端口, 在宿主机中使用 http://localhost:8088 即可访问

    推送到 Docker Hub

    $ docker push 731734107/vue-test