前端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网桥则被删除

3、端口暴露

一个完整的项目有多个应用,前端、后端、后处理等等,这些应用部署在同一台机器,每个应用都有自己的服务端口。这些服务通信是在机器内部,按理说只要开放一个前端端口就可以访问,但是,关闭其他应用端口就访问失败。
这是因为 nginx 配置 proxy_pass 使用公网 ip,需要将公网 ip 改成网关 ip,其他服务也是对应的修改

4、nginx 配置支持 https 和 wss

nginx 配置如下

map $http_upgrade $connection_upgrade {
 default upgrade;
 '' close;
}

upstream wsbackend {
 server 172.18.0.1:8000;
}
server {
     listen 443 ssl;
     server_name 域名;
     ssl_certificate     证书.crt;
     ssl_certificate_key 证书.key;
     ssl on;
     # ---
     ssl_prefer_server_ciphers on;
     ssl_verify_client off;
     ssl_session_cache shared:SSL:10m;
     ssl_protocols TLSv1 TLSv1.1 TLSv1.2 SSLv2 SSLv3;
     ssl_ciphers ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP;
     # ---

     root /dist;

     location ~* (.+)\.html {
           add_header Cache-Control no-cache;
         }

     location / {
             try_files $uri $uri/ /index.html;
         }

     location ~ ^/api {
                   proxy_pass http://wsbackend;
                   proxy_set_header Host $host;
                   proxy_set_header X-Real-IP $remote_addr;
                   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

                   # Websocket代理配置
                   proxy_set_header Upgrade $http_upgrade;
                   proxy_set_header Connection "Upgrade";
                   proxy_buffering off;
                   proxy_read_timeout 3600;
              }


}

注意: WSS 连接只能用域名

相关文章
|
4天前
|
人工智能 API 数据安全/隐私保护
使用 Docker 一键免费部署 63.8k 的私人 ChatGPT 网页应用
NextChat 是一个可以在 GitHub 上一键免费部署的私人 ChatGPT 网页应用,支持 GPT3、GPT4 和 Gemini Pro 模型。该项目在 GitHub 上获得了 63.8k 的 star 数。部署简单,只需拉取 Docker 镜像并运行容器,设置 API Key 后即可使用。此外,NextChat 还提供了预设角色的面具功能,方便用户快速创建对话。
49 22
使用 Docker 一键免费部署 63.8k 的私人 ChatGPT 网页应用
|
9天前
|
Java 应用服务中间件 Linux
【Docker容器化技术】docker安装与部署、常用命令、容器数据卷、应用部署实战、Dockerfile、服务编排docker-compose、私有仓库
本文主要讲解了Docker的安装与部署、常用命令、容器数据卷、应用部署实战、Dockerfile、服务编排docker-compose、私有仓库以及Docker容器虚拟化与传统虚拟机比较。
184 7
【Docker容器化技术】docker安装与部署、常用命令、容器数据卷、应用部署实战、Dockerfile、服务编排docker-compose、私有仓库
|
15天前
|
SQL 关系型数据库 数据库
国产数据实战之docker部署MyWebSQL数据库管理工具
【10月更文挑战第23天】国产数据实战之docker部署MyWebSQL数据库管理工具
53 4
国产数据实战之docker部署MyWebSQL数据库管理工具
|
2天前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
|
5天前
|
运维 开发者 Docker
Docker Compose:简化容器化应用的部署与管理
Docker Compose:简化容器化应用的部署与管理
|
5天前
|
Docker 微服务 容器
使用Docker Compose实现微服务架构的快速部署
使用Docker Compose实现微服务架构的快速部署
15 1
|
17天前
|
消息中间件 Linux RocketMQ
在Red Hat Enterprise Linux 9上使用Docker快速安装并部署
通过以上步骤,你可以在Red Hat Enterprise Linux 9上使用Docker快速安装并部署RocketMQ。这种方法不仅简化了安装过程,还提供了一个灵活的环境来管理和扩展消息队列系统。RocketMQ作为一款高性能的分布式消息系统,通过Docker可以实现快速部署和高效管理。
45 2
|
18天前
|
消息中间件 Linux RocketMQ
在Red Hat Enterprise Linux 9上使用Docker快速安装并部署
通过以上步骤,你可以在Red Hat Enterprise Linux 9上使用Docker快速安装并部署RocketMQ。这种方法不仅简化了安装过程,还提供了一个灵活的环境来管理和扩展消息队列系统。RocketMQ作为一款高性能的分布式消息系统,通过Docker可以实现快速部署和高效管理。
28 3
|
20天前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
21天前
|
关系型数据库 MySQL Linux
基于阿里云服务器Linux系统安装Docker完整图文教程(附部署开源项目)
基于阿里云服务器Linux系统安装Docker完整图文教程(附部署开源项目)
173 2