Triển khai ứng dụng ember-cli vào S3 mà không vi phạm các URL

Question

Tôi đang làm việc trên ứng dụng ember-cli mà tôi đang triển khai trong S3. Tôi thực sự muốn có thể sử dụng cách tiếp cận 'không máy chủ' này, vì nó rất đơn giản để cấu hình, và cực kỳ phải chăng.

Tôi gặp sự cố với URL. Nếu tôi nhấn http://my-bucket.s3-website-us-east-1.amazonaws.com/ nó hoạt động tốt. Nhưng nếu tôi cố gắng tải trực tiếp một trang khác với gốc của ứng dụng, chẳng hạn như http://my-bucket.s3-website-us-east-1.amazonaws.com/elephants/5, thì nó cung cấp 403, vì không có tài nguyên như vậy trong S3. (Tôi có thể điều hướng đến các trang như vậy thông qua ứng dụng, và tôi có thể nhấn trực tiếp vào chế độ dev trên máy của tôi, vì vậy ứng dụng ember đang hoạt động tốt.)

Tìm kiếm giải pháp, tôi tìm suggestions để thêm #! vào con đường. Điều này có vẻ tốt hơn, vì nó không trả lại 403, nhưng khi tôi nhấn http://my-bucket.s3-website-us-east-1.amazonaws.com/#!/elephants/5, nó chỉ chuyển hướng đến http://my-bucket.s3-website-us-east-1.amazonaws.com, mất mọi thông tin cụ thể mà đường dẫn chứa.

Tùy chọn của tôi là gì? Có cách nào để sử dụng S3 và có URL hoạt động không? Tôi có cần một máy chủ không? Hay có cách tiếp cận nào khác đã lảng tránh tôi?

Answer 1

OK, tôi đã thân thiết. Chỉ ra rằng cách tiếp cận đúng là:

http://my-bucket.s3-website-us-east-1.amazonaws.com/#/elephants/5

Tôi đã cố gắng tiếp cận khác nhau, nhưng không ai trong số họ đã được chính xác một # không có !, và bao quanh bởi /. đọc có liên quan là tài liệu trên location

Điều đáng chú ý là tôi đang sử dụng:

App.Router.reopen({ 
    location: 'auto' 
}); 

Ngoài ra, tôi đang sử dụng như sau RoutingRules dưới Website Hosting

<RoutingRules> 
    <RoutingRule> 
     <Condition> 
      <HttpErrorCodeReturnedEquals>403</HttpErrorCodeReturnedEquals> 
     </Condition> 
     <Redirect> 
      <HostName>my-bucket.s3-website-us-east-1.amazonaws.com</HostName> 
      <ReplaceKeyPrefixWith>#/</ReplaceKeyPrefixWith> 
     </Redirect> 
    </RoutingRule> 
</RoutingRules> 

Answer 2

Chỉ cần tĩnh tạo bản đồ Tài liệu Lỗi thành index.html & vị trí của bạn nên được đặt thành tự động. http://i.stack.imgur.com/qbAov.png

Answer 3

Có vài vấn đề với cách tiếp cận chỉ có chuyển hướng dựa trên #. Tôi đã liệt kê chúng bên dưới:

1. Chuyển hướng Mutliple xảy ra khi đường dẫn ứng dụng của bạn được giải quyết. Ví dụ: www.myapp.com/path/for/test được chuyển hướng dưới dạng www.myapp.com/#/path/for/test
2. Có một nhấp nháy trong thanh url khi '#' đến và đi đến hạn hành động của khuôn khổ SPA của bạn.
3. Seo bị ảnh hưởng bởi vì - 'Này! Google của nó buộc bàn tay của mình trên chuyển hướng '
4. Hỗ trợ Safari cho ứng dụng của bạn sẽ bị quăng.

cách tiếp cận Một đột biến ra khỏi phương pháp triển khai chủ trương Lightening với Ember-CLI-Triển khai thực hiện như sau:

1. Hãy chắc chắn rằng bạn có các tuyến đường chỉ số cấu hình cho trang web của bạn. Chủ yếu là index.html
2. Xóa quy tắc định tuyến khỏi cấu hình S3
3. Đặt Cloudfront trước thùng S3 của bạn.
4. Định cấu hình quy tắc trang lỗi cho phiên bản Cloudfront của bạn. Trong các quy tắc lỗi ghi rõ:
   • Http mã lỗi: 404 (và 403 hoặc các lỗi khác theo nhu cầu)
   • Lỗi Caching tối thiểu TTL (giây): 0
   • Tùy chỉnh phản ứng: Có
   • đáp ứng trang đường dẫn: /index.html
   • HTTP Response Code: 200

5.For SEO nhu cầu + đảm bảo index.h của bạn tml không cache, hãy làm như sau:

• Định cấu hình EC2 và thiết lập máy chủ nginx.
• Gán IP công khai cho phiên bản EC2 của bạn.
• Tạo một ELB có cá thể EC2 mà bạn đã tạo làm ví dụ
• Bạn sẽ có thể gán ELB cho DNS của mình.
• Bây giờ, hãy định cấu hình máy chủ nginx của bạn để thực hiện những việc sau: Proxy_pass tất cả các yêu cầu tới CDN của bạn (chỉ với index.html, phân phát các nội dung khác trực tiếp từ đám mây của bạn) và cho các bot tìm kiếm, chuyển hướng lưu lượng truy cập theo quy định của dịch vụ như Trình đơn trước. io

Tôi có thể trợ giúp thêm chi tiết về thiết lập nginx, chỉ để lại ghi chú. Đã học được nó một cách khó khăn.

Sau khi cập nhật phân phối trên đám mây. Vô hiệu hóa bộ nhớ cache trên đám mây của bạn một lần để ở chế độ nguyên sơ. Truy cập url trong trình duyệt và tất cả sẽ tốt.