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 — 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)](https://docs.aws.amazon.com/AmazonS3/latest/dev/Welcome.html)** – 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](private-content-restricting-access-to-s3.md) (OAC) untuk memastikan bahwa situs web hanya dapat diakses melalui CloudFront, tidak langsung dari S3.
+ **Diamankan oleh HTTPS dan header keamanan** — Solusi ini membuat SSL/TLS sertifikat di [AWS Certificate Manager (ACM)](https://docs.aws.amazon.com/acm/latest/userguide/acm-overview.html), 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](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/Welcome.html)**— Solusi ini menggunakan CloudFormation template untuk menyiapkan semua komponen, sehingga Anda dapat lebih fokus pada konten situs web Anda dan lebih sedikit pada konfigurasi komponen.
Solusi ini bersifat open source GitHub. Untuk melihat kode, mengirim permintaan penarikan, atau membuka masalah, kunjungi [https://github.com/aws-samples/amazon-cloudfront-secure-static-site](https://github.com/aws-samples/amazon-cloudfront-secure-static-site).
**Topics**
+ [Ikhtisar solusi](#cloudformation-website-overview)
+ [Terapkan solusinya](#deploy-secure-static-website-cloudformation)
## Ikhtisar solusi
Diagram berikut menunjukkan ikhtisar tentang cara kerja solusi situs web statis ini:
![\[Diagram ikhtisar situs web statis yang aman dengan CloudFront\]](http://docs.aws.amazon.com/id_id/AmazonCloudFront/latest/DeveloperGuide/images/cloudfront-secure-static-website-overview-github.png)
1. Penampil meminta situs web di www.example.com.
1. Jika objek yang diminta di-cache, CloudFront mengembalikan objek dari cache ke penampil.
1. Jika objek tidak dalam CloudFront cache, CloudFront meminta objek dari asal (ember S3).
1. S3 mengembalikan objek ke CloudFront.
1. CloudFront cache objek.
1. 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 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
**Topics**
+ [Prasyarat](#deploy-website-cloudformation-prerequisites)
+ [Gunakan CloudFormation konsol](#deploy-website-cloudformation-console)
+ [Kloning solusinya secara lokal](#deploy-website-cloudformation-clone)
+ [Menemukan log akses](#deploy-website-cloudformation-logs)
### 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 berada di Akun AWS tempat yang sama di mana Anda menerapkan solusi ini. Jika Anda tidak memiliki nama domain terdaftar, Anda dapat [daftarkan satu dengan Route 53](https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/registrar.html). Jika Anda memiliki nama domain terdaftar tetapi tidak menunjuk ke zona hosting Route 53, [mengonfigurasi Route 53 sebagai layanan DNS Anda](https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/dns-configuring.html).
+ 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](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/using-iam-template.html) 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](https://aws.amazon.com/pricing/).
### Gunakan CloudFormation konsol
**Untuk menyebarkan menggunakan konsol CloudFormation**
1. [Luncurkan solusi ini di CloudFormation konsol](https://console.aws.amazon.com/cloudformation/home?region=us-east-1#/stacks/new?stackName=amazon-cloudfront-secure-static-site-templates-main&templateURL=https://s3.amazonaws.com/solution-builders-us-east-1/amazon-cloudfront-secure-static-site/latest/main.yaml). Jika perlu, masuk ke Anda Akun AWS.
1. 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**.
1. 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, seperti*example.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
1. Setelah selesai, pilih **Selanjutnya**.
1. (Opsional) Pada **Mengonfigurasi opsi tumpukan** yang sangat penting, [tambahkan tag dan opsi tumpukan lainnya](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/cfn-console-add-tags.html).
1. Setelah selesai, pilih **Selanjutnya**.
1. 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.
1. Pilih **Membuat tumpukan**.
1. Tunggu tumpukan selesai membuat. Tumpukan ini menciptakan tumpukan yang terbentuk dan dapat memakan waktu beberapa menit untuk selesai. Setelah selesai, **Status** perubahan pada **BUAT\$1SEMBANG**.
Ketika statusnya **CREATE\$1COMPLETE**, buka https://*www.example.com*untuk 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!”\]](http://docs.aws.amazon.com/id_id/AmazonCloudFront/latest/DeveloperGuide/images/cloudfront-secure-static-website-content.png)
**Untuk mengganti konten default situs web dengan konten Anda sendiri**
1. Buka konsol Amazon S3 di. [https://console.aws.amazon.com/s3/](https://console.aws.amazon.com/s3/)
1. 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.
1. 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](Invalidation.md).
### 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](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](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.
1. Jalankan perintah berikut untuk memasang dan mengemas artefak solusi:
```
make package-static
```
1. Salin konten situs web Anda ke `www` , menimpa konten situs web default.
1. 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
```
1. 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
```
1. 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
```
1. 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\$1SEMBANG**.
Ketika status berubah menjadi **CREATE\$1COMPLETE**, 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](AccessLogs.md) 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/](https://console.aws.amazon.com/s3/)
1. 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.
1. Folder bernama **cdn** berisi log CloudFront akses.