โปรเจกต์ใน AWS

สร้างเว็บแอปพลิเคชันสมัยใหม่

ติดตั้งเว็บแอปพลิเคชันเพื่อใช้จริง เชื่อมต่อกับฐานข้อมูล และวิเคราะห์พฤติกรรมของผู้ใช้

โมดูลที่ 4: ตั้งค่าการลงทะเบียนผู้ใช้

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

ภาพรวม

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

จากนั้น เพื่อให้แน่ใจว่าเราจะอนุญาตเฉพาะผู้ใช้ที่ลงทะเบียนเท่านั้นให้ถูกใจหรือรับอุปการะสัตว์ประหลาดบนเว็บไซต์ได้ เราจะนำ REST API มาใช้งานจริงด้วย Amazon API Gateway เพื่อให้อยู่ด้านหน้า NLB ของเรา นอกจากนี้ Amazon API Gateway ยังเป็นบริการที่มีการจัดการ และให้ความสามารถของ REST API ที่จำเป็นโดยทั่วไปที่ใช้งานได้ทันที เช่น การสิ้นสุด SSL การอนุญาตคำขอ การควบคุมปริมาณ ระยะและการกำหนดเวอร์ชัน API และอื่นๆ อีกมากมาย

คุณจะใช้ AWS CLI อีกครั้งในการติดตั้งทรัพยากรที่จำเป็นเพื่อใช้จริงกับ AWS

แผนผังสถาปัตยกรรม

แผนผังสถาปัตยกรรมการตั้งค่าการลงทะเบียนผู้ใช้

 เวลาดำเนินการ

60 นาที

คำแนะนำในการนำมาใช้งาน

  • ก: สร้างกลุ่มผู้ใช้ Cognito

    เพื่อสร้างกลุ่มผู้ใช้ Cognito ที่จะจัดเก็บผู้มาเยี่ยมชม Mythical Mysfits ทุกราย สั่งดำเนินการคำสั่ง CLI ต่อไปนี้ เพื่อสร้างกลุ่มผู้ใช้ที่ชื่อ MysfitsUserPool และกำหนดว่าผู้ใช้ทั้งหมดที่ลงทะเบียนในกลุ่มนี้ควรได้รับการตรวจยืนยันที่อยู่อีเมลโดยอัตโนมัติผ่านทางอีเมลยืนยัน ก่อนที่จะเปลี่ยนเป็นผู้ใช้ที่ยืนยันแล้ว

    aws cognito-idp create-user-pool --pool-name MysfitsUserPool --auto-verified-attributes email

    คัดลอกคำตอบจากคำสั่งข้างต้นนี้ ซึ่งจะมี ID ไม่ซ้ำกันสำหรับกลุ่มผู้ใช้ของคุณ ซึ่งคุณจำเป็นต้องใช้ในขั้นตอนภายหลัง เช่น Id: us-east-1_ab12345YZ)

    ข: สร้างไคลเอ็นต์กลุ่มผู้ใช้ Cognito

    จากนั้น เพื่อรวมเว็บไซต์ฟรอนเอนด์ของเรากับ Cognito เราต้องสร้างไคลเอ็นต์กลุ่มผู้ใช้ใหม่สำหรับกลุ่มผู้ใช้นี้ ซึ่งจะสร้างตัวระบุไคลเอ็นต์ไม่ซ้ำกันที่จะทำให้เว็บไซต์ของเราได้รับอนุญาตให้เรียก API ที่ยังไม่ได้รับรองความถูกต้องใน Cognito ซึ่งผู้ใช้เว็บไซต์สามารถลงชื่อเข้าใช้และลงทะเบียนกับกลุ่มผู้ใช้ Mythical Mysfits เพื่อสร้างไคลเอ็นต์ใหม่โดยใช้ AWS CLI สำหรับกลุ่มผู้ใช้ข้างต้น เรียกใช้คำสั่งต่อไปนี้ (แทนค่า --user-pool-id ด้วยค่าที่คุณคัดลอกมาข้างต้น):

    aws cognito-idp create-user-pool-client --user-pool-id REPLACE_ME --client-name MysfitsUserPoolClient
  • ต่อไป เราจะหันมาสนใจกับการสร้าง RESTful API ใหม่ข้างหน้าบริการ Flask ที่มีอยู่ของเรา เพื่อให้เราสามารถทำการอนุญาตคำขอได้ ก่อนที่ NLB ของเราจะได้รับคำขอใดๆ ซึ่งเราจะทำด้วย Amazon API Gateway ตามที่ได้อธิบายไว้ในภาพรวมของโมดูล

    เพื่อให้ API Gateway รวมเข้ากับ NLB ของเราโดยส่วนตัว เราจะกำหนดค่าลิงก์ VPC สำหรับ API Gateway ที่ทำให้ API ของ API Gateway สามารถรวมเข้าโดยตรงกับบริการบนเว็บแบ็คเอนด์ที่โฮสต์อย่างเป็นส่วนตัวภายใน VPC หมายเหตุ: เพื่อจุดประสงค์ของเวิร์กช้อปนี้ เราได้สร้าง NLB ที่มีการเชื่อมต่อกับอินเทอร์เน็ต เพื่อให้สามารถเรียกได้โดยตรงในโมดูลก่อนหน้านี้ เนื่องด้วยเหตุนี้ ถึงแม้ว่าเราจะกำหนดให้ต้องมีโทเค็นการอนุญาตใน API ของเราหลังจากโมดูลนี้ NLB ของเรายังคงเปิดต่อสาธารณะจริงๆ เบื้องหลัง API ของ API Gateway

    ในสถานการณ์จริง คุณควรสร้าง NLB ให้เป็นแบบภายในตั้งแต่เริ่มต้น (หรือสร้างโหลดบาลานเซอร์ภายในตัวใหม่เพื่อใช้แทนอันที่มีอยู่) โดยทราบว่า API Gateway จะเป็นกลยุทธ์ของคุณสำหรับการอนุญาต API ที่เชื่อมต่อกับอินเทอร์เน็ต แต่เพื่อประหยัดเวลา เราจะใช้ NLB ที่เราสร้างไว้แล้วโดยจะยังคงเข้าถึงได้ทางสาธารณะ

    สร้างลิงก์ VPC สำหรับ REST API ที่จะเข้ามาของเราโดยใช้คำสั่ง CLI ต่อไปนี้ (คุณจะต้องแทนค่าที่ระบุด้วย ARN ของโหลดบาลานเซอร์ที่คุณบันทึกไว้เมื่อสร้าง NLB ในโมดูลที่ 2):

    aws apigateway create-vpc-link --name MysfitsApiVpcLink --target-arns REPLACE_ME_NLB_ARN > ~/environment/api-gateway-link-output.json

    คำสั่งข้างต้นนี้จะสร้างไฟล์ที่ชื่อ api-gateway-link-output.json ซึ่งจะมี ID สำหรับลิงก์ VPC ที่จะถูกสร้างขึ้น นอกจากนี้ยังแสดงสถานะว่า PENDING คล้ายๆ กับด้านล่างนี้

    การสร้างจะใช้เวลาราว 5-10 นาทีจึงจะเสร็จ คุณสามารถคัดลอก ID จากไฟล์นี้และดำเนินการต่อในขั้นตอนถัดไป

    {
        "status": "PENDING",
        "targetArns": [
            "YOUR_ARN_HERE"
        ],
        "id": "abcdef1",
        "name": "MysfitsApiVpcLink"
    }

    เมื่อสร้างลิงก์ VPC แล้ว เราสามารถดำเนินการต่อเพื่อสร้าง REST API จริงได้โดยใช้ Amazon API Gateway

    ข: สร้าง REST API โดยใช้ Swagger

    REST API ของ MythicalMysfits ของคุณได้รับการกำหนดโดยใช้ **Swagger** ซึ่งเป็นเฟรมเวิร์กโอเพนซอร์สยอดนิยมสำหรับการอธิบาย API ด้วย JSON การกำหนด API ของ Swagger อยู่ใน `~/environment/aws-modern-applicaiton-workshop/module-4/aws-cli/api-swagger.json` เปิดไฟล์นี้ แล้วคุณจะเห็น REST API และทรัพยากร เมธอด และกำหนดค่าที่กำหนดไว้ภายในนั้นทั้งหมด

    ไฟล์ JSON ดังกล่าวมีหลายแห่งที่จะต้องอัปเดต เพื่อใส่พารามิเตอร์เฉพาะกลุ่มผู้ใช้ Cognito ของคุณ รวมทั้ง Network Load Balancer ของคุณด้วย

    อ็อบเจ็กต์ `securityDefinitions` ภายในการกำหนด API ระบุว่าเราได้ตั้งค่ากลไกการอนุญาต apiKey แล้วโดยใช้ส่วนหัวของการอนุญาต คุณจะสังเกตเห็นว่า AWS ได้ให้ส่วนขยายแบบกำหนดเองให้แก่ Swagger โดยนำหน้าด้วย `x-amazon-api-gateway-` ส่วนขยายเหล่านี้เป็นส่วนที่สามารถเพิ่มการทำงานเฉพาะของ API Gateway ให้กับไฟล์ Swagger ทั่วไปได้ เพื่อใช้ประโยชน์จากความสามารถเฉพาะของ API Gateway

    กด CTRL-F ทั่วทั้งไฟล์ เพื่อค้นหาตำแหน่งต่างๆ ที่มี `REPLACE_ME` และรอพารามิเตอร์เฉพาะของคุณ เมื่อแก้ไขเสร็จแล้ว บันทึกไฟล์และสั่งดำเนินการคำสั่ง AWS CLI ต่อไปนี้:  

    aws apigateway import-rest-api --parameters endpointConfigurationTypes=REGIONAL --body file://~/environment/aws-modern-application-workshop/module-4/aws-cli/api-swagger.json --fail-on-warnings

    คัดลอกคำตอบที่คำสั่งนี้ส่งมาให้ และบันทึกค่าของ `id` สำหรับขั้นตอนถัดไป:

    {
        "name": "MysfitsApi",
        "endpointConfiguration": {
            "types": [
                "REGIONAL"
            ]
        },
        "id": "abcde12345",
        "createdDate": 1529613528
    }
    ค: ติดตั้ง API เพื่อใช้จริง

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

    คุณใช้ระยะเพื่อจัดการและปรับการติดตั้งใช้จริงให้อยู่ในระดับที่เหมาะสม ตัวอย่างเช่น คุณสามารถตั้งค่าระยะเพื่อทำให้สามารถเขียนแคชได้ ปรับแต่งการควบคุมปริมาณคำขอ กำหนดค่าการลงบันทึก กำหนดตัวแปรของระยะ หรือแนบรุ่นคานารีสำหรับการทดสอบ เราเรียกระยะนี้ว่า `prod` เพื่อสร้างการติดตั้งใช้จริงสำหรับระยะ prod สั่งดำเนินการคำสั่ง CLI ต่อไปนี้:

    aws apigateway create-deployment --rest-api-id REPLACE_ME_WITH_API_ID --stage-name prod

    คำสั่งดังกล่าวทำให้ REST API ของเราที่มีความสามารถในการอนุญาตผู้ใช้ถูกนำไปติดตั้งใช้จริงและใช้งานได้บนอินเทอร์เน็ต... แต่ว่าอยู่ที่ไหน API ของคุณมีอยู่ในตำแหน่งต่อไปนี้:

    https://REPLACE_ME_WITH_API_ID.execute-api.REPLACE_ME_WITH_REGION.amazonaws.com/prod

    คัดลอกข้างบนนี้ โดยแทนค่าที่เหมาะสม และเติม `/mysfits` ต่อท้าย URI เมื่อป้อนในแถบที่อยู่ของเบราว์เซอร์แล้ว คุณควรจะเห็นคำตอบ JSON ของ Mysfits ของคุณอีกครั้ง แต่เราได้เพิ่มความสามารถไปหลายอย่าง เช่น การรับอุปการะและการถูกใจสัตว์ประหลาด ซึ่งยังไม่ได้นำแบ็คเอนด์ของบริการ Flask มาใช้งาน

    ซึ่งเราจะดูแลเรื่องนั้นต่อไป

    ในขณะที่การอัปเดตบริการเหล่านั้นถูกพุชโดยอัตโนมัติผ่านทางไปป์ไลน์ CI/CD ของคุณ ดำเนินการต่อที่ขั้นตอนถัดไป

  • ก: อัปเดตแบ็คเอนด์ของบริการ Flask

    เพื่อรองรับการทำงานใหม่ในการดูโปรไฟล์สัตว์ประหลาด ถูกใจ และรับอุปการะ เราได้รวมโค้ด Python ที่อัปเดตแล้วสำหรับบริการบนเว็บ Flask แบ็คเอนด์ของคุณไว้แล้ว

    เราจะเขียนทับโค้ดเบสที่มีอยู่ของคุณด้วยไฟล์เหล่านี้ และพุชลงในคลัง:

    cd ~/environment/MythicalMysfitsService-Repository/
    cp -r ~/environment/aws-modern-application-workshop/module-4/app/* .
    git add .
    git commit -m "Update service code backend to enable additional website features."
    git push

    ในขณะที่การอัปเดตบริการเหล่านั้นถูกพุชโดยอัตโนมัติผ่านทางไปป์ไลน์ CI/CD ของคุณ ดำเนินการต่อที่ขั้นตอนถัดไป

    ข: อัปเดตเว็บไซต์ Mythical Mysfits ใน S3

    เปิดไฟล์ index.html ของ Mythical Mysfits เวอร์ชันใหม่ที่เราจะพุชลงใน Amazon S3 ในไม่ช้า ซึ่งอยู่ที่: ~/environment/aws-modern-application-workshop/module-4/app/web/index.html ในไฟล์ index.html ใหม่นี้ คุณจะสังเกตเห็นโค้ด HTML และ JavaScript เพิ่มเติมที่ใช้เพื่อเพิ่มประสบการณ์การลงทะเบียนผู้ใช้และการเข้าสู่ระบบ

    โค้ดนี้จะโต้ตอบกับ JavaScript SDK ของ AWS Cognito เพื่อช่วยจัดการการลงทะเบียน การรับรองความถูกต้อง และการอนุญาตให้กับการเรียก API ทั้งหมดที่ต้องการ

    ในไฟล์นี้ แทนค่าสตริง REPLACE_ME ในเครื่องหมายคำพูดเดียวด้วย OutputValues ที่คุณคัดลอกมาจากด้านบนนี้ และบันทึกไฟล์:

    before-replace2

    นอกจากนี้ สำหรับกระบวนการลงทะเบียนผู้ใช้ rคุณมีไฟล์ HTML เพิ่มอีกสองไฟล์ เพื่อใส่ค่าเหล่านี้ ได้แก่ register.html และ confirm.html ใส่ค่าที่คัดลอกมาลงในสตริง REPLACE_ME ในไฟล์เหล่านี้เช่นกัน

    ตอนนี้ เราจะคัดลอกไฟล์ HTML เหล่านี้และ Cognito JavaScript SDK ลงในบัคเก็ต S3 ที่โฮสต์เนื้อหาเว็บไซต์ Mythical Mysfits ของเรา เพื่อให้สามารถเผยแพร่คุณสมบัติใหม่ทางออนไลน์ได้

    aws s3 cp --recursive ~/environment/aws-modern-application-workshop/module-4/web/ s3://YOUR-S3-BUCKET/

    รีเฟรชเว็บไซต์ Mythical Mysfits ในเบราว์เซอร์ของคุณ เพื่อดูการทำงานใหม่สดๆ

    นี่คือการสรุปโมดูลที่ 4

สุดท้าย บันทึกพฤติกรรมของผู้ใช้