= Cách sử dụng AWS Amplify để triển khai Ứng dụng React =
== Hướng dẫn triển khai Ứng dụng React với AWS Amplify ==
Kể từ khi tôi bắt đầu tư vấn với tư cách là Kỹ sư phần mềm, tôi đã muốn tập hợp một trang web danh mục đầu tư giới thiệu
các dự án cá nhân và chuyên nghiệp mà tôi đã thực hiện. Kỳ nghỉ đông này, tôi đã dành thời gian thiết kế, phát triển và triển khai trang web danh mục đầu tư của mình và trong bài viết này, tôi sẽ hướng dẫn bạn cách tôi triển khai nó với AWS Amplify. Bạn có thể xem trang web tại dan-murphy.com và mã trên GitHub.
= Bối cảnh ngắn gọn =
Hầu hết công việc chuyên môn của tôi liên quan đến việc xây dựng các ứng dụng dựa trên dữ liệu và hợp lý hóa các đường dẫn dữ liệu. Để hoàn thành những nhiệm vụ này, tôi thường xuyên sử dụng Python và Ruby và kết hợp JavaScript cho bất kỳ công việc giao diện người dùng nào. Trong nỗ lực để trở nên thoải mái hơn với React, tôi đã quyết định sử dụng khung này để xây dựng trang web danh mục đầu tư của mình.
= Cài đặt ứng dụng =
Bước đầu tiên tôi thực hiện là quyết định cách cấu trúc ứng dụng. tôi đã sử dụng
tạo-phản ứng-ứng dụng làm mẫu cơ sở cho các thư mục của tôi, sau đó tái cấu trúc ứng dụng với một vài thư mục bổ sung. Thiết lập hoàn thiện trông như thế này:
src
các thành phần
âÃÂÃÂarchives
âÃÂÃÂextras
âÃÂÃÂdata
âÃÂÃÂimgs
trang
âÃÂÃÂnội dung
âÃÂÃÂdata
phong cách
kiểm tra
đồ đạc
Một số thay đổi đáng chú ý là
**các thành phần**
, Và
**trang**
thư mục.
**phong cách**
,
: Đây là nơi tôi lưu trữ tất cả các thành phần của ứng dụng. Bằng cách lưu trữ các thành phần trong một thư mục tập trung, việc sử dụng lại và cấu trúc lại mã của tôi sẽ dễ dàng hơn và dễ hiểu hơn đối với những người khác. Một số thành phần tạo nên trang web danh mục đầu tư của tôi là
các thành phần
tiêu đề,
Chân trang và
ProjectSidebar.
: Đây là nơi tôi xây dựng các trang riêng biệt cho ứng dụng. Tôi nhập các thành phần cần thiết từ
trang
thư mục và sau đó tổng hợp chúng để thiết kế trang. Đây là một ví dụ về cách tôi đã làm điều này cho
trang chủ thành phần:
: Đây là nơi tôi định nghĩa các kiểu CSS toàn cục cho ứng dụng. tôi thích sử dụng
phong cách
các thành phần được tạo kiểu cho các thành phần riêng lẻ, nhưng tôi cũng nhận thấy việc xây dựng các kiểu chung có sẵn cho mỗi trang là rất hữu ích.
Cuối cùng, để ánh xạ các yêu cầu tới đúng trang, chúng tôi sử dụng
phản ứng-bộ định tuyến-dom. Các tuyến đường được xác định trong
Tệp App.js như hình bên dưới:
Điều này sẽ lập bản đồ
Trang chủ,
/dự án yêu cầu
Trang dự án,
/về yêu cầu
Giới thiệu về Trang và
/giá sách yêu cầu
Trang sách. Bây giờ quá trình phát triển ứng dụng đã hoàn tất, chúng ta cần triển khai nó để những người khác có thể sử dụng nó!
/yêu cầu
= Triển khai với AWS Amplify =
== Tổng quan ==
Có một số cách để triển khai một trang web React, nhưng tôi thấy rằng một trong những cách đơn giản nhất là sử dụng
**AWS Amplify Amplify được mô tả là âÃÂÃÂcách nhanh nhất và dễ dàng nhất để xây dựng các ứng dụng web và di động có quy mô lớn.âÃÂàĐể thực hiện điều này, AWS ngoại suy tất cả sự phức tạp của việc thiết lập máy chủ, cài đặt các phần phụ thuộc và tạo bản dựng sản xuất cho trang web của bạn, cho phép bạn chỉ tập trung vào việc xây dựng UX trực quan. Để tìm hiểu thêm về những gì AWS Amplify cung cấp cho các ứng dụng dựa trên dữ liệu (cụ thể là các trang web có **giao diện người dùng** và **phụ trợ, hãy xem tài liệu của họ.
== Kết nối Kho lưu trữ của bạn ==
Để lưu trữ ứng dụng web của bạn trên AWS Amplify, trước tiên bạn cần kết nối kho lưu trữ chứa mã nguồn của mình. Để làm điều này, bạn có thể điều hướng đến
*Khuếch đại AWS* *Bắt đầu* **Lưu trữ ứng dụng web của tôi và nhấp vào **Kết nối kho lưu trữ ứng dụng *trang, cuộn tới*trang, cuộn tới 
Sau đó, bạn sẽ được chuyển hướng đến một trang riêng nơi bạn có thể kết nối kho chứa mã nguồn của mình. Trong ví dụ này, tôi sẽ chọn GitHub, nhưng AWS Amplify cũng hỗ trợ BitBucket, GitLab, AWS CodeCommit và thậm chí triển khai mà không cần nhà cung cấp Git.
Sau khi ủy quyền thành công, bạn có thể chọn kho lưu trữ mà mình muốn triển khai và chọn nhánh AWS Amplify sẽ sử dụng cho các bản dựng sản xuất.
Sau đó, nhấp vào
**Tiếp theo** và AWS sẽ yêu cầu bạn định cấu hình cài đặt *build* và *test* của mình. Mẫu cơ sở mà AWS cung cấp được hiển thị bên dưới.
phiên bản 1
giao diện người dùng:
giai đoạn:
xây dựng trước:
lệnh:
- npm cài đặt bản dựng:
lệnh:
- npm chạy bản dựng
hiện vật:
cơ sởDirectory: xây dựng
các tập tin:
-
bộ đệm:
con đường:
- nút_mô-đun
Ngoài ra, dưới sự
**cài đặt nâng cao** chuyển đổi, bạn có thể đặt biến môi trường và vùng chứa bản dựng tùy chỉnh.
Cuối cùng, sau khi xem xét các cài đặt cho ứng dụng của bạn, hãy nhấp vào
**Save and Deploy **và **AWS sẽ bắt đầu định cấu hình và triển khai ứng dụng của bạn. Khi AWS triển khai xong, bạn có thể điều hướng đến trang chủ Amplify và xem ứng dụng mới triển khai của mìnhAWS sẽ bắt đầu định cấu hình và triển khai ứng dụng của bạn. Khi AWS triển khai xong, bạn có thể điều hướng đến trang chủ Amplify và xem ứng dụng mới triển khai của mình.
Bây giờ, hãy tùy chỉnh URL bằng cách sử dụng
**Quản lý miền AWS Amplify
== Thêm miền tùy chỉnh ==
Để bắt đầu thêm miền tùy chỉnh, hãy điều hướng đến thanh bên trái và chọn
**quản lý miền
** quản lý tên miền ** cài đặt.
Sau đó, chọn
**thêm tên miền **cấu hình tên miền **nhập tên miền của bạn (như hiển thị bên dưới) và nhấp vào**nhập tên miền của bạn (như hiển thị bên dưới) và nhấp vào 
Sau này, bạn có thể thiết lập bất kỳ chuyển hướng nào cần thiết cho miền của mình. Ví dụ như ví dụ sau, mình tạo redirect từ httpsdan-murphy.com sang httpswww.dan-murphy.com.
Cuối cùng, sau khi miền tùy chỉnh của bạn được định cấu hình chính xác, AWS sẽ cung cấp cho bạn một
**Chứng chỉ xác thực Bạn cũng có thể xem chứng chỉ này trong bảng điều khiển Trình quản lý chứng chỉ AWS.
== Thêm Bản ghi CNAME ==
Bước cuối cùng trong việc định cấu hình miền tùy chỉnh của bạn là thêm bản ghi CNAME. Trong ví dụ sau, tôi sử dụng Google Domains, nhưng các khái niệm cơ bản vẫn giống nhau giữa các công ty đăng ký tên miền khác nhau.
Đầu tiên, cuộn xuống
**Bản ghi tài nguyên tùy chỉnh** trong Google Domains. Tạo bản ghi *CNAME *trỏ tất cả các miền phụ đến miền AWS Amplify: Tên: nhập tên miền phụ. Nếu tên miền phụ là www.domain.com, hãy nhập . Nếu đó là www app.domain.com, hãy nhập ứng dụng. Dữ liệu: Trên trang quản lý tên miền, nhấp vào Hành động và sau đó chọn Xem bản ghi DNS. Sau đó, nhập miền AWS Amplify có sẵn trong Định cấu hình nhà cung cấp DNS. 
**Quản lý tên miền**, chọn **Hành động **Xem bản ghi DNS**
Nhìn chung, bản ghi tài nguyên tùy chỉnh sẽ giống như sau:
Tiếp theo, thêm một cái nữa
Bản ghi *CNAME* trỏ đến máy chủ xác thực AWS Certificate Manager. Trình quản lý chứng chỉ AWS đã được xác thực xử lý TLS cho ứng dụng của bạn: Tên: nhập tên miền phụ của máy chủ xác thực. Nếu bản ghi DNS để xác minh quyền sở hữu miền của bạn là _1234.example.com, thì chỉ nhập _1234. Dữ liệu: nhập chứng chỉ xác thực ACM. Nếu máy chủ xác thực là _1234.abcdefg.acm-validations.aws., hãy nhập _1234.abcdefg.acm-validations.aws.
Tất cả thông tin về Chứng chỉ xác thực của bạn đều có trong bảng điều khiển Trình quản lý chứng chỉ AWS. Sau lần thứ hai
*CNAME* được thêm vào, bản ghi tùy chỉnh của bạn sẽ trông như thế này: 
Cuối cùng, hãy thêm một
**Bản ghi tổng hợp** để thiết lập miền phụ chuyển tiếp: Miền phụ: nhập URL miền: www. 
= Kết thúc =
Nhìn chung, trong bài viết này, chúng ta đã học cách cấu trúc Ứng dụng React và triển khai chúng với AWS Amplify. Đầu tiên, chúng ta đã thảo luận về cách mô đun hóa một ứng dụng phản ứng thành
*thành phần* *trang* thư mục. Sau đó, chúng ta đã tìm hiểu về **AWS Amplify** và cách triển khai các ứng dụng tĩnh và dựa trên dữ liệu với nó. Cuối cùng, chúng tôi đã tìm hiểu về cách sử dụng **Quản lý miền khuếch đại AWS** và **Tên miền Google** để tùy chỉnh miền của ứng dụng của chúng tôi. **và và
Nếu bạn có bất kỳ câu hỏi, thắc mắc hoặc phản hồi nào về bài viết này hoặc trang danh mục đầu tư của tôi, vui lòng nhận xét hoặc gửi email cho tôi theo địa chỉ
*
[email protected]*. Cảm ơn vì đã đọc!
