Pilih preferensi cookie Anda

Kami menggunakan cookie penting serta alat serupa yang diperlukan untuk menyediakan situs dan layanan. Kami menggunakan cookie performa untuk mengumpulkan statistik anonim sehingga kami dapat memahami cara pelanggan menggunakan situs dan melakukan perbaikan. Cookie penting tidak dapat dinonaktifkan, tetapi Anda dapat mengklik “Kustom” atau “Tolak” untuk menolak cookie performa.

Jika Anda setuju, AWS dan pihak ketiga yang disetujui juga akan menggunakan cookie untuk menyediakan fitur situs yang berguna, mengingat preferensi Anda, dan menampilkan konten yang relevan, termasuk iklan yang relevan. Untuk menerima atau menolak semua cookie yang tidak penting, klik “Terima” atau “Tolak”. Untuk membuat pilihan yang lebih detail, klik “Kustomisasi”.

Preferensi
Hubungi Kami
Umpan Balik
AWS Documentation
Buat Akun AWS

Memulai dengan situs web statis yang aman

PDF
RSS
Mode fokus
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.

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

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 — seperti HTML, CSS,, gambar 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 sertifikat SSL/TLS di AWS Certificate Manager (ACM), dan menempelkannya ke distribusi. CloudFront Sertifikat ini memungkinkan distribusi untuk melayani situs web domain Anda secara aman dengan HTTPS.

  • 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 menunjuk ke zona hosting Route 53, mengonfigurasi Route 53 sebagai layanan DNS Anda.

  • AWS Identity and Access Management (IAM) izin untuk meluncurkan CloudFormation template yang membuat peran IAM, 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 adalah www, situs web Anda tersedia di www.example.com. (Ganti example.com dengan nama domain Anda, seperti yang dijelaskan dalam bullet berikut.)

    • DomainName— Masukkan nama domain Anda, sepertiexample.com. Domain ini harus diarahkan ke zona yang di-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 peran IAM 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 perubahan pada BUAT_SEMBANG.

    Ketika statusnya CREATE_COMPLETE, buka https://www.example.comuntuk melihat situs web Anda (ganti www.example.com dengan subdomain dan nama domain yang Anda tentukan pada 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 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 bucket 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 bucket 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.comGanti 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 perubahan pada BUAT_SEMBANG.

    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.

Di halaman ini

PrivasiSyarat situsPreferensi cookie
© 2025, Amazon Web Services, Inc. atau afiliasinya. Semua hak dilindungi undang-undang.