Memulai dengan situs web statis yang aman - Amazon CloudFront
Ikhtisar solusiTerapkan solusinya

Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

Memulai dengan situs web statis yang aman

Anda dapat memulai Amazon CloudFront dengan menggunakan solusi yang dijelaskan dalam topik ini untuk membuat situs web statis yang aman untuk nama domain Anda. Situs web statis hanya menggunakan file statis — sepertiHTML,, gambar CSS JavaScript, dan video — dan tidak memerlukan server atau pemrosesan sisi server. Dengan solusi ini, situs web Anda akan mendapatkan manfaat sebagai berikut:

  • Menggunakan penyimpanan yang tahan lama Amazon Simple Storage Service (Amazon S3) – Solusi ini menciptakan bucket Amazon S3 untuk me-host konten situs web statis Anda. Untuk memperbarui situs web Anda, cukup unggah file baru Anda ke buket S3.

  • Dipercepat oleh jaringan pengiriman CloudFront konten Amazon — Solusi ini menciptakan CloudFront distribusi untuk melayani situs web Anda kepada pemirsa dengan latensi rendah. Distribusi dikonfigurasi dengan kontrol akses asal (OAC) untuk memastikan bahwa situs web hanya dapat diakses melalui CloudFront, tidak langsung dari S3.

  • Diamankan oleh HTTPS dan header keamanan — Solusi ini membuat TLS sertifikatSSL/di AWS Certificate Manager (ACM), dan menempelkannya ke distribusi. CloudFront Sertifikat ini memungkinkan distribusi untuk melayani situs web domain Anda dengan HTTPS aman.

  • Dikonfigurasi dan digunakan dengan AWS CloudFormation— Solusi ini menggunakan AWS CloudFormation template untuk menyiapkan semua komponen, sehingga Anda dapat lebih fokus pada konten situs web Anda dan lebih sedikit pada konfigurasi komponen.

Solusi ini open source di GitHub. Untuk melihat kode, mengirim permintaan penarikan, atau membuka masalah, kunjungi https://github.com/aws-samples/amazon-cloudfront-secure-static-site.

Ikhtisar solusi

Diagram berikut menunjukkan ikhtisar tentang cara kerja solusi situs web statis ini:

Diagram ikhtisar situs web statis yang aman dengan CloudFront

  1. Penampil meminta situs web di www.example.com.

  2. Jika objek yang diminta di-cache, CloudFront mengembalikan objek dari cache ke penampil.

  3. Jika objek tidak dalam CloudFront cache, CloudFront meminta objek dari asal (ember S3).

  4. S3 mengembalikan objek ke CloudFront.

  5. CloudFront cache objek.

  6. Objek dikembalikan ke pemirsa. Permintaan selanjutnya untuk objek yang datang ke lokasi CloudFront tepi yang sama disajikan dari CloudFront cache.

Terapkan solusinya

Untuk menyebar solusi situs web statis yang aman ini, Anda dapat memilih salah satu opsi berikut:

  • Gunakan AWS CloudFormation konsol untuk menerapkan solusi dengan konten default, lalu unggah konten situs web Anda ke Amazon S3.

  • Gandakan solusi ke komputer Anda untuk menambahkan konten situs web Anda. Kemudian, sebar solusi dengan AWS Command Line Interface (AWS CLI).

catatan

Anda harus menggunakan Wilayah AS Timur (Virginia N.) untuk menyebarkan template. CloudFormation

Prasyarat

Untuk menggunakan solusi ini, Anda harus memiliki prasyarat berikut:

  • Nama domain terdaftar, seperti contoh.com, yang mengarah ke zona hosting Amazon Route 53. Zona yang dihosting harus sama dengan Akun AWS tempat Anda menerapkan solusi ini. Jika Anda tidak memiliki nama domain terdaftar, Anda dapat daftarkan satu dengan Route 53. Jika Anda memiliki nama domain terdaftar tetapi tidak mengarah ke zona yang dihosting Route 53, konfigurasikan Route 53 sebagai DNS layanan Anda.

  • AWS Identity and Access Management (IAM) izin untuk meluncurkan CloudFormation templat yang membuat IAM peran, dan izin untuk membuat semua AWS sumber daya dalam solusi. Untuk informasi selengkapnya, lihat Mengontrol akses dengan AWS Identity and Access Management dalam Panduan Pengguna AWS CloudFormation .

Anda bertanggung jawab atas biaya yang timbul saat menggunakan solusi ini. Untuk informasi lebih lanjut tentang biaya, lihat halaman harga untuk masing-masing Layanan AWS.

Gunakan AWS CloudFormation konsol

Untuk menyebarkan menggunakan konsol CloudFormation

  1. Luncurkan solusi ini di AWS CloudFormation konsol. Jika perlu, masuk ke Anda Akun AWS.

  2. Wizard Buat tumpukan terbuka di CloudFormation konsol, dengan bidang yang telah diisi sebelumnya yang menentukan templat solusi ini. CloudFormation

    Di bagian bawah halaman, pilih Selanjutnya.

  3. Di Tentukan detail tumpukan , masukkan nilai untuk kolom berikut:

    • SubDomain— Masukkan subdomain yang akan digunakan untuk situs web Anda. Misalnya, jika subdomain www, situs web Anda tersedia di www.example.com. (Ganti example.com dengan nama domain Anda, sebagaimana dijelaskan dalam butir berikut.)

    • DomainName— Masukkan nama domain Anda, seperti example.com. Domain ini harus diarahkan ke zona hosting Route 53.

    • HostedZoneId— ID zona yang dihosting Route 53 dari nama domain Anda.

    • CreateApex— (Opsional) Buat alias ke puncak domain (example.com) dalam konfigurasi Anda. CloudFront

  4. Setelah selesai, pilih Selanjutnya.

  5. (Opsional) Pada Mengonfigurasi opsi tumpukan yang sangat penting, tambahkan tag dan opsi tumpukan lainnya.

  6. Setelah selesai, pilih Selanjutnya.

  7. Di Peninjauan , gulir ke bagian bawah halaman, kemudian pilih dua kotak di Kemampuan bagian. Kemampuan ini memungkinkan CloudFormation untuk membuat IAM peran yang memungkinkan akses ke sumber daya tumpukan, dan memberi nama sumber daya secara dinamis.

  8. Pilih Membuat tumpukan.

  9. Tunggu tumpukan selesai membuat. Tumpukan ini menciptakan tumpukan yang terbentuk dan dapat memakan waktu beberapa menit untuk selesai. Setelah selesai, Status berubah menjadi CREATE_ COMPLETE.

    Ketika statusnya CREATE_ COMPLETE, buka https://www.example.com untuk melihat situs web Anda (ganti www.example.com dengan subdomain dan nama domain yang Anda tentukan di langkah 3). Anda akan melihat konten default situs web:

    Konten default situs web statis dari solusi ini. Berbunyi: “Saya adalah situs web statis!”
Untuk mengganti konten default situs web dengan konten Anda sendiri

  1. Buka konsol Amazon S3 di. https://console.aws.amazon.com/s3/

  2. Pilih ember yang namanya dimulai dengan amazon-cloudfront-secure-static-site-s3bucketroot -.

    catatan

    Pastikan untuk memilih buket dengan s3bucketroot atas namanya, bukan s3bucketlog. Ember dengan s3bucketroot dalam namanya berisi konten situs web. Satu dengan s3bucketlog hanya berisi file log.

  3. Hapus konten default situs web, lalu unggah konten Anda sendiri.

    catatan

    Jika Anda melihat situs web Anda dengan konten default solusi ini, kemungkinan beberapa konten default di-cache di lokasi CloudFront tepi. Untuk memastikan bahwa pemirsa melihat konten situs web Anda yang diperbarui, batalkan file untuk menghapus salinan yang di-cache dari CloudFront lokasi tepi. Untuk informasi selengkapnya, lihat Membatalkan file untuk menghapus konten.

Kloning solusinya secara lokal

Prasyarat

Untuk menambahkan konten situs web Anda sebelum menerapkan solusi ini, Anda harus mengemas artefak solusi secara lokal, yang memerlukan Node.js dan npm. Untuk informasi selengkapnya, lihat https://www.npmjs.com/get-npm.

Untuk menambahkan konten situs web dan menerapkan solusi

  1. Gandakan atau unduh solusi dari https://github.com/aws-samples/amazon-cloudfront-secure-static-site. Setelah Anda mengkloning atau mengunduhnya, buka perintah perintah atau terminal dan navigasi ke amazon-cloudfront-secure-static-site folder.

  2. Jalankan perintah berikut untuk memasang dan mengemas artefak solusi:

    make package-static

  3. Salin konten situs web Anda ke www , menimpa konten situs web default.

  4. Jalankan AWS CLI perintah berikut untuk membuat bucket Amazon S3 untuk menyimpan artefak solusi. Ganti amzn-s3-demo-bucket-for-artifacts dengan nama kelompok Anda sendiri.

    aws s3 mb s3://amzn-s3-demo-bucket-for-artifacts --region us-east-1

  5. Jalankan AWS CLI perintah berikut untuk mengemas artefak solusi sebagai CloudFormation template. Ganti amzn-s3-demo-bucket-for-artifacts dengan nama keranjang yang Anda buat pada langkah sebelumnya.

    aws cloudformation package \
    --region us-east-1 \ 
    --template-file templates/main.yaml \
    --s3-bucket amzn-s3-demo-bucket-for-artifacts \
    --output-template-file packaged.template

  6. Jalankan perintah berikut untuk menyebarkan solusi dengan CloudFormation, mengganti nilai-nilai berikut:

    • your-CloudFormation-stack-name — Ganti dengan nama untuk CloudFormation tumpukan.

    • example.com – Ganti dengan nama domain Anda. Domain ini harus diarahkan ke zona yang dihosting Route 53 di tempat yang sama Akun AWS.

    • www – Ganti dengan subdomain yang akan digunakan untuk situs web Anda. Misalnya, jika subdomain www, situs web Anda tersedia di www.example.com.

    • hosted-zone-ID — Ganti dengan ID zona yang dihosting Route 53 dari nama domain Anda.

    aws cloudformation deploy \
    --region us-east-1 \
    --stack-name your-CloudFormation-stack-name \
    --template-file packaged.template \
    --capabilities CAPABILITY_NAMED_IAM CAPABILITY_AUTO_EXPAND \
    --parameter-overrides DomainName=example.com SubDomain=www HostedZoneId=hosted-zone-ID

    1. (Opsional) Untuk menyebarkan tumpukan dengan apex domain, jalankan perintah berikut sebagai gantinya.

      aws --region us-east-1 cloudformation deploy \
    --stack-name your-CloudFormation-stack-name \
    --template-file packaged.template \
    --capabilities CAPABILITY_NAMED_IAM CAPABILITY_AUTO_EXPAND \
    --parameter-overrides  DomainName=example.com SubDomain=www HostedZoneId=hosted-zone-ID CreateApex=yes

  7. Tunggu CloudFormation tumpukan selesai dibuat. Tumpukan ini menciptakan tumpukan yang terbentuk dan dapat memakan waktu beberapa menit untuk selesai. Setelah selesai, Status berubah menjadi CREATE_ COMPLETE.

    Ketika status berubah menjadi CREATE_ COMPLETE, buka https://www.example.com untuk melihat situs web Anda (ganti www.example.com dengan subdomain dan nama domain yang Anda tentukan pada langkah sebelumnya). Anda akan melihat konten situs web Anda.

Menemukan log akses

Solusi ini memungkinkan log akses untuk CloudFront distribusi. Selesaikan langkah-langkah berikut untuk menemukan log akses distribusi.

Untuk menemukan log akses distribusi

  1. Buka konsol Amazon S3 di. https://console.aws.amazon.com/s3/

  2. Pilih ember yang namanya dimulai dengan amazon-cloudfront-secure-static-site-s3bucketlogs -.

    catatan

    Pastikan untuk memilih buket dengan s3bucketlog atas namanya, bukan s3bucketroot. Ember dengan s3bucketlog dalam namanya mengandung file log. Satu dengan s3bucketroot berisi konten situs web.

  3. Folder bernama cdn berisi log CloudFront akses.