simple static website

เว็บไซต์คงที่อย่างง่าย

สร้างเว็บไซต์คงที่ที่เรียบง่าย ราคาถูก และสนับสนุน CDN โดยใช้สคริปต์ AWS CloudFormation เดียว เหมาะสำหรับไซต์ที่สร้างโดยใช้ตัวสร้างไซต์คงที่ เช่น Gatsby, Hugo, 11ty; แอป React ไร้สัญชาติ; หรือเพียงแค่ไฟล์ HTML, CSS และรูปภาพธรรมดาๆ

คำแนะนำ

1. ลงทะเบียนโดเมนใน AWS ที่นี่

2. สร้าง Hosted Zone สำหรับโดเมนนั้นใน Route53

3. สร้างสแต็ก CloudFormation ใหม่โดยใช้เทมเพลต simple-static-website.yaml สิ่งนี้ จะต้อง เสร็จสิ้นใน us-east-1 เนื่องจากข้อจำกัดของ CloudFront

4. ระบุพารามิเตอร์:

   • ชื่อโดเมน
   • ชื่อเว็บไซต์
   • HostedZoneId (โดยใช้คอนโซล จะมีรายการมาให้)
   • BucketName (ไม่บังคับ) หากคุณต้องการใช้บัคเก็ตที่มีอยู่ CloudFormation จะสร้างชื่อบัคเก็ตจากโดเมนย่อยของ URL หากเว้นว่างไว้

5. จัดเตรียมสแต็ก CloudFormation โดยใช้คอนโซลหรือด้วย awscli:

    aws cloudformation deploy 
       --stack-name foo 
       --template-file simple-static-website.yaml 
       --parameter-overrides 
           DomainName=example.com 
           HostedZoneId=ABCDEFGHIJK0123456789 
           WebsiteName=www
   

6. วางไฟล์ index.html แบบธรรมดาลงในบัคเก็ต S3 ที่สร้างขึ้นใหม่ ตรวจสอบเอาต์พุต CloudFormation ของสแต็กเพื่อดูคำสั่ง awscli ตัวอย่าง

7. เยี่ยมชมเว็บไซต์ใหม่ของคุณที่โดเมนที่คุณระบุ ดูเอาต์พุต CloudFormation สำหรับ URL

หมายเหตุเกี่ยวกับการใช้เครือข่ายการกระจายเนื้อหา (CDN)

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

รับทราบ

สคริปต์นี้ได้รับแรงบันดาลใจจากโพสต์บนบล็อกที่ยอดเยี่ยมของ Alain Seng รวมถึงผลลัพธ์ของไซต์ที่จัดเตรียมด้วยตนเองที่มีอยู่ของฉันซึ่งทำงานผ่านเทมเพลต CloudFormer ของ Amazon ที่เลิกใช้งานแล้วในขณะนี้ CloudFormer เป็นเครื่องมือที่ยอดเยี่ยม อย่างไรก็ตาม Amazon ซ่อนมันไว้ใต้พรม เนื่องจาก CVE จำนวนมากขึ้นที่โซลูชันปล่อยให้ผู้ใช้เปิดไว้ มีการเขียนที่ดีโดย karimelmel เกี่ยวกับเรื่องนี้ที่นี่ ขอขอบคุณ eisenhowerj ที่ปรับปรุงสคริปต์ CloudFormation ของฉันและเพิ่มคุณสมบัติใหม่ๆ