Published on

如何给前后端分离项目使用独立域名和 HTTPS

Authors
  • avatar
    Name
    Adam Liu
    Twitter

这篇文章会介绍：使用 AWS，如何给前后端分离项目换上独立域名还有使用安全的 HTTPS 协议。

注意：这里的 HTTPS 证书是使用免费的公有 AWS SSL DV 证书，或者 Cloudflare 的 Universal SSL（TLS SNI）。

假设

  1. 你有一枚一级域名：example.com。
  2. 域名解析服务是由 Cloudflare 提供的。其实 Godaddy，或者你的域名购买商都没问题，只要你会配置就可以。-
    • 注意：有些域名解析服务可能不是很可靠，或者提供的功能不是很强。
    • 小知识：域名解析是可以做做 Load Balancing 的，比如 AWS Route 53 就有这个服务，其中的Weighted Round Robin(WRR)和Latency Based Routing(LBR)就能根据权重和延时给用户不同的路由终点。
  3. 你的前端和后端是使用不同的二级域名：
    • 前端：web.example.com
    • 后端：api.example.com

本文会尽量使用 AWS 的服务解决托管的问题，这样使用起来更容易管理，特别是在 CI/CD 过程中。

前端

我现在公司使用的是 AWS S3 托管静态资源，然后启用 S3 Bucket 的Static website hosting功能。

null

图为 Static website hosting 功能，直接用 endpoint 就能访问你的 index.html

是不是很直接很爽。如果是你不介意分配的 Endpoint 这么长，你其实可以直接用。

那么，如何才能用到自己的域名（web.example.com）呢？

接下来只要添加一个名为web的 CNAME 域名解析记录，指向上图的 Endpoint，你就能用 web.example.com 访问这些静态资源了。

是不是很简单。🤡🤡

不好意思，其实这是不行的，你会得到一个 404 NoSuchBucket 的错误页面。

为什么？因为 DNS 服务器只会简单把 web.example.com 解析为上图 Endpoint 域名所在的 AWS IP 地址，比如 52.219.36.14。S3 Static website hosting其实是需要从你的 domain name 中获取要指向的 S3 bucket 位置，有点 Apache VirtualHost 的感觉。（如果还不懂，可以留言找我。）

怎么办？😥

请使用 CloudFront

创建一个 CloudFront Distribution 有几点需要注意。

1. 指向你的前端项目 S3 Bucket

null

Origin ID 是你选择 S3 Bucket 之后自动生成的。

2. 选择你的 AWS ACM 证书

null

注意，你的证书可以使免费的公共 DV 证书，也可以是独有的 private 证书。创建公共 DV 证书你点击“Request or Import a certification with ACM”，然后选择 "Request a Certification"按照流程走就可以。

创建 AWS ACM 免费公用证书的过程中，需要验证你对域名 web.example.com 的控制权。按照指引选择 DNS 验证就好，验证过程需要等几分钟。

⚠️ 注意：AWS ACM 证书管理默认是在US East (N. Virginia)us-east-1区。如果你发现你所在的区找不到之前创建的证书，切换到该区查看。

3. 基本其他都可以保持默认配置，特别一点是，你可以开启：Redirect HTTP to HTTPS。这样更安全。

4. CloudFront 贵吗？

null

这是亚太区的收费标准，基本产品早起阶段，收费可以忽略不计。比如我公司用了几个月，每个月不超过 0.1USD

CloudFront Distribution 的创建过程需要一点时间，印象中大概要等十几分钟到半个小时。创建成功后，你会得到一个分配的Domain Name。比如：dfdfdv432h212jk.cloudfront.net

拿好分配给你的 Domain Name，在你的域名解析服务商添加名为web的 CNAME 域名解析记录，指向上面的 CloudFront Domain Name。注意，这个免费证书是由 Amazon 颁发的。

null

如果你是使用 Cloudflare，请选择 DNS only。

要等多久就要看你的域名解析服务商。我使用 Cloudflare 基本等几秒就可以完成域名解析服务。

没什么意外，你应该就可以正常访问：https://web.exmaple.com

后端

如果你按照我之前的文章[AWS] 如何给 EC2 使用 HTTPS？中的方法二，完成了 API Gateway 到 EC2 API 服务的映射。

你应该会得到一个 API Gateway 分配给你的 URL，这个 URL 已经是使用 HTTPS 协议了。

但是，如何才能用上自己的域名api.example.com呢?

使用 API Gateway

1. 在 API Gateway 创建 Custom domain names。

我假设你已经按照我上个段落提供的方法创建了 RESTful API 还有 Stage。

null

记得提前在 AWS ACM 验证好 Domain，这里才能选择。验证的流程可以参考前端的方法。

2. 设置 API mappings

null

Path 是可选的，如果你自己的 API Endpoints 有层级，你可以在这里做再次的映射。比如，那些/v1, /v2 的。

3 . 分配 API Gateway Domain name

null

没什么意外的话，你有有一条自动分配的 domain.

这条 API Gateway Domain name 并不能直接使用，你需要添加一条名为为api的 CNAME 域名解析记录，以实现 api.exmaple.com 指向这个 API Gateway Domain name。这个过程是和前端配置 CNAME 指向 CloudFront 是类似的。

4 . 开启 Cloudflare Proxied 功能

你可能会得到这样的错误页面。

null

NET::ERR_CERT_REVOKED 错误。

请记得在 Cloudfalre 开启 Proxied 功能。

null

开启 Cloudflare Proxied 功能。

这个过程可能需要等十几分钟。

⚠️ 注意：如果你不开启这个功能，你需要是在 AWS ACM 导入Cloudflare Origin CA certificates。如果你的域名解析服务商没有这种 Proxied 功能，也就是只有 DNS 解析功能，你可以使用 AWS Route 53 托管你部分的域名，比如只托管 api.example.com 。篇幅问题，我不在这里展开，你可以看AWS 文档了解一下。

5 . 完结.

null

这是我给公司弄的 health-check Endpoint，方便检查 api 是否正常运作。

开启 Proxied 之后，使用的是 Cloudfalre Universal SSL证书。这种可以让这么多域名共享证书的技术叫做TLS SNI。

null

sni.cloudflaressl.com 证书。

好的，完成上述步骤，你应该就可以正常访问: https://api.exmaple.com

完。

本文写作耗时约 3.5 小时。