photo sharing website

เว็บไซต์แบ่งปันภาพถ่าย

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

แนวคิด

• เว็บไซต์คงที่ - เว็บแอปที่เข้าถึงได้สาธารณะ
• เว็บแอปพลิเคชันผู้ดูแลระบบ - เว็บแอปพลิเคชันที่ป้องกันด้วยรหัสผ่าน (แอปพลิเคชันเว็บ react.js) ที่ใช้ในการสร้างเว็บไซต์คงที่ตามความต้องการ

วิดีโอ YouTube ด้านล่างแสดงให้เห็นว่าทุกอย่างทำงานอย่างไร:

สถาปัตยกรรม

1. การกระจาย CloudFront ด้วย / Path ใน S3 Bucket เป็นจุดกำเนิด
2. การกระจาย CloudFront พร้อมเส้นทาง /website ใน S3 Bucket เป็น Origin
3. S3 Bucket ซึ่งถือทรัพยากรแบบคงที่ทั้งหมด (HTML, CSS, JavaScript และ Images)
4. ถัง S3 พร้อมรูปภาพที่อัปโหลดเริ่มต้น
5. AWS Lambda ใช้ในการสร้างซอร์สโค้ด HTML ของเว็บไซต์คงที่
6. AWS Lambda ใช้ในการสร้างรูปขนาดย่อและตรวจจับฉลากที่เกี่ยวข้องสำหรับภาพถ่ายที่อัปโหลดโดยใช้ Amazon Rekognition
7. Amazon Cognito เพื่อให้การรับรองความถูกต้องสำหรับผู้ใช้งานผู้ดูแลระบบ

การปรับใช้

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

• สร้างบัญชี AWS
• ติดตั้ง AMPLIFY CLI
• ติดตั้ง NPM

คำแนะนำ

1. โคลนที่เก็บ

 git clone https://github.com/cornelcroi/photo-sharing-website.git

2. การดำเนินการเบื้องต้น

• อีเมลผู้ดูแลระบบ

  • แทนที่ [email protected] ด้วยที่อยู่อีเมลของคุณเองใน amplify/backend/boostrap/adminuser/parameters.json

• การปรับขนาดภาพ

  • แอปพลิเคชันปรับขนาดภาพโดยใช้ห้องสมุด sharp บรรจุเป็นเลเยอร์แลมบ์ดา
  • สร้างเลเยอร์ที่คมชัด ทำตามบทช่วยสอนนี้เพื่อสร้างเลเยอร์ที่คมชัดในภูมิภาคที่คุณต้องการจากนั้นอัปเดตเลเยอร์ ARN ใน amplify/backend/function/S3TriggeraXXXX/S3TriggeraXXXX-cloudformation-template.json

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

 npm install

4. ปรับใช้สแต็กไปยังบัญชี AWS ของคุณ

• เริ่มต้นแอปพลิเคชันคลาวด์ที่ใช้พลังงานจากการขยาย

   amplify init
  

• บทบัญญัติทรัพยากรคลาวด์ที่มีการพัฒนาในท้องถิ่นดำเนินการ

   amplify push
  

• เผยแพร่สินทรัพย์คงที่ไปยัง Amazon S3

   amplify publish
  

สนุก !

คุณอาจต้องรอสองสามชั่วโมงหลังจากการปรับใช้ครั้งแรกดังนั้นชื่อ DNS ของถัง S3 จะเผยแพร่! (หากคุณไม่สามารถเข้าสู่ระบบหลังจากการลดลงโดยใช้รหัสผ่านชั่วคราวที่ได้รับทางอีเมลสิ่งนี้จะต้องรอก่อนที่จะลองอีกครั้งไม่มีอะไรผิดปกติกับรหัส)

ประเด็นสำคัญ

• AWS Lambda สร้างไฟล์แบบคงที่โดยใช้เทมเพลต HTML และข้อมูลที่เก็บไว้ใน DynamoDB
• react.js แอปพลิเคชันที่สร้างขึ้นโดยใช้ AWS Amplify
• มีผู้ใช้ผู้ดูแลระบบรายเดียวที่สร้างขึ้นเมื่อการปรับใช้ครั้งแรก
• เว็บไซต์คงที่ (พร้อมไฟล์เทมเพลต HTML) ถูกสร้างขึ้นตามความต้องการโดย AWS Lambda
• 4 ไฟล์ HTML ใช้เพื่อสร้างเว็บไซต์คงที่

  /albums-gallery-template.html                                       <-- template for an album gallery page
  /albums-template.html                                               <-- template for list of albums page
  /album-item-template.html                                           <-- template for one album used in list of albums page
  /photo-item-template.html                                           <-- template for one photo used on album gallery page

• แต่ละเทมเพลต HTML มีตัวแปรที่จะถูกแทนที่ด้วยแลมบ์ดาเช่นชิ้นส่วนของรหัสร้อง

  < div >
    < h2 > {ALBUM_NAME} </ h2 >
    < div > {ALBUM_PHOTOS} photos · {ALBUM_DATE} </ div >
  </ div > 

ข้อดีของเว็บไซต์คงที่

• HTML คงที่แบบคงที่ของไซต์คงที่โหลดเร็วกว่าหน้าเว็บบนไซต์แบบไดนามิก เว็บไซต์ที่รวดเร็วมีความสำคัญอย่างยิ่งสำหรับประสบการณ์การใช้งานที่ดีและสำหรับการเพิ่มเว็บไซต์ของคุณในการจัดอันดับเครื่องมือค้นหา
• เครื่องกำเนิดไซต์แบบคงที่ลดความซับซ้อนของไซต์ ในทางกลับกันช่วยปรับปรุงความเร็วและความน่าเชื่อถือและทำให้ประสบการณ์ของนักพัฒนาปรับแต่ง
• คุณไม่ต้องกังวลเกี่ยวกับการจราจรบนฐานข้อมูล
• คุณสามารถโฮสต์เว็บไซต์ของคุณด้วยเครือข่ายการจัดส่งเนื้อหาที่ปรับขนาดด้วยปริมาณการใช้งานของเว็บไซต์ของคุณ
• ต้นทุนลดลง
• SEO ที่ดีกว่า
• การแคชที่ดี

ฉันใช้ที่เก็บนี้เพื่อสร้างเว็บไซต์ของตัวเอง manbehindlens.com

เครื่องมือ

• AWS ขยายไลบรารี JavaScript เพื่อเชื่อมต่อส่วนหน้าของเรากับทรัพยากรคลาวด์ของเรา

• Amazon Cognito เพื่อจัดการการอนุญาตลงทะเบียนผู้ดูแลระบบ

• Amazon Simple Storage Service (S3) เพื่อจัดเก็บและให้บริการรูปภาพได้มากเท่าที่ฉันต้องการอัปโหลด, เพื่อ โฮสต์สินทรัพย์แอป React.js สำหรับแอปของเราและเพื่อโฮสต์ เว็บไซต์ที่สร้างขึ้นแบบคงที่

• Amazon Cloudfront เพื่อจัดเก็บและให้บริการรูปภาพมากที่สุดเท่าที่ผู้ใช้ของเราสนใจที่จะอัปโหลดและเพื่อโฮสต์สินทรัพย์คงที่สำหรับแอปของเรา

• Amazon DynamoDB เพื่อให้เวลาตอบสนองมิลลิวินาทีสำหรับการสอบถาม API สำหรับอัลบั้มและข้อมูลภาพถ่าย

• aws appsync เพื่อโฮสต์ graphql api สำหรับส่วนหน้าของเรา

• AWS Lambda เพื่อ สร้างภาพขนาดย่อ แบบอะซิงโครนัสในระบบคลาวด์และเพื่อ สร้างเว็บไซต์คง ที่ตามความต้องการ

• Amazon rekognition เพื่อตรวจจับฉลาก 5 ป้ายสำหรับแต่ละรูปภาพที่อัปโหลด

ค่าใช้จ่าย

กาแฟน้อยกว่าหนึ่งถ้วยต่อเดือน

การให้เครดิต

• เทมเพลต HTML ลิขสิทธิ์
• เทมเพลตเลนส์ HTML
• สร้างเว็บแอปแชร์ภาพถ่ายด้วย AWS ขยายเวิร์กช็อป
• สร้างเลเยอร์ที่คมชัดสำหรับ AWS Lambda
• เลเยอร์ AWS สำหรับคมชัด