= Triển khai ứng dụng React trên Amazon S3 =
== Hướng dẫn 5 phút về cách triển khai Ứng dụng React với S3 ==
Vậy là bạn đã hoàn thành ứng dụng React của mình và bạn đang muốn lưu trữ nó ở đâu đó. Bạn có biết rằng bạn có thể sử dụng Amazon AWS S3 để lưu trữ các ứng dụng React của mình không? Nó tương đối dễ dàng, chi phí thấp và triển khai nhanh chóng.
= LetâÃÂÃÂs bắt đầu nào! =
== Điều kiện tiên quyết ==
Trước khi chúng tôi chuyển sang lưu trữ, hãy hoàn tất thiết lập quản trị. Hãy chắc chắn rằng những điều sau đây được hoàn thành:
**Bạn có tài khoản AWS Đăng ký tài khoản AWS tại đây: httpsaws.amazon.com/resources/create-account/ **Tạo người dùng AWS Trong Bảng điều khiển AWS, chuyển đến tab IAM và chuyển đến à ¢ÃÂÃÂUsersâÃÂàtrên thanh bên.
Nhấp vào âÃÂÃÂAdd UserâÃÂàvà kiểm tra âÃÂÃÂProgrammatic accessâàÃÂ.
Nhấp vào âÃÂÃÂTiếp theo: QuyềnâÃÂàvà tại đây chọn âÃÂÃÂĐính kèm trực tiếp các chính sách hiện cóâà ÂÃÂ. Kiểm tra âÃÂÃÂAdministratorAccessâÃÂàcho mục đích triển khai.
Nhấp qua các nút Tiếp theo và cuối cùng nhấp vào à¢ÃÂÃÂTạo người dùngâÃÂÃÂ.
Ở bước cuối cùng, chúng tôi nhận được ID khóa truy cập và Khóa truy cập bí mật. Tải xuống và
** lưu chúng vào máy tính của bạn vì bạn sẽ cần điều này sau
== Cài đặt AWS CLI ==
AWS CLI là một công cụ mạnh mẽ có thể giúp chúng tôi đơn giản hóa quy trình triển khai.
Hãy cài đặt AWS CLI bằng Homebrew (dành cho macOS). Cài đặt Homebrew nếu bạn chưa có.
*Lưu ý: Nếu bạn đang sử dụng Windows, bạn có thể tìm hướng dẫn trên tài liệu chính thức * *tại đây*
Mở thiết bị đầu cuối của bạn và nhập
bia cài đặt awscli.
Khi công cụ CLI được cài đặt, chúng tôi có thể định cấu hình tài khoản AWS của mình bằng
cấu hình aws. Đây là nơi bạn sẽ cần nhập thông tin khóa truy cập mà bạn đã tải xuống trước đó. Nó sẽ giống như sau.
Đối với khu vực, bạn có thể kiểm tra URL của mình trên Bảng điều khiển AWS và nó sẽ đề cập đến khu vực của bạn. Ví dụ: của tôi là âÃÂÃÂap-đông nam-1âÃÂÃÂ.
= Tạo ứng dụng React =
Bạn có thể đã có ứng dụng React sẵn sàng để triển khai. Tuy nhiên, nếu bạn cần một ứng dụng mẫu, bạn có thể sử dụng các tùy chọn sau:
- Tạo ứng dụng React soạn sẵn bằng cách chạy
ứng dụng npx tạo-phản ứng-ứng dụng của tôi
- Tải xuống ứng dụng React mẫu của tôi (có ví dụ về biểu mẫu) từ httpsgithub.com/harishv7/react-hook-form-example. Điều này được thực hiện cho hướng dẫn thêm biểu mẫu vào ứng dụng React. Kiểm tra nó ra ở đây.
Sau khi hoàn tất, hãy đảm bảo rằng tất cả các phụ thuộc đều được cài đặt bằng cách sử dụng
cài đặt sợi và chạy ứng dụng bằng cách sử dụng
bắt đầu sợi.
= Thiết lập Nhóm S3 =
Bây giờ, chúng ta đã có ứng dụng mẫu sẵn sàng, hãy định cấu hình bộ chứa S3 để lưu trữ ứng dụng của chúng ta.
Trên Bảng điều khiển AWS, tìm kiếm âÃÂÃÂS3âÃÂàvà truy cập Bảng điều khiển S3. Nhấp vào âÃÂÃÂTạo thùngâÃÂàvà đặt tên cho nhóm như âÃÂÃÂmy-react -app-2021âÃÂà(hoặc bất kỳ thứ gì khác mà bạn muốn).
*Lưu ý: Tên bộ chứa phải là duy nhất trên toàn bộ S3. Vì vậy, hãy chọn một tên duy nhất không tồn tại, nếu không bạn sẽ gặp lỗi!*
Bật quyền truy cập công khai vào nhóm vì chúng tôi đang lưu trữ trực tiếp.
Giữ nguyên phần còn lại của cài đặt và nhấp vào âÃÂÃÂTạo thùngâÃÂÃÂ. Bạn sẽ thấy một mục như sau trên bảng điều khiển S3 của mình.
Hãy nhấp và chuyển đến nhóm S3 mới được tạo của chúng tôi.
Hãy bấm vào âÃÂÃÂPropertiesâÃÂàvà cuộn xuống cuối cùng nơi bạn sẽ xem âÃÂÃÂLưu trữ trang web tĩnhâÃÂÃÂ.
Nhấp vào âÃÂÃÂEnableâÃÂàvà nhập âÃÂÃÂindex.htmlâààtrong tài liệu Chỉ mục.
Giữ nguyên các trường khác và nhấp vào âÃÂÃÂLưu thay đổiâÃÂÃÂ.
= Đang triển khai lên S3 =
Bây giờ, chúng tôi đã sẵn sàng triển khai ứng dụng của mình lên S3. Cách để làm điều đó là sử dụng lệnh CLI sau:
aws s3 sync build/ s3your-bucket-name>--acl public-read
Chúng tôi cũng có thể thêm lệnh này vào tệp pack.json của mình dưới dạng tập lệnh âÃÂÃÂdeployâÃÂÃÂ.
LetâÃÂÃÂs xây dựng ứng dụng của chúng tôi bằng cách sử dụng
bản dựng sợi giúp tạo bản dựng sản xuất được tối ưu hóa.
Tiếp theo, hãy chạy lệnh CLI được cung cấp ở trên hoặc nếu bạn đã thiết lập tập lệnh xuất bản của mình trong pack.json, chúng tôi có thể sử dụng
triển khai sợi.
ĐóâÃÂÃÂ, ứng dụng của chúng tôi hiện đã được triển khai!
Để tìm nơi ứng dụng của chúng tôi được lưu trữ (liên kết trang web), hãy truy cập bảng điều khiển AWS S3 và nhấp vào bộ chứa bạn đã tạo.
Chuyển đến tab âÃÂÃÂPropertiesâÃÂàvà cuộn xuống hết cỡ đến trang web âÃÂÃÂTrang web tĩnh phần lưu trữâÃÂàvà URL của chúng tôi sẽ ở đó.
Nhấp vào nó và ứng dụng của bạn sẽ mở ra trong một tab mới. ĐâyâÃÂàcủa tôi!
= Kết luận =
Chúng tôi đã triển khai thành công ứng dụng React của mình lên Amazon S3! Đây là một lựa chọn tuyệt vời để nhanh chóng triển khai và thử nghiệm các nguyên mẫu React của bạn và chia sẻ nó với những người khác. Việc triển khai cũng rất dễ dàng và nhanh chóng.
Hy vọng hướng dẫn này hữu ích cho bạn!
Chúc mừng mã hóa! ðÃÂÃÂû
*Xem thêm nội dung tại * *plainenglish.io*
LƯU TRỮ TRANG WEB CHIA SẺ#7
