从网页部署问题入手，讲明常见的前端网络拓扑

一叶渡江
162 阅读4分钟

引言

「提交代码之后，代码是如何自动部署到网站上的？」
「我提交了代码，部署怎么还没生效？」
「我申请了域名，配置了跳转规则，怎么页面访问不到？」
「如何从前端部署方面优化网站性能？」

大家在工作过程中，可能会有很多类似的问题。网上充斥着经典理论和工具介绍，但是实战时，二者的割裂感十足。为了能把这里的细节说明白，这里从现象入手，从通识说到常见部署结构，讲明各部分职能。

问题

创建一个新的项目时，完成本地基本开发后，需要申请环境并且部署。这个时候都需要做什么呢？
由于大家日常工作中，不同公司之间的基建完善程度不同，大家需要做的事情也不一样：

  • 基建完善的公司，提一个工单给运维同学，工单中描述申请域名和 URI 指向，接下来等着运维喂饭就好了
  • 不完善的公司呢，最坏的情况需要自行申请配置以下部分（这里以 AWS 为例）：
    • 域名和证书
    • route53 配置域名跳转
    • LB 负载均衡器
    • CloudFront CDN加速
    • S3 网站资源存储
    • AWS SDK Runner 镜像

我们从黑盒的角度来展开，逐渐涉及到白盒场景下的各种部分。
那我们现在分析这个问题，我们提了工单之后，打开测试网站 404 了，有可能是什么问题呢？问题的排查需要从流程开始的位置查。

排查思路和涉及知识点

未命名绘图.drawio.png

CI/CD

通常项目会配置 CI/CD，这样在提交代码到对应的分支后，可以触发自动部署。
那么这里怎么配置的呢？
以 gitLab 为例，在项目中可以通过 .gitlab-ci.yml 自定义配置。以下为例：

stages:
  - build
  - deploy

build:
  stage: build
  tags:
    - docker
  image: node:14.17.3-slim
  script:
    - bash scripts/build.sh
  cache:
    paths:
      - node_modules
  artifacts:
    expire_in: 3 days
    paths:
      - dist/

deploy:
  stage: deploy
  image:
    name: aws-cli:latest
    entrypoint: ['']
  tags:
    - docker
  script:
    - bash scripts/deploy.sh

这里定义了两个阶段，一个打包，一个上传，对应了不同的打包脚本和每个阶段 docker 运行镜像。 有类似功能的工具，还有 Jenkins。都是将一个任务分解成若干个子任务，形成一个流程，通过调用暴露的 http 方法启动一个流程。

image.png

这一步出了问题的话，可以通过看打包过程的日志，或者通过服务器打包产物文件夹观察到是否是有问题的。

域名 & 负载均衡服务器配置

域名申请到后，需要将域名指向一个 IP 地址才可以获取到 HTML 文件。这个 IP 地址可能是一个文件服务器的地址， CDN 的地址，或者一个负载均衡器（LB）的地址。三者都存在的场景下，可能的部署结构如下示意：

image.png
我们先说明每个部分的功能。

  • LB 负责将流量按照规则分配到不同的服务器上，例如 流量百分比，路由规则，地域等。
  • 服务器集群：通过多 AZ 部署，可以提高应用的数据可用性，增加容灾能力。
  • CDN 通过代理静态文件服务器分发功能，可以提供更快的文件获取速度，以及更高的 accessibility。
  • 文件服务器：托管静态网站文件资源。

申请的域名一般指向最外层的 LB，通过路由规则指向不同资源。比如，我们常用会将/指向 HTML 资源，将/api开头的请求，指向服务器资源。

回到我们的问题。如果申请/配置工作都完成了，那么需要测试每一个服务器是否在正常工作，其中的每个指向配置是否是工作的。

  1. ping 域名，验证 LB 服务器是被域名指向的，并且 DNS 服务器是完成域名注册的。有的域名申请的时候是内网应用，在外网，没有对应的域名注册的 DNS 服务器上，是访问不到的。这个时候就会 ping 不通。
  2. 检查配置 LB 路由配置。指向是否是对应 CDN 服务器。
  3. 检查 CDN 服务器的指向是否为 CI/CD 打包产物上传的文件服务器
    • 这里有一个小坑。有的时候可以浏览器可以加载到 HTML 文件，但是后续的静态文件都拉不到，这个可能跟 LB 的配置有关系。比如打包生成的 JS 放在/assets文件夹下，在请求对应的 JS 资源时，也会通过www.a.com/assets/b.js的方式来请求。所以需要在 LB 路由规则中，将对应的规则配置指向 CDN 服务器。

结语

网络部署架构大致就是这样，掌握每个部分的功能，增删不过是因为性能/开销的考量。经常会听到周围的朋友说其实八股没什么用，但是在网络这里，尤其是排查问题的时候，就是需要从「浏览器加载一个网页都经历了什么」这种问题入手，考虑都有可能是其中的哪些部分出了问题，然后去检查修改。

avatar
文章
阅读
粉丝