= ปรับใช้ React Apps บน Amazon S3 =

== คำแนะนำ 5 นาทีเกี่ยวกับวิธีปรับใช้แอป React ด้วย S3 ==

![ ](httpsmiro.medium.com/max/1400/1*h4TLlisFk7XvtREAsS7C7Q.jpeg)

ดังนั้นคุณจึงทำแอป React ของคุณเสร็จแล้วและคุณกำลังมองหาโฮสต์ที่ไหนสักแห่ง คุณทราบหรือไม่ว่าคุณสามารถใช้ Amazon AWS S3 เพื่อโฮสต์แอป React ของคุณได้ มันค่อนข้างง่าย ต้นทุนต่ำ และรวดเร็วในการปรับใช้

= เริ่มกันเลย! =

== ข้อกำหนดเบื้องต้น ==

ก่อนที่เราจะเริ่มให้บริการโฮสติ้ง เรามาตั้งค่าการดูแลระบบกันก่อน ตรวจสอบให้แน่ใจว่าสิ่งต่อไปนี้เสร็จสมบูรณ์:

**คุณมีบัญชี AWS ลงทะเบียนสำหรับบัญชี AWS ที่นี่: httpsaws.amazon.com/resources/create-account/ **สร้างผู้ใช้ AWS ในคอนโซล AWS ไปที่แท็บ IAM และไปที่ à ¢ÃÂÃÂUsersâÃÂàส่วนบนแถบด้านข้าง

คลิกที่ âÃÂÃÂAdd UserâÃÂàและกาเครื่องหมาย âÃÂÃÂProgrammatic accessâàÂ.

![ ](httpsmiro.medium.com/max/1400/1*gMtvyUQ_X2YVYHwNfLeygg.png)

คลิก âÃÂÃÂNext: PermissionsâÃÂàและที่นี่เลือก âÃÂàแนบนโยบายที่มีอยู่โดยตรงâà ÂÃÂ. ตรวจสอบ âÃÂÃÂAdministratorAccessâÃÂàสำหรับวัตถุประสงค์ในการปรับใช้

![ ](httpsmiro.medium.com/max/1400/1*UfuPz5oak9QbxX0VXlNV5g.png)

คลิกที่ปุ่ม Next และสุดท้ายคลิกที่ âÃÂÃÂCreate userâÃÂÃÂ

![ ](httpsmiro.medium.com/max/1400/1*aSCgwjWRAINQHBV_bSRlvA.png)

ในขั้นตอนสุดท้าย เราได้รับ ID คีย์การเข้าถึงและคีย์การเข้าถึงลับ ดาวน์โหลดและ

** บันทึกไว้ในคอมพิวเตอร์ของคุณตามที่คุณต้องการในภายหลัง

== ติดตั้ง AWS CLI ==

AWS CLI เป็นเครื่องมืออันทรงพลังที่สามารถช่วยให้เราลดความซับซ้อนของกระบวนการปรับใช้

มาติดตั้ง AWS CLI โดยใช้ Homebrew (สำหรับ macOS) ติดตั้ง Homebrew หากคุณยังไม่ได้ติดตั้ง

*หมายเหตุ: หากคุณใช้ Windows คุณสามารถดูคำแนะนำในเอกสารอย่างเป็นทางการ * *ที่นี่*

เปิดเทอร์มินัลของคุณและป้อน

ชงติดตั้ง awscli

เมื่อติดตั้งเครื่องมือ CLI แล้ว เราสามารถกำหนดค่าบัญชี AWS ของเราด้วย

aws กำหนดค่า นี่คือที่ที่คุณจะต้องป้อนข้อมูลคีย์การเข้าถึงที่คุณดาวน์โหลดไว้ก่อนหน้านี้ มันควรจะเป็นดังนี้

สำหรับภูมิภาค คุณสามารถตรวจสอบ URL ของคุณบน AWS Console และ URL จะกล่าวถึงภูมิภาคของคุณ ตัวอย่างเช่น ของฉันคือ âÃÂÃÂap-southeast-1âÃÂÃÂ

![ ](httpsmiro.medium.com/max/1400/1*TbFgHQ9ey3SwBWtadBtqSQ.png)
= การสร้าง React App =

คุณอาจมีแอป React พร้อมที่จะปรับใช้แล้ว อย่างไรก็ตาม หากคุณต้องการแอปตัวอย่าง คุณสามารถใช้ตัวเลือกต่อไปนี้:

- สร้างแอป React ต้นแบบโดยเรียกใช้

npx create-react-app my-app

- ดาวน์โหลดแอป React ตัวอย่างของฉัน (พร้อมตัวอย่างแบบฟอร์ม) จาก httpsgithub.com/harishv7/react-hook-form-example สิ่งนี้เสร็จสิ้นสำหรับบทช่วยสอนเพื่อเพิ่มแบบฟอร์มในแอป React ลองดูที่นี่

เมื่อเสร็จแล้ว ตรวจสอบให้แน่ใจว่าได้ติดตั้งการพึ่งพาทั้งหมดโดยใช้

เส้นด้ายติดตั้งและให้แอปทำงานโดยใช้

เส้นด้ายเริ่มต้น

= ตั้งค่า S3 Bucket =

ตอนนี้เรามีแอปตัวอย่างพร้อมแล้ว ให้กำหนดค่าบัคเก็ต S3 เพื่อโฮสต์แอปของเรา

บน AWS Console ให้ค้นหา âÃÂÃÂS3âÃÂàและไปที่ S3 Dashboard คลิกที่ âÃÂÃÂCreate bucketâÃÂàและตั้งชื่อที่ฝากข้อมูล เช่น âÃÂÃÂmy-react -app-2021âÃÂà(หรืออะไรก็ได้ที่คุณต้องการ)

*หมายเหตุ: ชื่อบัคเก็ตจะต้องไม่ซ้ำกันใน S3 ทั้งหมด ดังนั้นให้เลือกชื่อเฉพาะที่ไม่มีอยู่ มิฉะนั้น คุณจะได้รับข้อผิดพลาด!* ![ ](httpsmiro.medium.com/max/1400/1*tLDgJ0HJNEUA9DwhD5XiUw.png)

เปิดการเข้าถึงบัคเก็ตแบบสาธารณะเนื่องจากเรากำลังโฮสต์มันอยู่

![ ](httpsmiro.medium.com/max/1400/1*Mqn0JUnqAvMMmimuLj7rTg.png)

ปล่อยให้การตั้งค่าที่เหลือเป็นไปตามที่เป็นอยู่ แล้วคลิก âÃÂÃÂCreate bucketâÃÂàคุณจะเห็นรายการดังต่อไปนี้บนแดชบอร์ด S3 ของคุณ

![ ](httpsmiro.medium.com/max/1400/1*pW6x0HIgq9WgauWy-SFIOw.png)

ให้คลิกและไปที่บัคเก็ต S3 ที่เราสร้างขึ้นใหม่

![ ](httpsmiro.medium.com/max/1400/1*PNhe4x_fs02RmMKIQmGbng.png)

LetâÃÂÃÂs คลิกที่ âÃÂÃÂPropertiesà¢ÃÂàและเลื่อนไปจนถึงด้านล่างสุดที่คุณจะ ดู âÃÂàการโฮสต์เว็บไซต์แบบคงที่âÃÂÃÂ

![ ](httpsmiro.medium.com/max/1400/1*mRdXzoHrc1LHQ8Hy-2V4UQ.png)

คลิกที่ âÃÂÃÂEnableâÃÂàและป้อน âÃÂÃÂindex.htmlâààภายใต้เอกสารดัชนี

![ ](httpsmiro.medium.com/max/1400/1*3d4nQKZrRAh5SmgbL0-yhA.png)

ปล่อยช่องอื่นๆ ให้เหมือนเดิม แล้วคลิก âÃÂÃÂSave changesâÃÂÃÂ

= ปรับใช้กับ S3 =

ตอนนี้ เราพร้อมที่จะปรับใช้แอปของเรากับ S3 แล้ว วิธีทำคือใช้คำสั่ง CLI ต่อไปนี้:

aws s3 sync build/s3your-bucket-name>--acl สาธารณะอ่าน
เราสามารถเพิ่มคำสั่งนี้ในไฟล์ package.json ของเราได้เช่นเดียวกับสคริปต์ âÃÂÃÂdeployâÃÂÃÂ

![ ](httpsmiro.medium.com/max/1400/1*BY8AO0YO7WqOUMPWA_XsVQ.png)

มาสร้างแอปของเราโดยใช้

โครงสร้างเส้นด้ายซึ่งช่วยสร้างโครงสร้างการผลิตที่เหมาะสมที่สุด

ต่อไป ให้เรียกใช้คำสั่ง CLI ที่ระบุข้างต้น หรือหากคุณตั้งค่าสคริปต์เผยแพร่ของคุณใน package.json เราสามารถใช้

เส้นด้ายปรับใช้

![ ](httpsmiro.medium.com/max/1400/1*8ZbQ49dzPzGo_TkYh3_H1w.png)

นั่นคือทั้งหมดที่ แอปของเราได้รับการปรับใช้แล้ว!

หากต้องการค้นหาตำแหน่งที่โฮสต์แอปของเรา (ลิงก์เว็บไซต์) ให้ไปที่คอนโซล AWS S3 แล้วคลิกบัคเก็ตที่คุณสร้างขึ้น

ไปที่แท็บ âÃÂÃÂPropertiesâÃÂàและเลื่อนลงไปจนถึงเว็บไซต์ âÃÂÃÂStatic ส่วน hostingâÃÂàและ URL ของเราจะอยู่ที่นั่น

![ ](httpsmiro.medium.com/max/1400/1*SbuQahvHex1KetHvddN2rw.png)

คลิกที่มันแล้วแอปของคุณจะเปิดขึ้นในแท็บใหม่ ที่นี่เป็นของฉัน!

![ ](httpsmiro.medium.com/max/1400/1*LcpVXd_SeBMLbJafgOAbEA.png)

= สรุป =

เราปรับใช้แอป React กับ Amazon S3 สำเร็จแล้ว! นี่เป็นทางเลือกที่ดีในการปรับใช้และทดสอบต้นแบบ React ของคุณอย่างรวดเร็วและแบ่งปันกับผู้อื่น มันง่ายมากและรวดเร็วในการปรับใช้เช่นกัน

หวังว่าบทช่วยสอนนี้จะเป็นประโยชน์สำหรับคุณ!

มีความสุขในการเข้ารหัส! ðÃÂÃÂû

*เนื้อหาเพิ่มเติมที่ * *plainenglish.io*