setzen

- เป็นผืนผ้าใบที่มีผู้เล่นหลายคนที่คุณวางกระเบื้องบนโลกที่ประกอบด้วย 'สามสาม' มันเป็นรีมิกซ์ของ April Fools Experiment R/Place ของ Reddit

คุณสามารถค้นหาตัวอย่างได้ที่ setzen.leifgehrmann.com

เซิร์ฟเวอร์

Setzen ใช้โมเดลแอปพลิเคชัน AWS Serverless โดยเฉพาะ

การปรับใช้

ในคู่มือนี้เราใช้ AWS SAM CLI เพื่อปรับใช้แอปพลิเคชัน

การติดตั้ง CLI

Amazon มีคู่มือของตัวเองสำหรับการติดตั้ง AWS SAM CLI

แต่ถ้าคุณติดตั้ง Docker คุณสามารถใช้ Dockerfile ได้โดยไม่ต้องติดตั้ง AWS SAM CLI บนเครื่องโฮสต์ของคุณ

 $ cd server
$ make build

เมื่อภาพสร้างขึ้นคุณจะสามารถเริ่มต้นเชลล์โดยใช้คำสั่งต่อไปนี้

 $ make aws-shell

ข้อมูลประจำตัว

เมื่อคุณอยู่ในเชลล์แบบโต้ตอบคุณจะต้องกำหนดค่า AWS-CLI เพื่อให้มีข้อมูลประจำตัวที่ถูกต้อง คำแนะนำเหล่านี้จะแนะนำคุณเกี่ยวกับวิธีการสร้างผู้ใช้ที่มีการเข้าถึงแบบเป็นโปรแกรม เมื่อแอปพลิเคชันถูกปรับใช้แล้วขอแนะนำให้เพิกถอนข้อมูลรับรอง โดยพื้นฐานแล้วทุกคนที่มีข้อมูลประจำตัวเหล่านี้อาจทำให้บัญชีของคุณได้ดังนั้นควรระมัดระวังอย่างมาก (ฉันไม่รู้จริง ๆ ว่านี่คือวิธีที่คุณ ควร ใช้ CloudFormation แต่มันไม่รู้สึกปลอดภัยจริงๆเหรอ?)

1. ในคอนโซล AWS นำทางไปยัง IAM และสร้างผู้ใช้ใหม่: https://us-east-1.console.aws.amazon.com/iam/home#/users$new?step=details
2. สำหรับขั้นตอน "รายละเอียด":
   • ป้อนชื่อผู้ใช้ (ตัวอย่าง: setzen )
   • เลือก "Access Key - Programmatic Access" เป็นประเภทการเข้าถึง AWS
   • ดำเนินการต่อไปยังขั้นตอน "สิทธิ์"
3. สำหรับขั้นตอนการอนุญาต:
   • คลิก "สร้างกลุ่ม":
     • ป้อนชื่อกลุ่ม (ตัวอย่าง: Setzen )
     • ภายใต้นโยบายตรวจสอบนโยบายการอนุญาตต่อไปนี้:
       • "Iamfullaccess"
       • "Amazons3Fullaccess"
       • "Amazondynamodbfullaccess"
       • "Amazonapigatewayadministrator"
       • "awscloudformationfullaccess"
       • "awslambda_fullaccess"
     • คลิก "สร้างกลุ่ม"
   • ดำเนินการไปยังขั้นตอน "แท็ก"
4. เลือกเพิ่มแท็กเพื่อช่วยในการจดจำรายละเอียดเกี่ยวกับผู้ใช้ IAM นี้ ดำเนินการต่อไปยังขั้นตอน "รีวิว"
5. ยืนยันรายละเอียดและดำเนินการต่อไปยังขั้นตอนต่อไป
6. ตรวจสอบให้แน่ใจว่าได้คัดลอก "Access Key ID" และ "Secret Access Key" และเก็บไว้ในตำแหน่งที่ปลอดภัย หลังจากขั้นตอนนี้หากคุณลืมคัดลอกข้อมูลรับรองคุณจะต้องลบและสร้างผู้ใช้ใหม่

ด้วยข้อมูลรับรองตอนนี้คุณสามารถกำหนดค่าได้โดยเรียกใช้ aws configure และจัดหาข้อมูลรับรองในพรอมต์

 $ aws configure
AWS Access Key ID [None]: your_access_key_id
AWS Secret Access Key [None]: your_secret_access_key
Default region name [None]: 
Default output format [None]: 

นำไปใช้

ในที่สุดคุณสามารถปรับใช้แอปพลิเคชันโดยใช้ sam deploy

 $ sam deploy --guided

ครั้งแรกที่คุณปรับใช้คุณจะได้รับแจ้งสำหรับการกำหนดค่าการปรับใช้บางอย่าง

• ชื่อสแต็ก (ตัวอย่าง: setzen-websockets-app )
• ภูมิภาค AWS
• พารามิเตอร์ (ชื่อของตาราง DynamoDB)
• ยืนยันการเปลี่ยนแปลงก่อนการปรับใช้ (แนะนำให้ใช้)
• อนุญาตให้มีการสร้างบทบาท Sam Cli Iam (แนะนำให้ใช้ Y)
• ปิดใช้งานการย้อนกลับ (แนะนำ n)
• บันทึกอาร์กิวเมนต์ไปยังไฟล์การกำหนดค่า (แนะนำให้ใช้ Y)
• ไฟล์กำหนดค่า SAM
• สภาพแวดล้อมการกำหนดค่า SAM

เมื่อเสร็จสมบูรณ์คุณควรเห็นในเอาต์พุต WebSocketuri ที่ปรับใช้ จดบันทึกสิ่งนี้ในภายหลังเมื่อตั้งค่าลูกค้า

การทดสอบ websocket

 $ cd test-wscast
$ npm install
$ npx wscat -c wss://{YOUR-API-ID}.execute-api.{YOUR-REGION}.amazonaws.com/Prod
> { "action": "sendmessage", "data": {"type": "readChunkInfo" } }
< {"type":"queue","data":{"positions":[],"colorIds":[],"times":[]}}

ลูกค้า

ในคอนโซลเปลี่ยนเป็นไดเรกทอรี client

ด้วยการติดตั้ง NPM ให้เรียกใช้คำสั่งต่อไปนี้:

ติดตั้งการพึ่งพา

 $ npm install

เพื่อกำหนดค่า

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

 $ export SETZEN_WEBSOCKET_URL='wss://xxxxxxxxxx.execute-api.xx-xxx-x.amazonaws.com/Prod'
$ export SETZEN_WEBAPP_HOST='example.com'
$ export SETZEN_CONTACT_EMAIL='[email protected]'
$ export SETZEN_CONTACT_URL='https://example.com/admin'
$ export SETZEN_CONTACT_ISSUES_URL='https://example.com/setzen/issues'
$ export SETZEN_CONTACT_PROJECT_URL='https://example.com/setzen'

เพื่อดู

 $ npm run build
$ npm run preview

เพื่อพัฒนา

 $ npm run dev

การระบุแหล่งที่มา

เดิมรหัส WebSocket ขึ้นอยู่กับ Websockets-Chat-App