docker部署前端项目

Posted by Xsp on October 8, 2018

以下测试环境均在mac上,windows使用docker需要win10专业版(如果是家庭版,需要在网上搜个可用的秘钥升级到专业版)

以以下vue-cli 创建的项目为例:

项目运行 npm run build构建后生成的文件在 dist 目录。

在当前项目目录下创建 Dockerfile 文件,写入如下内容:

FROM nginx
COPY ./dist /usr/share/nginx/html/dist

即以 nginx 镜像为基础,将生成的前端文件都拷贝到 nginx 的对应目录。

在当前项目执行如下命令开始构建docker镜像:

$ docker build -t check-fe:v1 .
Sending build context to Docker daemon  153.3MB
Step 1/2 : FROM nginx
 ---> be1f31be9a87
Step 2/2 : COPY ./dist /usr/share/nginx/html/dist
 ---> Using cache
 ---> 8a55abcbb6fb
Successfully built 8a55abcbb6fb
Successfully tagged check-fe:v1

!注意:如果构建镜像的内容没有变换,如上面的dist目录的文件如果没有修改,则用的是缓存,using cache,即用的还是之前build产生的镜像。

查看构建的镜像

$ docker images
REPOSITORY               TAG                 IMAGE ID            CREATED              SIZE
<none>                   <none>              a023aec7e6fd        About a minute ago   113MB
<none>                   <none>              8a55abcbb6fb        14 minutes ago       113MB
check                    check-fe            fc01d65e181a        4 hours ago          113MB
check_fe                 v1                  fc01d65e181a        4 hours ago          113MB
# 删除镜像
$ docker rmi a023aec7e6fd
Deleted: sha256:a023aec7e6fdecccdc7c782859bd693ca9fb28c05e6b40437333fe7318a256d4
Deleted: sha256:9c79c635c70835ea3a5afa109a9602329e8673f85485c41f79cc40420f140586

注意删除的时候可能报错

$ docker rmi fc01d65e181a
Error response from daemon: conflict: unable to delete fc01d65e181a (cannot be forced) - image is being used by running container 4d96fb24b61a

当前image正在被使用,先删除container

$ docker container ls
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                NAMES
4d96fb24b61a        check:check-fe      "nginx -g 'daemon of…"   4 hours ago         Up 4 hours          0.0.0.0:80->80/tcp   musing_wing
$ docker container ls -a
CONTAINER ID        IMAGE                    COMMAND                  CREATED             STATUS                      PORTS                   NAMES
4d96fb24b61a        check:check-fe           "nginx -g 'daemon of…"   4 hours ago         Up 4 hours                  0.0.0.0:80->80/tcp      musing_wing
$ docker stop 4d96fb24b61a
4d96fb24b61a
$ docker rm 4d96fb24b61a
4d96fb24b61a

还是报错,有两个tag对应的镜像id一样。

$ docker rmi fc01d65e181a
Error response from daemon: conflict: unable to delete fc01d65e181a (must be forced) - image is referenced in multiple repositories
# 这里可以通过删除tag的方式删除,当所有的tag都删除后,对应的image也就删除了
$ docker rmi check:check-fe

container太多了,干脆一次性都删掉:

$ docker stop $(docker ps -a -q)
$ docker rm $(docker ps -a -q)

尝试删除一些 repostiory、 tag 都是 的,报错:

# https://stackoverflow.com/questions/33913020/docker-remove-none-tag-images
$ docker rmi $(docker images -a | grep "^<none>" | awk '{print $3}')
Error response from daemon: conflict: unable to delete e20752008d6c (cannot be forced) - image has dependent child images

删除Tag为None的

docker images|grep none|awk '{print $3}'|xargs docker rmi
# 会删除所有的镜像。。。非常非常不建议使用。。。
# https://stackoverflow.com/questions/38118791/can-t-delete-image-with-children
$ sudo docker rmi $(sudo docker images -aq) --force

发布镜像

这里还是以一个项目为一个repostory好了,重新build:

$ docker build . -t check-fe
Sending build context to Docker daemon  153.4MB
Step 1/2 : FROM nginx
latest: Pulling from library/nginx
802b00ed6f79: Pull complete
5291925314b3: Pull complete
bd9f53b2c2de: Pull complete
Digest: sha256:9ad0746d8f2ea6df3a17ba89eca40b48c47066dfab55a75e08e2b70fc80d929e
Status: Downloaded newer image for nginx:latest
 ---> be1f31be9a87
Step 2/2 : COPY ./dist /usr/share/nginx/html/dist
 ---> 7eb542d1bf1e
Successfully built 7eb542d1bf1e
Successfully tagged check-fe:latest
$ docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
check-fe            latest              7eb542d1bf1e        26 seconds ago      113MB
nginx               latest              be1f31be9a87        6 days ago          109MB
# -d 后台运行
# -p 端口映射
$ docker run -d -p 80:80 check-fe

然后就可以直接访问 http://127.0.0.1

开始发布

# 先登录
# 注意输入用户名的时候不能用注册的邮箱,要用用户名。。。
$ docker login

注意push 的时候,规范:docker push 注册用户名/镜像名,所以还需要修改下tag

$ docker tag check-fe husterxsp/check-fe
$ docker images
REPOSITORY           TAG                 IMAGE ID            CREATED             SIZE
husterxsp/check-fe   latest              ed87af475bf4        13 minutes ago      113MB
check-fe             latest              ed87af475bf4        13 minutes ago      113MB
nginx                latest              be1f31be9a87        6 days ago          109MB
$ docker push husterxsp/check-fe
The push refers to repository [docker.io/husterxsp/check-fe]
76d6fe08b907: Pushed
92b86b4e7957: Pushed
94ad191a291b: Pushed
8b15606a9e3e: Pushed
latest: digest: sha256:0cec8778695131b5a91d93ba9dc268c876688a01c787a12e30b3daf80687a1ce size: 1159

成功push

开一个虚拟机,试一下刚发布的镜像:

$ docker pull husterxsp/check-fe
$ docker run -d -p 80:80 husterxsp/check-fe
# 访问 http://127.0.0.1/dist/
# 查看运行日志
$ docker logs containerid