Docker+Nginx 部署 Vue 项目_/usr/sbin/iptables -w10 -t filter -f docker' faile

Docker+Nginx 部署 Vue 项目

一、思路总结

利用 Docker + Nginx 部署 Vue 项目，先将 Vue 项目通过 build 命令构建成一个 dist文件夹，然后将这个文件夹交给 nginx 进行代理（这里利用的是反向代理，作用是可以对外隐藏项目的真实端口），然后编写 Dockerfile文件，在 nginx 基础镜像之上，构建一层属于我们自己的镜像，然后打包，Dockerfile 主要是配置 “vue 项目目录” 和 “nginx的配置文件”，将这两个文件拷贝映射到 nginx 容器内部。编写好 Dockerfile 文件后，通过build 命令构建镜像。最后将这个自定义的nginx镜像发布到DockerHub仓库，其他人就可以去DockerHub将镜像 pull 下来，利用这个镜像创建并运行一个容器就可以直接运行我们这个项目。

具体过程分析

（1）用指令 npm run build 打包 vusjs 项目。打包成功后会生成一个目录 dist

 npm run build
1

生成了dist目录：

（2）把该文件夹拷贝到阿里云服务器（操作系统 centos7）下的 /usr/share 目录下

[root@wuze bigcourse]# cp -r /home/2020yunjisuan/bigcourse/chess/dist /usr/share 
[root@wuze bigcourse]# cd /usr/share/
[root@wuze share]# ll
1
2
3

（3）在 /usr/share 目录下新建Dockerfile 文件

Dockerfile文件内容：

# 设置基础镜像
FROM nginx
# 定义作者
MAINTAINER wuze <wuzest@163.com>
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/nginx.conf
RUN echo 'echo init ok!!'
1
2
3
4
5
6
7
8

（4）新建文件 nginx.conf，指定读取路径 /usr/share/nginx/html

worker_processes auto;

 
events {
    worker_connections  1024;
}
 
 
http {
    include       mime.types;
    default_type  application/octet-stream;
 
    sendfile        on;
    #tcp_nopush     on;
 
    #keepalive_timeout  0;
    keepalive_timeout  65;
 
    #gzip  on;
 
    client_max_body_size   20m;
    server {
        listen       80;
        server_name  _;
 
     location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
        }
        #error_page  404              /404.html;
 
        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

（5）在 share 目录中，然后 用括号里指令 (docker build -t myvue:V1.0 .) 构建镜像。（注意最后的 .）

[root@wuze share]# docker build -t myvue:V1.0 .
Sending build context to Docker daemon  645.9MB
Step 1/5 : FROM nginx
 ---> ae2feff98a0c
Step 2/5 : MAINTAINER wuze <wuzest@163.com>
 ---> Using cache
 ---> 368cd9413d73
Step 3/5 : COPY dist/  /usr/share/nginx/html/
 ---> 79bf2529bb17
Step 4/5 : COPY nginx.conf /etc/nginx/nginx.conf
 ---> f3a6fcdf323f
Step 5/5 : RUN echo 'echo init ok!!'
 ---> Running in 5ceb3f41d39b
echo init ok!!
Removing intermediate container 5ceb3f41d39b
 ---> c7ff34f49d32
Successfully built c7ff34f49d32
Successfully tagged myvue:V1.0
[root@wuze share]#

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

查看镜像 docker images：

6）运行生成成功的镜像：docker run -p 3000:80 -d --name myvuetest01 镜像id

run: 创建一个新的容器并运行一个命令
-d: 后台运行容器，并返回容器 ID
-p: 端口映射，格式为：主机 (宿主) 端口：容器端口
–name “myvuetest01”: 为容器指定一个名称

注意 这里可能会出现一个小问题，可能会报错：

[root@wuze share]# docker run -p 3000:80 -d --name myvuetest03 c7ff34f49d32
0fef9a9d6790dc518cd7365855445f4533ab98ceacb2cd4d2a88e68d6147430c
docker: Error response from daemon: driver failed programming external connectivity on endpoint myvuetest03 (36dd00046d3b98db5876cdb4aa1b949a5a3c92efca6399617cc6e413c75e59a8):  (COMMAND_FAILED: '/usr/sbin/iptables -w10 -t filter -A DOCKER ! -i docker0 -o docker0 -p tcp -d 172.17.0.4 --dport 80 -j ACCEPT' failed: iptables: No chain/target/match by that name.
).

1
2
3
4
5

原因是docker 服务启动时定义的自定义链 DOCKER 由于某种原因被清掉，
重启 docker 服务及可重新生成自定义链 DOCKER。

细节：
重启后记得更换容器的名称，因为刚刚虽然没运行起来容器，但是容器确确实实是已经被创建了，所以两种方法，一种是手动删除那个没跑起来的容器，一种是再给容器起个新名字。（没有什么特殊要求的使用第二种就行了，方便简单）

[root@wuze share]# systemctl restart docker
[root@wuze share]# docker run -p 3000:80 -d --name myvuetest04 c7ff34f49d32
be9543bf00ed437e02e61bce1df075dc7d4b17da1ad76a96737ba53f6555b5cb
[root@wuze share]#

1
2
3
4
5

（7）查看docker容器：（利用自定义nginx镜像的nginx容器创建成功）

[root@wuze share]# docker ps
CONTAINER ID   IMAGE          COMMAND                  CREATED              STATUS              PORTS                  NAMES
be9543bf00ed   c7ff34f49d32   "/docker-entrypoint.…"   About a minute ago   Up About a minute   0.0.0.0:3000->80/tcp   myvuetest04


1
2
3
4
5

（8）放行防火墙端口（3000端口），并重启防火墙

[root@wuze share]# firewall-cmd --zone=public --add-port=3000/tcp --permanent
success
[root@wuze share]# systemctl restart firewalld.service


1
2
3
4
5

通过下面命令可以查看防火墙当前对端口的放行状态：

[root@wuze share]# firewall-cmd --list-all

1
2

如果有看到 3000端口 的影子就说明放行成功。

（9）开放阿里云安全组（3000端口）

去控制台，添加3000端口，阿里云安全组添加后即可生效，不需要重启（千万不要重启阿里云服务器啊！）

（10）部署好后，本地目录 dist 下的内容可以删掉（不必须）

（11）本地浏览器访问测试（域名:3000或者 服务器ip:3000）

如果不想访问时出现:3000端口的字样，可以在前面 “创建并运行容器” 那里将容器的端口改成80，因为http协议默认端口为80

项目就算部署成功了！搞定收工！

（12）后续：可以将镜像打包发布到 DockerHub，提供给其他人下载、开发

[root@wuze share]# docker tag c7ff34f49d32 wuzewz/myvue1224:1.0
[root@wuze share]# docker push wuzewz/myvue1224:1.0
The push refers to repository [docker.io/wuzewz/myvue1224]
3610e5e82cf2: Pushed 
326e772158f9: Pushed 
4eaf0ea085df: Mounted from library/nginx 
2c7498eef94a: Mounted from library/nginx 
7d2b207c2679: Mounted from library/nginx 
5c4e5adc71a8: Mounted from library/nginx 
87c8a1d8f54f: Mounted from library/nginx 
1.0: digest: sha256:d432798af2695fc0c552303676f6ad4bba546fd2f4606ab5b30e9e4ec5033113 size: 1779
[root@wuze share]#

1
2
3
4
5
6
7
8
9
10
11
12
13