前端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 连接只能用域名

相关文章
|
2月前
|
运维 Devops 持续交付
揭秘 Docker 自动部署神器 Websoft9:热门开源软件一键部署
在企业IT建设中,软件部署常面临效率低、易出错等问题。通过Docker与自动化工具,可实现高效、标准化和可追溯的部署流程,提升企业应用交付效率,降低运维门槛,助力中小企业实现自动化部署。
158 5
揭秘 Docker 自动部署神器 Websoft9:热门开源软件一键部署
|
25天前
|
JavaScript 算法 前端开发
【Docker项目实战】使用Docker部署paopao-ce微社区
【Docker项目实战】使用Docker部署paopao-ce微社区
199 84
【Docker项目实战】使用Docker部署paopao-ce微社区
|
2月前
|
运维 Cloud Native 开发者
Docker:现代化应用开发与部署的神器
Docker:现代化应用开发与部署的神器
186 101
|
2月前
|
设计模式 Linux 开发工具
Docker部署会吗?
本段内容主要介绍了Docker常用命令、Linux基础指令及日志查看方法,还涉及SpringMVC的执行流程、设计模式与注解,适合用于面试中技术能力的展示。
91 0
|
17天前
|
存储 Docker Python
docker 部署 sftp
本文介绍SFTP服务的部署与配置,包括users.conf用户配置规则、Docker容器运行命令及上传目录权限说明,重点解析atmoz/sftp镜像的chroot机制与子目录映射,确保用户登录后正确访问/upload目录,并提供Python脚本实现文件上传示例。
66 12
docker 部署 sftp
|
18天前
|
运维 Linux 数据库
基于 Docker 部署 n8n 指南,新手一看就会
本教程详解如何通过 Docker 快速部署开源自动化工具 n8n,适合新手快速上手。内容涵盖官方部署步骤、常见难点及第三方一键部署方案,助你高效搭建自动化工作流平台。
319 6
|
24天前
|
前端开发 JavaScript 应用服务中间件
在Docker部署的前端应用中使用动态环境变量
以上步骤展示了如何在 Docker 配置过程中处理并注入环墨遁形成可执行操作流程,并确保最终用户能够无缝地与之交互而无须关心背后复杂性。
83 13
|
28天前
|
存储 Kubernetes 持续交付
为什么Docker容器化改变了开发与部署?
为什么Docker容器化改变了开发与部署?
|
2月前
|
关系型数据库 MySQL 数据库
为什么 MySQL 不推荐用 Docker 部署?
本文探讨了MySQL是否适合容器化的问题,分析了Docker容器在数据安全、性能瓶颈、状态管理及资源隔离等方面的挑战,并指出目前主流分布式数据库如TDSQL和OceanBase仍倾向于部署在物理机或KVM上。
121 0
|
12月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
887 14

热门文章

最新文章

  • 1
    前端起dev从110秒减少到7秒, 开发体验大幅提升
    68
  • 2
    无前端经验如何快速搭建游戏站:使用 windsurf 从零到上线的详细指南
    330
  • 3
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
    367
  • 4
    VSCode AI提效工具,通义灵码前端开发体验
    558
  • 5
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    345
  • 6
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    354
  • 7
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    204
  • 8
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    410
  • 9
    详解智能编码在前端研发的创新应用
    440
  • 10
    智能编码在前端研发的创新应用
    316