其他分享
首页 > 其他分享> > 前端docker部署问题记录

前端docker部署问题记录

作者:互联网

前端周刊发表每周前端技术相关的大事件、文章教程、一些框架的版本更新、以及代码和工具。每周定期发表,欢迎大家关注、转载。
欢迎关注公众号「前端每周看」

前言

Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的 Linux 或 Windows 操作系统的机器上,也可以实现虚拟化。容器是完全使用沙箱机制,相互之间不会有任何接口。 目前开发前后端分离模式非常流行,后端只需要提供 resetful api 接口,前端也是一个单独的工程应用,那么 NGINX 配置就必不可少。 下面列出了,前端项目 docker 部署所遇到的问题及解决办法,1 和 2 是内网部署问题,3 和 4 外网部署问题。

主要问题

1、宿主机不能上网

公司项目是打包到服务器一起发给客户,机器在公司上网都是正常的,邮件到客户那上不了网。主要是因为机器在公司注册了路由表,先接入的网络路由表没有更新,执行下面的命令清除路由表

sudo ip route flush table main

然后接入网络,重新获取

2、docker 与宿主机网络不通

docker 网络模式

bridge:桥接模式

桥接模式是 docker 的默认网络设置,当 Docker 服务启动时,会在主机上创建一个名为 docker0 的虚拟网桥,并选择一个和宿主机不同的 IP 地址和子网分配给 docker0 网桥

host:主机模式

该模式下容器是不会拥有自己的 ip 地址,而是使用宿主机的 ip 地址和端口。这种模式的好处就是网络性能比桥接模式的好。缺点就是会占用宿主机的端口,网络的隔离性不太好

none:无网络模式

网络模式选择桥接模式的容器,就会连接上 docker0 这个网桥,在通过 nat 的转换,通过宿主机的网卡,连接外网,就能达到上外网的目的。

查看网络模式: docker network ls

问题解决

查看网桥 ip 为172.17.0.1,容器 ip 为172.0.0.2,发现宿主机能 ping 通网桥,但是无法连接容器,而容器无法连接网桥,无法连接宿主机,更别谈外网了,所以这里可以肯定是网桥出了问题

  • 网桥工具

    yum install bridge-utils
    brctl show
  • 这里docker network生成新的网桥不行,说明dockernetwork存在问题,我们利用刚才下载的bridge-utils来创建网桥。首先暂停docker服务,利用指令

    systemctl stop docker
  • 添加网桥

    brctl addbr br0
  • 设置网关

    ip addr add 172.16.0.1/24 dev br0
  • 启动网桥 br0

    ip link set dev br0 up
  • 查看网络 br0

    ifconfig br0
  • 修改 docker 默认的网桥

    vi /etc/docker/daemon.json

    增加: "bridge":"br0"
  • 重启 docker

    systemctl start docker
  • 验证

    1. 宿主机ping br0网关
    ping 172.16.0.1

    2. 创建运行容器,进入容器,假设已经创建了容器 a
    docker exec -it a /bin/sh
    执行:
    ip a
    可以看到eth0虚拟网卡的ip地址为: 172.16.0.x
    ping www.baidu.com
    3. 宿主机ping容器ip
    ping 172.16.0.x
    完成

  • 验证网桥重启后会不会失效,如果失效需要加到服务器的配置中

「参考:」 https://blog.csdn.net/qq_36059826/article/details/106550332

脚本设置

服务器重启之后,上面的配置都失效,所以要设置永久桥接网络。可以将生成网桥的命令写在 rc.local 中,让服务启动时执行

```
vi /etc/rc.d/rc.loal

增加下面的内容:
/usr/sbin/brctl addbr br0
/usr/sbin/ip addr add 172.16.0.1.24 dev br0
/usr/sbin/ip link set dev br0 up

切记
chmod +x rc.local

重启后 docker0网桥则被删除

</code></pre>
<h2 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 22px; display: block; border-bottom: 4px solid #40B8FA;"><span class="prefix" style="display: flex; width: 20px; height: 20px; background-size: 20px 20px; background-image: url(https://files.mdnice.com/fullstack-1.png); margin-bottom: -22px;"></span><span class="content" style="display: flex; color: #40B8FA; font-size: 20px; margin-left: 25px;">3、端口暴露</span><span class="suffix" style="display: flex; box-sizing: border-box; width: 200px; height: 10px; border-top-left-radius: 20px; background: RGBA(64, 184, 250, .5); color: rgb(255, 255, 255); font-size: 16px; letter-spacing: 0.544px; justify-content: flex-end; float: right; margin-top: -10px; box-sizing: border-box !important; overflow-wrap: break-word !important;"></span></h2>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #2b2b2b; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">一个完整的项目有多个应用,前端、后端、后处理等等,这些应用部署在同一台机器,每个应用都有自己的服务端口。这些服务通信是在机器内部,按理说只要开放一个前端端口就可以访问,但是,关闭其他应用端口就访问失败。
这是因为 nginx 配置 proxy_pass 使用公网 ip,需要将公网 ip 改成网关 ip,其他服务也是对应的修改</p>
<h2 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 22px; display: block; border-bottom: 4px solid #40B8FA;"><span class="prefix" style="display: flex; width: 20px; height: 20px; background-size: 20px 20px; background-image: url(https://files.mdnice.com/fullstack-1.png); margin-bottom: -22px;"></span><span class="content" style="display: flex; color: #40B8FA; font-size: 20px; margin-left: 25px;">4、nginx 配置支持 https 和 wss</span><span class="suffix" style="display: flex; box-sizing: border-box; width: 200px; height: 10px; border-top-left-radius: 20px; background: RGBA(64, 184, 250, .5); color: rgb(255, 255, 255); font-size: 16px; letter-spacing: 0.544px; justify-content: flex-end; float: right; margin-top: -10px; box-sizing: border-box !important; overflow-wrap: break-word !important;"></span></h2>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #2b2b2b; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;">nginx 配置如下</p>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;"><span style="display: block; background: url(https://files.mdnice.com/user/3441/876cad08-0422-409d-bb5a-08afec5da8ee.svg); height: 30px; width: 100%; background-size: 40px; background-repeat: no-repeat; background-color: #282c34; margin-bottom: -7px; border-radius: 5px; background-position: 10px 10px;"></span><code class="hljs" style="overflow-x: auto; padding: 16px; color: #abb2bf; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; font-size: 12px; -webkit-overflow-scrolling: touch; letter-spacing: 0px; padding-top: 15px; background: #282c34; border-radius: 5px;">map&nbsp;<span class="hljs-variable" style="color: #d19a66; line-height: 26px;">$http_upgrade</span>&nbsp;<span class="hljs-variable" style="color: #d19a66; line-height: 26px;">$connection_upgrade</span>&nbsp;{<br>&nbsp;default&nbsp;upgrade;<br>&nbsp;<span class="hljs-string" style="color: #98c379; line-height: 26px;">''</span>&nbsp;close;<br>}<br><br>upstream&nbsp;wsbackend&nbsp;{<br>&nbsp;server&nbsp;172.18.0.1:8000;<br>}<br>server&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;listen&nbsp;443&nbsp;ssl;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;server_name&nbsp;域名;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ssl_certificate&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;证书.crt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ssl_certificate_key&nbsp;证书.key;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ssl&nbsp;on;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="hljs-comment" style="color: #5c6370; font-style: italic; line-height: 26px;">#&nbsp;---</span><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ssl_prefer_server_ciphers&nbsp;on;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ssl_verify_client&nbsp;off;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ssl_session_cache&nbsp;shared:SSL:10m;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ssl_protocols&nbsp;TLSv1&nbsp;TLSv1.1&nbsp;TLSv1.2&nbsp;SSLv2&nbsp;SSLv3;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ssl_ciphers&nbsp;ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="hljs-comment" style="color: #5c6370; font-style: italic; line-height: 26px;">#&nbsp;---</span><br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;root&nbsp;/dist;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;location&nbsp;~*&nbsp;(.+)\.html&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;add_header&nbsp;Cache-Control&nbsp;no-cache;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;location&nbsp;/&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;try_files&nbsp;<span class="hljs-variable" style="color: #d19a66; line-height: 26px;">$uri</span>&nbsp;<span class="hljs-variable" style="color: #d19a66; line-height: 26px;">$uri</span>/&nbsp;/index.html;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;location&nbsp;~&nbsp;^/api&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;proxy_pass&nbsp;http://wsbackend;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;proxy_set_header&nbsp;Host&nbsp;<span class="hljs-variable" style="color: #d19a66; line-height: 26px;">$host</span>;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;proxy_set_header&nbsp;X-Real-IP&nbsp;<span class="hljs-variable" style="color: #d19a66; line-height: 26px;">$remote_addr</span>;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;proxy_set_header&nbsp;X-Forwarded-For&nbsp;<span class="hljs-variable" style="color: #d19a66; line-height: 26px;">$proxy_add_x_forwarded_for</span>;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="hljs-comment" style="color: #5c6370; font-style: italic; line-height: 26px;">#&nbsp;Websocket代理配置</span><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;proxy_set_header&nbsp;Upgrade&nbsp;<span class="hljs-variable" style="color: #d19a66; line-height: 26px;">$http_upgrade</span>;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;proxy_set_header&nbsp;Connection&nbsp;<span class="hljs-string" style="color: #98c379; line-height: 26px;">"Upgrade"</span>;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;proxy_buffering&nbsp;off;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;proxy_read_timeout&nbsp;3600;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br><br><br>}<br></code></pre>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; color: #2b2b2b; margin: 10px 0px; letter-spacing: 2px; font-size: 14px; word-spacing: 2px;"><strong style="color: #3594F7; font-weight: bold;"><span>「</span>注意:<span>」</span></strong> WSS 连接只能用域名</p>
</section>

标签:部署,ip,前端,宿主机,br0,网桥,nbsp,docker
来源: https://www.cnblogs.com/xiyangbaixue/p/16413833.html