= โฮสต์แอปพลิเคชัน React ของคุณด้วย AWS ใน 30 นาที =
บทช่วยสอนนี้มีรูปภาพจำนวนมากและมีเป้าหมายสำหรับผู้เริ่มต้นที่สมบูรณ์ โดยจะอธิบายวิธีโฮสต์แอปพลิเคชัน React ของคุณบนเว็บไซต์ด้วยระบบการอนุญาตที่สมบูรณ์ เรียกใช้พลังของ AWS MobileHub ผ่าน Mobilehub CLI (อินเทอร์เฟซบรรทัดคำสั่ง) บทช่วยสอนไม่จำเป็นต้องใช้ทักษะใด ๆ กับบริการของ AWS และจะแสดงให้คุณตั้งค่าแอปพลิเคชันสำเร็จรูปของ React
หากคุณมีแอปพลิเคชัน React อยู่แล้ว
**คุณสามารถข้ามไปที่ส่วนที่ 2 ที่เราติดตั้ง awsmobile-cli และเพิ่มลงในแอปพลิเคชันของเรา
= ก่อนที่เราจะเริ่มต้น เราต้องตั้งค่าสองสามอย่างบนคอมพิวเตอร์ของคุณ =
** สภาพแวดล้อมโหนด 8.x ติดตั้งบนคอมพิวเตอร์ของคุณ **
- นี่คือสภาพแวดล้อมรันไทม์สำหรับเซิร์ฟเวอร์แอปพลิเคชัน Javascript ตามด้วยตัวจัดการแพ็กเกจโหนด (NPM)
- NPM ใช้เพื่อติดตั้งแพ็กเกจโหนด เช่น React, AWS Amplify, แพ็กเกจตัวเชื่อมต่อ AWS-JS และโดยพื้นฐานแล้ว
- httpsnodejs.org/en/download/
**บัญชี AWS Free Tier
- คุณสามารถเข้าถึงบริการของ AWS ได้ฟรีผ่าน Free Tier สำหรับบทช่วยสอนนี้ น่าจะเพียงพอแล้ว อย่างไรก็ตาม โปรดทราบว่าแต่ละบริการมีขีดจำกัดในการใช้งานในแต่ละเดือน และอาจทำให้คุณต้องเสียเงินจริง
- httpsaws.amazon.com/free/
**ติดตั้ง AWS CLI (Command Line Interface) เพื่อเรียกใช้บริการ AWS โดยตรงจากคอนโซลของคุณ** **สำหรับหลักสูตรนี้ เราจะใช้ต้นแบบที่ได้รับการบำรุงรักษาจาก Facebook ผู้สร้าง React **บรรณาธิการที่คุณเลือก
- ฉันขอแนะนำให้เริ่มต้นด้วย Visual Studio Code ซึ่งเป็นโปรแกรมแก้ไขน้ำหนักเบาที่ปรับเปลี่ยนได้สูงซึ่งสามารถเรียกใช้ภาษาโปรแกรมและเฟรมเวิร์กส่วนใหญ่ได้
เคล็ดลับสำหรับมือโปร: ในขั้นตอนการติดตั้ง VS Code ตรวจสอบให้แน่ใจว่าได้ทำเครื่องหมายที่ช่องซึ่งเพิ่มลงในชื่อพาธสภาพแวดล้อมของคุณ สิ่งนี้ช่วยให้คุณเปิด VS Code จากเทอร์มินัลโดยพิมพ์ âÃÂÃÂcode filename.jsâÃÂàหรือ âÃÂà Âcode .âÃÂàสำหรับโครงการทั้งหมดที่คุณâÃÂÃÂอยู่ ** เทอร์มินัล youâÃÂà อยู่ในความสะดวกสบาย
- นักพัฒนาส่วนใหญ่ควรติดตั้ง Git ไว้ในคอมพิวเตอร์ สิ่งนี้ช่วยให้คุณเข้าถึง Git Bash ซึ่งเป็นเทอร์มินัลปลายทางสำหรับนักพัฒนาจำนวนมาก
เอาล่ะ!
**1. สร้างแอปพลิเคชัน React และเข้าสู่โฟลเดอร์โครงการผ่านเทอร์มินัล**
เข้าสู่เทอร์มินัลและค้นหาโฟลเดอร์ของคุณที่คุณจัดเก็บแอปพลิเคชัน ฉันแนะนำโฟลเดอร์ชื่อ âÃÂÃÂdevâÃÂÃÂ
npx create-react-app ชื่อโครงการ&& ชื่อโครงการซีดี
หรือ
npm -g ติดตั้ง create-react-app ชื่อโครงการ create-react-app
ที่นี่เราสร้างแอปพลิเคชัน React ตามต้นแบบสำเร็จรูป âÃÂÃÂnpxâÃÂàเป็นเครื่องมือโหนดที่ใช้เซิร์ฟเวอร์ npm สำหรับการโทรบนแพ็คเกจระยะไกล ข้อมูลโค้ดที่สองติดตั้ง create-react-app ในเครื่องด้วย
*npm -g ติดตั้ง create-react-app* **จากนั้นสร้างแอปพลิเคชัน ฉันแนะนำให้ใช้ npx เพื่อให้ทันสมัยอยู่เสมอด้วย create-react-appand จากนั้นจึงสร้างแอปพลิเคชัน ฉันแนะนำให้ใช้ npx เพื่อให้ทันสมัยอยู่เสมอด้วย create-react-app **2. ติดตั้ง awsmobile CLI ลงในคอมพิวเตอร์ของคุณและรันในโครงการ**
จากจุดนี้ คุณควรให้ความสนใจกับแอปพลิเคชัน React ของคุณในโปรแกรมแก้ไขโค้ดของคุณ จะมีโฟลเดอร์เพิ่มเข้ามา เช่น /awsmobile และไฟล์ package.json ที่เพิ่มเติมเข้ามา
ในหน้าต่างเทอร์มินัล พิมพ์
npm ติดตั้ง -g awsmobile-cli
เพื่อติดตั้ง awsmobile-cli ทั่วโลก เราจะใช้สิ่งนี้หลังจากทำงานในคอนโซล AWS Mobile Hub
ตรวจสอบให้แน่ใจว่าคุณอยู่ในโครงการและประเภทของคุณ
เริ่มต้น awsmobile
คุณจะได้รับแจ้งด้วยชุดคำถาม ซึ่งค่าเริ่มต้นนั้นดี ดังนั้นให้กด Enter ผ่านการตั้งค่าแต่ละรายการจนกว่าจะเปิด AWS โดยอัตโนมัติในเบราว์เซอร์เริ่มต้นของคุณ เข้าสู่ระบบด้วยบัญชี Free Tier ของคุณ หากคุณยังไม่ได้ดำเนินการ
นี่เป็นการยืนยัน awsmobile-cli ว่าเราเชื่อมต่อกับบัญชี AWS ที่ถูกต้องแล้ว กลับไปที่เทอร์มินัลแล้วกด Enter เพื่อดำเนินการต่อ
AWS จำเป็นต้องตั้งค่าผู้ใช้เพื่อควบคุมแอปพลิเคชัน สิ่งนี้จะทำโดยอัตโนมัติโดย awsmobile-cli เมื่อคุณกด Enter ต่อไป
หลังจากเสร็จสิ้น คุณจะถูกนำไปที่ AWS IAM ซึ่งคุณเพียงแค่ âÃÂÃÂNextà ¢ÃÂàทางของคุณผ่านไปสู่ความสมบูรณ์! ในขั้นตอนที่สอง ควรมีการตรวจสอบโดยอัตโนมัติ âÃÂÃÂAdministrator AccessâÃÂàซึ่งให้ผู้ใช้เข้าถึงคุณสมบัติทั้งหมดของ AWS ที่เราต้องการ
เมื่อเสร็จแล้ว คุณจะต้องดาวน์โหลดไฟล์ .csv ด้วยข้อมูลรับรองลับของคุณ เนื่องจากไฟล์เหล่านี้จะแสดงเพียงครั้งเดียวใน AWS คีย์เหล่านี้จะใช้ในขั้นตอนถัดไปของหน้าต่างเทอร์มินัล
สิ่งนี้สร้างแอปพลิเคชัน AWS MobileHub ของคุณสำเร็จและติดตั้ง aws-aplify โดยอัตโนมัติ& aws-amplify-react ในโครงการ React ในเครื่องของคุณ
เมื่อกระบวนการนี้เสร็จสิ้น (ประมาณ 1 นาที) คุณสามารถพิมพ์
awsmobile คอนโซล
เพื่อดูแอปพลิเคชัน Mobile Hub ในเบราว์เซอร์เริ่มต้นของคุณ คุณยังสามารถพิมพ์ âÃÂÃÂawsmobileâÃÂàเพื่อดูรายการการดำเนินการต่างๆ จากที่นี่ เราจะเพิ่มการเข้าสู่ระบบ Cognito ด้วยเบราว์เซอร์ แต่คุณสามารถทำได้จาก awsmobile CLI
**3. เพิ่ม Cognito Sign-in และ Hosting จริง ๆ **
สำหรับขั้นตอนสุดท้าย เราจะเพิ่ม AWS Cognito ในโครงการของเราผ่าน AWS MobileHub Console คุณยังสามารถตรวจสอบโฮสติ้งซึ่งเปิดใช้งานอยู่แล้วตามค่าเริ่มต้น
หากต้องการทดสอบโฮสติ้ง ให้คลิกคุณลักษณะในคอนโซลของคุณแล้วคลิก URL ที่คุณระบุ เนื้อหานี้เป็นเทมเพลตโดย AWS แต่คุณจะเขียนทับด้วยแอปพลิเคชัน React ในเร็วๆ นี้
**หากต้องการเพิ่ม Cognito User Sign-in ให้เลื่อนลงเพื่อค้นหา âÃÂÃÂUser Sign-inâÃÂàแล้วคลิก **สิ่งนี้เปิดใช้งาน Cognito User Pools ด้วยระบบการตรวจสอบสิทธิ์ ใช้ âÃÂÃÂEmailâÃÂàจากที่อยู่อีเมลหรือหมายเลขโทรศัพท์เพื่อบังคับให้ใช้อีเมลเป็นชื่อผู้ใช้ในการเข้าสู่ระบบของคุณ หรือคุณสามารถใช้ Username และเปิดใช้งาน âÃÂÃÂEmailâÃÂà+ âÃÂÃÂUsernameâà Âàเพื่อให้ผู้ใช้เลือก คุณจะได้รับรหัสยืนยันทางอีเมลไม่ว่าทางใดก็ทางหนึ่ง
เรายอมรับอีเมลเนื่องจาก AWS ไม่เรียกเก็บเงินสำหรับการส่งรหัสยืนยันการลงทะเบียนไปยังอีเมล ในขณะที่การส่ง SMS มีค่าใช้จ่ายเป็นเงินจริง
ซึ่งส่งผลให้:
หากคุณคลิกการดำเนินการ >แก้ไขใน Cognito คุณจะเห็นคอนโซล Cognito สำหรับจัดการผู้ใช้และฟีเจอร์ความปลอดภัยขั้นสูง การตั้งค่าบางอย่างที่คุณทำในขั้นตอนนี้ไม่สามารถย้อนกลับได้ แต่คุณสามารถลบกลุ่มผู้ใช้และสร้างกลุ่มใหม่ได้ตลอดเวลา
การดำเนินการนี้ทำให้การกำหนดค่า AWS Cognito ภายใน MobileHub เสร็จสมบูรณ์ ถึงเวลาเพิ่มโค้ดแล้ว เท่าไร? 5 เส้น! และ 3 รายการนั้นเป็นการนำเข้าใน React เท่านั้น
= การเพิ่มการตั้งค่าของคุณในโครงการ React และเผยแพร่ไปยังเว็บไซต์ของคุณ =
ในเทอร์มินัลของคุณ คุณสามารถใช้ awsmobile pull หรือ awsmobile push เพื่อดึงการเปลี่ยนแปลงของคุณจาก AWS MobileHub Console ทางออนไลน์ไปยังแอปพลิเคชันของคุณตามลำดับ หรือส่งการเปลี่ยนแปลงในเครื่องผ่าน awsmobile CLI ในเทอร์มินัล
สำหรับกรณีการใช้งานนี้ เราต้องการดึงข้อมูลการเปลี่ยนแปลงที่เราทำ กลับไปที่เทอร์มินัลแล้วพิมพ์
ย้อนกลับไปใน VS Code คุณจะเห็นว่าตอนนี้โครงการของคุณได้รับการแก้ไขแล้ว คุณสามารถตรวจสอบการกำหนดค่าในเครื่องของคุณได้ใน ./awsmobile/backend/mobile-hub-project.yml
นอกจากนี้ ใน ./package.json youâÃÂàจะพบไลบรารีที่เน้นสีสองไลบรารีที่ถูกเพิ่มโดย awsmobile init ซึ่งเราทำก่อนหน้านี้
เราจะใช้ข้อมูลเหล่านี้เพื่อรวมแอปพลิเคชันของเราในหน้าต่างเข้าสู่ระบบ Cognito เปิด ./src/index.js และแก้ไขสิ่งนี้:
สำหรับสิ่งนี้:
นำเข้าปฏิกิริยาจาก 'ปฏิกิริยา';
นำเข้า ReactDOM จาก 'react-dom';
นำเข้า index.css';
นำเข้าแอพจากแอพ';
นำเข้า registerServiceWorker จาก registerServiceWorker';
นำเข้า awsMobile จาก aws-exports';
นำเข้าขยายจาก 'aws-amplify';
นำเข้า { withAuthenticator } จาก "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
