วิธีใช้ AWS Amplify เพื่อปรับใช้แอปพลิเคชัน React

= วิธีใช้ AWS Amplify เพื่อปรับใช้แอปพลิเคชัน React =

== คำแนะนำในการปรับใช้ React Applications ด้วย AWS Amplify ==

![ ](httpsmiro.medium.com/max/1400/1*pKiBeVwoxaHc_QlhIpVgSA.gif)

ตั้งแต่ฉันเริ่มให้คำปรึกษาในฐานะวิศวกรซอฟต์แวร์ ฉันต้องการที่จะรวบรวมเว็บไซต์พอร์ตโฟลิโอที่แสดงผลงาน

โครงการส่วนบุคคลและมืออาชีพที่ฉันทำอยู่ วันหยุดฤดูหนาวนี้ ฉันใช้เวลาไปกับการออกแบบ พัฒนา และปรับใช้ไซต์พอร์ตโฟลิโอของฉัน และในบทความนี้ ฉันจะแนะนำคุณเกี่ยวกับวิธีการปรับใช้กับ AWS Amplify คุณสามารถดูเว็บไซต์ได้ที่ dan-murphy.com และโค้ดบน GitHub

= ความเป็นมาโดยย่อ =

งานระดับมืออาชีพส่วนใหญ่ของฉันเกี่ยวข้องกับการสร้างแอปพลิเคชันที่ขับเคลื่อนด้วยข้อมูลและการปรับปรุงดาต้าไปป์ไลน์ เพื่อให้งานเหล่านี้สำเร็จ ฉันใช้ Python และ Ruby เป็นประจำและรวม JavaScript สำหรับงานส่วนหน้า ในความพยายามที่จะคุ้นเคยกับ React มากขึ้น ฉันตัดสินใจใช้เฟรมเวิร์กเพื่อสร้างเว็บไซต์พอร์ตโฟลิโอของฉัน

= การตั้งค่าแอปพลิเคชัน =

ขั้นตอนแรกที่ฉันทำคือตัดสินใจว่าจะจัดโครงสร้างแอปพลิเคชันอย่างไร ฉันใช้

create-react-app เป็นเทมเพลตพื้นฐานสำหรับไดเร็กทอรีของฉัน จากนั้นจัดโครงสร้างแอปพลิเคชันใหม่ด้วยโฟลเดอร์เพิ่มเติมสองสามโฟลเดอร์ การตั้งค่าขั้นสุดท้ายมีลักษณะดังนี้:

src

 ส่วนประกอบ

âÃÂÃÂเอกสารสำคัญ

âÃÂÃÂพิเศษ

âÃÂÃÂข้อมูล

âÃÂÃÂimgs

 หน้า

âÃÂÃÂเนื้อหา

âÃÂÃÂข้อมูล

 สไตล์

 การทดสอบ

 ติดตั้ง

การเปลี่ยนแปลงที่โดดเด่นบางประการคือ

**ส่วนประกอบ**

, และ

**หน้า**

ไดเรกทอรี

**สไตล์**

,

: นี่คือที่ที่ฉันเก็บส่วนประกอบทั้งหมดสำหรับแอปพลิเคชัน การจัดเก็บส่วนประกอบไว้ในโฟลเดอร์ส่วนกลางช่วยให้นำกลับมาใช้ใหม่และปรับโครงสร้างโค้ดได้ง่ายขึ้น และยังช่วยให้ผู้อื่นเข้าใจได้ง่ายขึ้นด้วย ส่วนประกอบบางอย่างที่ประกอบกันเป็นเว็บไซต์ผลงานของฉันคือ

ส่วนประกอบ

หัวข้อ,

ส่วนท้ายและ

แถบด้านข้างโครงการ

: ที่นี่ฉันสร้างหน้าเฉพาะสำหรับแอปพลิเคชัน ฉันนำเข้าส่วนประกอบที่จำเป็นจากไฟล์

หน้า

โฟลเดอร์แล้วรวมเข้าด้วยกันเพื่อออกแบบเพจ นี่คือตัวอย่างของวิธีที่ฉันทำสิ่งนี้ให้กับ

หน้าแรกของส่วนประกอบ:

: นี่คือที่ที่ฉันกำหนดสไตล์ CSS ส่วนกลางสำหรับแอปพลิเคชัน ฉันรักที่จะใช้

สไตล์

styled-components สำหรับแต่ละคอมโพเนนต์ แต่ฉันก็พบว่าการสร้างสไตล์ส่วนกลางที่พร้อมใช้งานสำหรับแต่ละหน้านั้นมีประโยชน์เช่นกัน

สุดท้าย เราใช้

ปฏิกิริยา-เราเตอร์-dom. เส้นทางถูกกำหนดไว้ใน

ไฟล์ App.js ดังที่แสดงด้านล่าง:

นี่จะเป็นแผนที่

หน้าแรก,

/projects ขอให้

หน้าโครงการ,
/ เกี่ยวกับคำขอถึง

เกี่ยวกับเพจและ

/ชั้นหนังสือร้องขอให้

หน้าหนังสือ เมื่อการพัฒนาแอปพลิเคชันเสร็จสมบูรณ์แล้ว เราจำเป็นต้องปรับใช้เพื่อให้ผู้อื่นสามารถใช้งานได้!

/ขอให้

= การปรับใช้ด้วย AWS Amplify =

== ภาพรวม ==

มีหลายวิธีในการปรับใช้เว็บไซต์ React แต่ฉันพบว่าหนึ่งในวิธีที่ง่ายที่สุดคือการใช้

**AWS Amplify Amplify ได้รับการอธิบายว่าเป็น âÃÂàวิธีที่เร็วและง่ายที่สุดในการสร้างแอปมือถือและเว็บที่ปรับขนาดได้ âÃÂàเพื่อให้บรรลุผลสำเร็จ AWS ประเมินความยุ่งยากทั้งหมดของการตั้งค่าเซิร์ฟเวอร์ การติดตั้งการพึ่งพา และการสร้างรุ่นที่ใช้งานจริงสำหรับเว็บไซต์ของคุณ ช่วยให้คุณมุ่งเน้นเฉพาะการสร้าง UX ที่ใช้งานง่าย หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับข้อเสนอของ AWS Amplify สำหรับแอปพลิเคชันที่ขับเคลื่อนด้วยข้อมูล (โดยเฉพาะ เว็บไซต์ที่มี **ส่วนหน้า** และ **ส่วนหลัง โปรดดูเอกสารประกอบ

== การเชื่อมต่อพื้นที่เก็บข้อมูลของคุณ ==

ในการโฮสต์เว็บแอปของคุณบน AWS Amplify คุณต้องเชื่อมต่อพื้นที่เก็บข้อมูลที่มีซอร์สโค้ดของคุณก่อน ในการทำเช่นนี้ คุณสามารถไปที่

*AWS Amplify* *เริ่มต้นใช้งาน* **โฮสต์ My Web App แล้วคลิก **เชื่อมต่อ repo แอป *page, scroll to*page, scroll to ![ ](httpsmiro.medium.com/max/1400/1*2OLIf9dDvf2ZDqjhXUXuGw.png )

จากนั้น คุณจะถูกนำไปยังหน้าที่แยกต่างหากซึ่งคุณสามารถเชื่อมต่อที่เก็บที่มีซอร์สโค้ดของคุณได้ สำหรับตัวอย่างนี้ ฉันจะเลือก GitHub แต่ AWS Amplify ยังรองรับ BitBucket, GitLab, AWS CodeCommit และแม้กระทั่งการปรับใช้โดยไม่มีผู้ให้บริการ Git

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

หลังจากการอนุญาตสำเร็จ คุณสามารถเลือกพื้นที่เก็บข้อมูลที่คุณต้องการปรับใช้และเลือก AWS Amplify สาขาที่ควรใช้สำหรับการสร้างการผลิต

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

หลังจากนั้นคลิก

**ถัดไป** และ AWS จะขอให้คุณกำหนดการตั้งค่า *build* และ *test* เทมเพลตพื้นฐานที่ AWS มีให้แสดงอยู่ด้านล่าง

รุ่น: 1

ส่วนหน้า:

ขั้นตอน:

สร้างล่วงหน้า:

คำสั่ง:

- สร้างการติดตั้ง npm:

คำสั่ง:

- npm รันบิลด์

สิ่งประดิษฐ์:

ไดเรกทอรีฐาน: สร้าง

ไฟล์:

-

แคช:

เส้นทาง:

- node_modules

นอกจากนี้ภายใต้

สวิตช์ **การตั้งค่าขั้นสูง** คุณสามารถตั้งค่าตัวแปรสภาพแวดล้อมและคอนเทนเนอร์บิลด์แบบกำหนดเองได้

สุดท้าย หลังจากตรวจสอบการตั้งค่าสำหรับแอปพลิเคชันของคุณแล้ว ให้คลิก


**บันทึกและปรับใช้ **และ **AWS จะเริ่มกำหนดค่าและปรับใช้แอปพลิเคชันของคุณ เมื่อปรับใช้ AWS เสร็จแล้ว คุณสามารถไปที่หน้าแรกของ Amplify และดูว่าแอปพลิเคชันที่เพิ่งปรับใช้ใหม่ของคุณAWS จะเริ่มกำหนดค่าและปรับใช้แอปพลิเคชันของคุณ เมื่อปรับใช้ AWS เสร็จแล้ว คุณสามารถไปที่หน้าแรกของ Amplify และดูแอปพลิเคชันที่เพิ่งปรับใช้ได้

ตอนนี้ มาปรับแต่ง URL โดยใช้

**การจัดการโดเมน AWS Amplify

== การเพิ่มโดเมนที่กำหนดเอง ==

ในการเริ่มต้นเพิ่มโดเมนแบบกำหนดเอง ให้ไปที่แถบด้านข้างซ้ายแล้วเลือก

**การจัดการโดเมน ![ ](httpsmiro.medium.com/max/1400/1*fo8ZsKK7c3QvAwpjzMXcWg.png)

**การจัดการโดเมน**การตั้งค่า

จากนั้นเลือก

**เพิ่มโดเมน **กำหนดค่าโดเมน **ป้อนชื่อโดเมนของคุณ (ตามที่แสดงด้านล่าง) แล้วคลิก**ป้อนชื่อโดเมนของคุณ (ตามที่แสดงด้านล่าง) แล้วคลิก ![ ](httpsmiro.medium.com/max/1400/ 1*e57WryLPTPC7Ro-_d5XAgQ.png)

หลังจากนี้ คุณสามารถตั้งค่าการเปลี่ยนเส้นทางที่จำเป็นสำหรับโดเมนของคุณ ตัวอย่างเช่น ในตัวอย่างต่อไปนี้ ฉันสร้างการเปลี่ยนเส้นทางจาก httpsdan-murphy.com ไปยัง httpswww.dan-murphy.com

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

สุดท้าย หลังจากกำหนดค่าโดเมนแบบกำหนดเองของคุณอย่างถูกต้องแล้ว AWS จะให้ a

**ใบรับรองการตรวจสอบ คุณยังสามารถดูใบรับรองนี้ได้ในคอนโซล AWS Certificate Manager

== การเพิ่มระเบียน CNAME ==

ขั้นตอนสุดท้ายในการกำหนดค่าโดเมนที่กำหนดเองคือการเพิ่มระเบียน CNAME ในตัวอย่างต่อไปนี้ ฉันใช้ Google Domains แต่แนวคิดพื้นฐานยังคงเหมือนกันในผู้รับจดทะเบียนโดเมนต่างๆ

ก่อนอื่นให้เลื่อนลงไปที่

**ระเบียนทรัพยากรที่กำหนดเอง** ใน Google Domains สร้างระเบียน *CNAME *ที่ชี้โดเมนย่อยทั้งหมดไปยังโดเมน AWS Amplify: ชื่อ: ป้อนชื่อโดเมนย่อย หากโดเมนย่อยคือ www.domain.com ให้ป้อน หากเป็น www app.domain.com ให้ป้อน app ข้อมูล: ในหน้าการจัดการโดเมน ให้คลิก Actions แล้วเลือก View DNS Records จากนั้น ป้อนโดเมน AWS Amplify ที่อยู่ภายใต้การกำหนดค่าผู้ให้บริการ DNS ![ ](httpsmiro.medium.com/max/1400/1*SSRoAAkYjf5dT2rD-kmEQw.png)

หน้า **Domains Management** เลือก **Actions **View DNS Records**

โดยรวมแล้ว ระเบียนทรัพยากรที่กำหนดเองจะมีลักษณะดังนี้:

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

ถัดไปเพิ่มอีกหนึ่ง

บันทึก *CNAME* ที่ชี้ไปยังเซิร์ฟเวอร์การตรวจสอบความถูกต้องของ AWS Certificate Manager AWS Certificate Manager ที่ผ่านการตรวจสอบจะจัดการ TLS สำหรับแอปพลิเคชันของคุณ: ชื่อ: ป้อนโดเมนย่อยของเซิร์ฟเวอร์การตรวจสอบความถูกต้อง หากระเบียน DNS สำหรับยืนยันความเป็นเจ้าของโดเมนของคุณคือ _1234.example.com ให้ป้อนเฉพาะ _1234 ข้อมูล: ป้อนใบรับรองการตรวจสอบ ACM หากเซิร์ฟเวอร์การตรวจสอบคือ _1234.abcdefg.acm-validations.aws. ให้ป้อน _1234.abcdefg.acm-validations.aws

พบข้อมูลทั้งหมดสำหรับใบรับรองการตรวจสอบของคุณในคอนโซล AWS Certificate Manager หลังจากวินาที
เพิ่ม *CNAME* แล้ว ระเบียนที่กำหนดเองของคุณควรมีลักษณะดังนี้: ![ ](httpsmiro.medium.com/max/1400/1*79yex2fObLiK0Q0f0X4zeA.png)

สุดท้าย ขอเพิ่ม a

**Synthetic Record** เพื่อตั้งค่าการส่งต่อโดเมนย่อย: โดเมนย่อย: ป้อน URL ของโดเมน: www. ![ ](httpsmiro.medium.com/max/1400/1*xi6ivE7Vsfz9AheFAHxPZQ.png)

= สรุป =

โดยรวมแล้ว ในบทความนี้ เราได้เรียนรู้วิธีจัดโครงสร้างแอปพลิเคชัน React และปรับใช้กับ AWS Amplify ขั้นแรก เราได้กล่าวถึงวิธีทำให้แอปพลิเคชันตอบสนองเป็นโมดูล

*ส่วนประกอบ* *หน้า* โฟลเดอร์ จากนั้น เราได้เรียนรู้เกี่ยวกับ **AWS Amplify** และวิธีการปรับใช้แอปพลิเคชันแบบสแตติกและที่ขับเคลื่อนด้วยข้อมูลด้วย สุดท้าย เราได้เรียนรู้เกี่ยวกับการใช้ **AWS Amplify Domain Management** และ **Google Domains **เพื่อปรับแต่งโดเมนของแอปพลิเคชันของเรา **และ**และ

หากคุณมีคำถาม ข้อกังวล หรือคำติชมเกี่ยวกับบทความนี้หรือไซต์ผลงานของฉัน โปรดอย่าลังเลที่จะแสดงความคิดเห็นหรือส่งอีเมลถึงฉันที่

*[email protected]*. ขอบคุณที่อ่าน!