🌞

Setup CloudFront cho ứng dụng

Sửa bài viết này

Chúng ta sẽ cùng cấu hình để đưa toàn bộ ứng dụng lên CloudFront, với những dữ liệu không nên cache như data, auth,... sẽ được proxy (chuyển tiếp) đến server.

Cấu hình DNS

Mục tiêu cuối cùng của chúng ta là đưa toàn bộ ứng dụng lên CloudFront. Tức là khi user truy cập vào domain, họ sẽ load ứng dụng từ CloudFront chứ không phải từ server. Trước tiên chúng ta phải vào Route 53 để thay đổi lại DNS

Chọn Hosted Zone

Click vào Create Hosted zone và nhập vào domain

Chúng ta đang nói với AWS hãy quản lý domain này cho tôi, AWS đưa cho chúng ta giá trị NS (name server) mà nó sẽ route traffic đến. Chúng ta sẽ cần đến chỗ quản lý domain, tùy thuộc vào nơi chúng ta đăng ký domain, giao diện quản lý có thể khác nhau, chúng ta cập nhập lại giá trị NS này cho domain

Trước khi thay đổi, nhớ lưu lại backup giá trị NS gốc

Cấu hình CloudFront distribution

Chúng ta sẽ điền vào phần origin domain, đừng nhập giá trị top-level domain như your-app.com, nó sẽ là giá trị sub domain, như your-app.herokuapp.com (nếu được host trên herokuapp.com)

Nếu có ý định dùng HTTPs thì nhớ thay đổi phân Protocol

Phần dưới đây cực kỳ quan trọng, nếu ứng dụng của chúng ta có authen, ghi dữ liệu, nói chung những phương thức khác ngoài GET, thì nhớ chọn lại Allowed HTTP methods

Chúng ta cũng cần thực hiện một vài thay đổi trên Cache key and origin requests

Cache policy chúng ta cho phép giá trị TTL minimum là 0, như vậy với giá trị non-caching header được gửi lên sẽ có hiệu lực

Origin request policy, để đảm bảo cookie và query string khi đến CloudFront sẽ được gửi xuống server (không serve từ CDN)

Response headers policy, chúng ta chọn CORS With Preflight

Chúng ta vẫn phải chứng minh với AWS là chúng ta là chủ sở hữu của domain, trước hết chúng ta yêu cầu một SSL certificate

Chọn Request certificate

Cung cấp tên miền, chọn kiểu validate bằng DNS

Chọn Request, chọn vào Certificate ID vừa được tạo ra

Để xác minh domain chính chủ, chúng ta cần đưa giá trị CNAME này vào trong Route 53

Chúng ta tạo một dòng CNAME với giá trị trong certificate ở trên

Sau khi xác minh xong AWS sẽ cập nhập status trên domain

Xong, giờ quay lại màn hình CloudFront distribution, trong mục SSL certificate chọn vào certificate chúng ta đã tạo

Việc còn lại là báo với Route 53 để nó route domain vào CloudFront, vào Route 53 tạo thêm một dòng DNS Chọn A record type, đánh dấu dòng này là một alias và map alias này đến CloudFront. Bên trong mục Route traffic to chúng ta sẽ có tùy chọn Alias to CloudFront distribution

OK, xong rồi đó.

Để báo với CloudFront đừng cache những request cụ thể nào, chúng ta gửi trong header Cache-Control: no-cache. Ví dụ sử dụng Express middleware

app.use("/graphql", (req, res, next) => {
  res.set("Cache-Control", "no-cache");
  next();
});
app.use(
  "/graphql",
  expressGraphql({
    schema: executableSchema,
    graphiql: true,
    rootValue: root
  })
);