以vuecli构建的一个简单的前端项目来做演示。 使用vue命令行创建一个docker-vue项目之后。在项目根目录创建nginx.conf文件并编辑

    1. server {
    2.     listen 80;
    3.     root /www;
    4.     index index.html;
    6.     location / {
    7.         try_files $uri $uri/ /index.html;
    8.     }
    9. }

    然后创建Dockerfile文件并编辑

    1. # 引用的docker镜像
    2. FROM nginx:latest
    3. # 执行的命令， 删除容器nginx下的默认配置
    4. RUN rm /etc/nginx/conf.d/default.conf
    5. # 将本地的nginx.conf复制到容器的nginx配置下
    6. COPY nginx.conf /etc/nginx/conf.d/
    7. # 复制本地的编译文件到容易的www下
    8. COPY dist /www

    这个时候我们将前端build之后，生成了dist目录。
    然后我们将这个Dockerfile构造成一个镜像

    1. # docker build -f Dockerfile -t docker-vue-test:0.0.1 .
    2. $ docker build -t docker-vue-test .
    3. Sending build context to Docker daemon    146MB
    4. Step 1/4 : FROM nginx:latest
    5.  ---> f949e7d76d63
    6. Step 2/4 : RUN rm /etc/nginx/conf.d/default.conf
    7.  ---> Running in a053a3e5b7ec
    8. Removing intermediate container a053a3e5b7ec
    9.  ---> 2b865704f5d1
    10. Step 3/4 : COPY nginx.conf /etc/nginx/conf.d/
    11.  ---> 619e4cd4ca05
    12. Step 4/4 : COPY dist /www
    13.  ---> 33dae375d730
    14. Successfully built 33dae375d730
    15. Successfully tagged docker-vue-test:latest

    容器有146MB，这个肯定是不合理，太大了的。 研究了下发现是将node_modules也build进了镜像。 我们添加一个.dockerignore文件

    1. node_modules

    再次执行一下构建镜像

    1. $ docker build -t docker-vue-test .
    2. Sending build context to Docker daemon  1.576MB
    3. Step 1/4 : FROM nginx:latest
    4.  ---> f949e7d76d63
    5. Step 2/4 : RUN rm /etc/nginx/conf.d/default.conf
    6.  ---> Using cache
    7.  ---> 2b865704f5d1
    8. Step 3/4 : COPY nginx.conf /etc/nginx/conf.d/
    9.  ---> Using cache
    10.  ---> 619e4cd4ca05
    11. Step 4/4 : COPY dist /www
    12.  ---> Using cache
    13.  ---> 33dae375d730
    14. Successfully built 33dae375d730
    15. Successfully tagged docker-vue-test:latest

    这样明显就小了很多。现在我们来运行一下这个docker容器

    1. $ docker images
    2. REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
    3. docker-vue-test     latest              33dae375d730        54 seconds ago      127MB
    4. $ docker run -p 8080:80 --name docker-vue-1 -d docker-vue-test
    5. f81d85d84a3a7095e92590a4695673827e50eeaf34efd4eef5b04055707dcbca
    6. $ docker ps
    7. CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                  NAMES
    8. f81d85d84a3a        docker-vue-test     "nginx -g 'daemon of…"   4 seconds ago       Up 4 seconds        0.0.0.0:8080->80/tcp   docker-vue-1

    我们本地访问localhost:8080看看，可以看到如下页面
    image.png
    代表我们成功了。

    Dockerfile我们可以当成是一个shell脚本，会执行文件的一行行命令，然后可以使用docker命令来根据Dockerfile文件来生成镜像，之后就可以根据镜像来启动容器了。