前端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生成新的网桥不行，说明docker的network存在问题，我们利用刚才下载的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 <span class="hljs-variable" style="color: #d19a66; line-height: 26px;">$http_upgrade</span> <span class="hljs-variable" style="color: #d19a66; line-height: 26px;">$connection_upgrade</span> {<br> default upgrade;<br> <span class="hljs-string" style="color: #98c379; line-height: 26px;">''</span> close;<br>}<br><br>upstream wsbackend {<br> server 172.18.0.1:8000;<br>}<br>server {<br> listen 443 ssl;<br> server_name 域名;<br> ssl_certificate 证书.crt;<br> ssl_certificate_key 证书.key;<br> ssl on;<br> <span class="hljs-comment" style="color: #5c6370; font-style: italic; line-height: 26px;"># ---</span><br> ssl_prefer_server_ciphers on;<br> ssl_verify_client off;<br> ssl_session_cache shared:SSL:10m;<br> ssl_protocols TLSv1 TLSv1.1 TLSv1.2 SSLv2 SSLv3;<br> ssl_ciphers ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP;<br> <span class="hljs-comment" style="color: #5c6370; font-style: italic; line-height: 26px;"># ---</span><br><br> root /dist;<br><br> location ~* (.+)\.html {<br> add_header Cache-Control no-cache;<br> }<br><br> location / {<br> try_files <span class="hljs-variable" style="color: #d19a66; line-height: 26px;">$uri</span> <span class="hljs-variable" style="color: #d19a66; line-height: 26px;">$uri</span>/ /index.html;<br> }<br><br> location ~ ^/api {<br> proxy_pass http://wsbackend;<br> proxy_set_header Host <span class="hljs-variable" style="color: #d19a66; line-height: 26px;">$host</span>;<br> proxy_set_header X-Real-IP <span class="hljs-variable" style="color: #d19a66; line-height: 26px;">$remote_addr</span>;<br> proxy_set_header X-Forwarded-For <span class="hljs-variable" style="color: #d19a66; line-height: 26px;">$proxy_add_x_forwarded_for</span>;<br><br> <span class="hljs-comment" style="color: #5c6370; font-style: italic; line-height: 26px;"># Websocket代理配置</span><br> proxy_set_header Upgrade <span class="hljs-variable" style="color: #d19a66; line-height: 26px;">$http_upgrade</span>;<br> proxy_set_header Connection <span class="hljs-string" style="color: #98c379; line-height: 26px;">"Upgrade"</span>;<br> proxy_buffering off;<br> proxy_read_timeout 3600;<br> }<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>
