= Lưu trữ ứng dụng React của bạn với AWS trong 30 phút =
Hướng dẫn này rất nặng về hình ảnh và dành cho những người mới bắt đầu hoàn thành. Nó giải thích cách bạn có thể lưu trữ ứng dụng React của mình trên một trang web, với một hệ thống ủy quyền hoàn chỉnh. Nó gọi sức mạnh của AWS MobileHub thông qua Mobilehub CLI (Giao diện dòng lệnh). Hướng dẫn không yêu cầu kỹ năng với các dịch vụ AWS và cũng sẽ chỉ cho bạn cách thiết lập ứng dụng soạn sẵn React.
Nếu bạn đã có ứng dụng React,
**bạn có thể bỏ qua phần 2 nơi chúng tôi cài đặt awsmobile-cli và thêm nó vào ứng dụng của chúng tôi
= Trước khi bắt đầu, chúng tôi cần thiết lập một số thứ trên máy tính của bạn =
**Môi trường Node 8.x được cài đặt trên máy tính của bạn**
- Đây là môi trường thời gian chạy cho các máy chủ ứng dụng Javascript. Nó tuân theo trình quản lý gói nút (NPM).
- NPM được sử dụng để cài đặt các gói nút như React, AWS Amplify, gói trình kết nối AWS-JS và về cơ bản đó là nó.
- httpsnodejs.org/en/doad/
**Một tài khoản Bậc miễn phí của AWS
- Bạn có quyền truy cập miễn phí vào Dịch vụ AWS thông qua Bậc miễn phí. Đối với hướng dẫn này, điều này là quá đủ. Tuy nhiên, hãy lưu ý rằng mỗi dịch vụ đều có giới hạn sử dụng mỗi tháng và điều này có thể khiến bạn mất tiền thật.
- httpsaws.amazon.com/free/
**Cài đặt AWS CLI (Giao diện dòng lệnh) để gọi các dịch vụ AWS trực tiếp từ bảng điều khiển của bạn** **Đối với khóa học này, chúng tôi sẽ sử dụng bản soạn sẵn được duy trì từ Facebook, những người tạo ra React **Một biên tập viên do bạn chọn
- Tôi khuyên bạn nên bắt đầu với Visual Studio Code, một trình chỉnh sửa nhẹ có khả năng sửa đổi cao, có thể chạy hầu hết các ngôn ngữ và khuôn khổ lập trình.
Mẹo chuyên nghiệp: Trong quá trình cài đặt Mã VS, hãy đảm bảo chọn hộp để thêm nó vào tên đường dẫn môi trường của bạn. Điều này cho phép bạn truy cập để mở Mã VS từ thiết bị đầu cuối bằng cách nhập âÃÂÃÂcode filename.jsâÃÂàhoặc âÃÂà Âcode .âÃÂàcho toàn bộ dự án mà bạn đang tham gia. **Một thiết bị đầu cuối mà bạnâÃÂà Âre thoải mái trong
- Hầu hết các nhà phát triển nên cài đặt Git trên máy tính của họ. Điều này cho phép bạn truy cập vào Git Bash mà nhiều nhà phát triển truy cập vào thiết bị đầu cuối.
Hãy bắt đầu nào!
**1. Tạo ứng dụng React và nhập thư mục dự án thông qua terminal**
Nhập thiết bị đầu cuối và tìm thư mục nơi bạn lưu trữ các ứng dụng. Tôi đề xuất một thư mục có tên âÃÂÃÂdevâÃÂÃÂ.
tên dự án tạo-phản ứng-ứng dụng npx&& tên dự án cd
hoặc là
npm -g cài đặt tên dự án tạo-phản ứng-ứng dụng tên dự án tạo-phản ứng-ứng dụng
Ở đây chúng tôi tạo một ứng dụng React dựa trên bản soạn sẵn. âÃÂÃÂnpxâÃÂàlà một công cụ Node sử dụng máy chủ npm để gọi các gói từ xa. Đoạn mã thứ hai cài đặt ứng dụng tạo-phản ứng cục bộ với
*npm -g install create-react-app* **và sau đó tạo ứng dụng. Tôi khuyên bạn nên sử dụng npx để luôn cập nhật ứng dụng tạo-phản ứng và sau đó tạo ứng dụng. Tôi khuyên bạn nên sử dụng npx để luôn cập nhật ứng dụng tạo phản ứng. **2. Cài đặt awsmobile CLI vào máy tính của bạn và chạy nó trong dự án**
Từ thời điểm này, bạn nên chú ý đến ứng dụng React trong trình chỉnh sửa mã của mình. Sẽ có thêm các thư mục như /awsmobile và một số bổ sung cho tệp pack.json.
Trong một cửa sổ đầu cuối, gõ
cài đặt npm -g awsmobile-cli
để cài đặt awsmobile-cli trên toàn cầu. Chúng tôi sẽ sử dụng điều này sau khi thực hiện một số công việc trong bảng điều khiển AWS Mobile Hub.
Đảm bảo rằng bạn đang ở trong dự án của mình và nhập
khởi tạo awsmobile
YouâÃÂàđược nhắc với một tập hợp câu hỏi, trong đó mặc định là tốt, vì vậy hãy nhấn enter qua từng cài đặt cho đến khi nó tự động mở AWS trong trình duyệt mặc định của bạn. Đăng nhập bằng tài khoản Bậc miễn phí của bạn nếu bạn chưa đăng nhập.
Điều này đảm bảo với awsmobile-cli rằng chúng tôi được kết nối với đúng tài khoản AWS. Quay trở lại thiết bị đầu cuối của bạn và nhấn Enter để tiếp tục.
AWS cần thiết lập người dùng để kiểm soát ứng dụng. Điều này sẽ được thực hiện tự động bởi awsmobile-cli khi bạn tiếp tục nhấn enter.
Sau khi hoàn thành việc này, bạnâÃÂàsẽ được đưa đến AWS IAM nơi bạnâÃÂÃÂsẽ chỉ làâÃÂÃÂTiếp theoà ¢ÃÂàtheo cách của bạn để hoàn thành! Trong bước thứ hai, nó sẽ tự động kiểm tra âÃÂÃÂQuyền truy cập quản trị viênâÃÂàcấp cho Người dùng quyền truy cập vào tất cả các tính năng của AWS mà chúng tôi cần.
Khi hoàn tất, điều rất quan trọng là bạn phải tải xuống tệp .csv cùng với thông tin xác thực bí mật của mình vì chúng sẽ chỉ được hiển thị một lần trong AWS. Các phím này sẽ được sử dụng trong các bước tiếp theo của cửa sổ đầu cuối của bạn.
Thao tác này đã tạo thành công ứng dụng AWS MobileHub của bạn và tự động cài đặt aws-amplify& aws-amplify-react vào dự án React cục bộ của bạn
Khi quá trình này hoàn tất (~1 phút), bạn có thể nhập
bảng điều khiển awsmobile
để xem ứng dụng Mobile Hub trong trình duyệt mặc định của bạn. Bạn cũng có thể nhập âÃÂÃÂawsmobileâÃÂàđể xem danh sách các hành động khác nhau. Từ đây, chúng tôi sẽ thêm Đăng nhập Cognito bằng trình duyệt, nhưng bạn có thể làm điều đó từ CLI awsmobile.
**3. Trên thực tế, việc thêm đăng nhập và lưu trữ Cognito**
Đối với bước cuối cùng, chúng tôi sẽ thêm AWS Cognito vào dự án của mình thông qua Bảng điều khiển AWS MobileHub. Bạn cũng có thể kiểm tra Dịch vụ lưu trữ đã được bật theo mặc định.
Để kiểm tra Dịch vụ lưu trữ, hãy nhấp vào tính năng trong bảng điều khiển của bạn và nhấp vào URL mà bạn đã được cung cấp. Nội dung ở đây là một mẫu của AWS, nhưng bạn sẽ sớm ghi đè lên nó bằng ứng dụng React.
**Để thêm Đăng nhập người dùng Cognito, hãy cuộn xuống để tìm âÃÂÃÂĐăng nhập người dùngâÃÂàvà nhấp vào đó. **Điều này cho phép Nhóm người dùng Cognito có hệ thống xác thực. Sử dụng âÃÂÃÂEmailâÃÂàtừ địa chỉ Email hoặc số điện thoại để buộc email làm tên người dùng trong thông tin đăng nhập của bạn. Hoặc bạn có thể sử dụng Tên người dùng và bật âÃÂÃÂEmailâÃÂà+ âÃÂÃÂUsernameâà Âàđể người dùng lựa chọn. Bạn sẽ nhận được mã xác nhận qua email theo bất kỳ cách nào.
Chúng tôi chấp nhận email vì AWS không tính phí gửi mã xác nhận đăng ký tới email, trong khi gửi SMS lại tốn tiền thật.
Kết quả là:
Nếu bạn nhấp vào Hành động >Chỉnh sửa trong Cognito, bạn sẽ thấy bảng điều khiển Cognito để quản lý Người dùng của mình và các tính năng bảo mật nâng cao. Một số thiết lập bạn đã thực hiện trong bước này là không thể đảo ngược nhưng bạn luôn có thể xóa nhóm người dùng của mình và tạo một nhóm mới.
Điều này hoàn tất cấu hình AWS Cognito bên trong MobileHub. Đã đến lúc thêm mã. Bao nhiêu? 5 dòng! Và 3 trong số chúng chỉ được nhập trong React.
= Thêm cài đặt của bạn vào dự án React và xuất bản lên trang web của bạn =
Trong thiết bị đầu cuối của mình, bất cứ lúc nào bạn cũng có thể sử dụng kéo awsmobile hoặc đẩy awsmobile để kéo các thay đổi của bạn từ Bảng điều khiển AWS MobileHub trực tuyến vào ứng dụng của bạn hoặc đẩy các thay đổi cục bộ được thực hiện thông qua CLI awsmobile trong thiết bị đầu cuối.
Đối với trường hợp sử dụng này, chúng tôi muốn tìm nạp các thay đổi mà chúng tôi đã thực hiện. Quay trở lại thiết bị đầu cuối của bạn và gõ
Quay lại Mã VS, bạn sẽ thấy rằng dự án của bạn hiện đã được sửa đổi. Bạn có thể kiểm tra cấu hình cục bộ của mình trong ./awsmobile/backend/mobile-hub-project.yml
Ngoài ra, trong ./package.json, bạn sẽ tìm thấy hai thư viện được đánh dấu được awsmobile init thêm vào mà chúng tôi đã làm trước đó.
Giờ đây, chúng tôi sẽ sử dụng những thứ này để bọc ứng dụng của mình trong cửa sổ đăng nhập Cognito. Mở ./src/index.js và sửa đổi điều này:
để này:
nhập Phản ứng từ 'phản ứng';
nhập ReactDOM từ 'Reac-dom';
nhập index.css';
nhập Ứng dụng từ Ứng dụng';
nhập registerServiceWorker từ registerServiceWorker';
nhập awsMobile từ aws-exports';
nhập Khuếch đại từ 'aws-khuếch đại';
nhập { withAuthenticator } từ "aws-amplify-react"Amplify.configure(awsMobile);
const AppWithAuth = withAuthenticator(App)ReactDOM.render(
('root
registerServiceWorker
And youâÃÂÃÂre done! Try to run your application from your terminal with
npm start
and see it be loaded into the browser with a sleek GUI created by AWS:
From here you can register, login or reset users, and as an admin you can see the users who are registering.
**To add hosting simply go to your terminal and type
awsmobile publish
If you get this warning, abort the publish, run awsmobile pull and run awsmobile publish again:
When this process is done, your hosted website automatically opens in your default browser:
**There, youâÃÂÃÂre done
= Pitfalls in the process =
If the application says âÃÂÃÂNo user poolsâÃÂÃÂ, make sure your MobileHub console has Sign-In activated, and that youâÃÂÃÂve called awsmobile pull from your terminal. This updates the aws-exports.js file which is then added to Amplify.configure() in React. Also, remember to import that file!
**Further challenges** **Use the ** **aws-amplify authentication documentation ** **to add a signout button to your application
Hint: YouâÃÂÃÂll need to import Auth and call its signOut function.
import { Auth } from aws-amplify-react
**Add your custom domain name to the hosted website**This is done through CloudFront, which you can access in MobileHub âÃÂÃÂHosting and StreamingâÃÂÃÂ. Read the docs provided if you want assitance:
== Using Custom URLs for Files by Adding Alternate Domain Names (CNAMEs) - Amazon CloudFront ==
Describes how to add an alternate domain name, known as a CNAME, to use your own domain name instead of the defaultâÃÂæ
docs.aws.amazon.com
**Add Google Login**Delete your Cognito User Pool and add one with Facebook/Google providers. This can be a bit tricky as you need to get e.g. Google Web App Client ID from the google terminal to make this work. **Hope you enjoyed this very detailed introduction to AWS MobileHub. ItâÃÂÃÂs a lot of fun once you get the hang of it, and creating a Serverless backend for your frontend project has never been as easy
