Hosting laman web sederhana dengan Amazon S3 dan HTTPS

Haiya kawan-kawan!

Dalam tutorial ini saya akan menunjukkan kepada anda cara menghoskan laman web statik dengan HTTPS di AWS dengan domain tersuai. Semua ini dapat dilakukan dengan menggunakan tahap percuma AWS.

Namun, perkhidmatan yang akan kami gunakan dikenakan sedikit bayaran. Secara amnya, jumlah ini tidak boleh melebihi $ 1 / bulan.

Kami akan menggunakan gabungan perkhidmatan AWS berikut:

—S3

- Laluan53

- Pengurus sijil

- CloudFront

Mari masuk ke dalamnya!

Sediakan baldi S3 anda

Pertama, anda memerlukan dua baldi S3 , kedua-duanya harus sesuai dengan nama domain tersuai anda dengan yang kedua termasuk subdomain www.

Baldi 1:laman web mywebsite.com

Baldi 2:www.mywebsite.com

Baldi pertama (mywebsite.com) adalah baldi utama untuk laman web anda. Ini mengandungi semua fail dan aset anda untuk laman web statik anda.

Seterusnya kami menyediakan baldi ini untuk hosting laman web statik. Anda boleh mendapatkannya di bawah tab Properties dari baldi, dan kami akan menyimpan lalai yang disediakan di sini dengan indeks laman web yang ditetapkan ke index.html.

Kami juga perlu menjadikan baldi ini dapat diakses secara terbuka kerana penyemak imbas pengguna perlu mengakses fail baldi untuk membuat laman web. Kita boleh melakukannya dengan menetapkan Dasar Bucket di bawah tab Permissions.

{ "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": "s3:GetObject", "Resource": "MY_BUCKET_ARN" } ]}

Ini adalah dasar sederhana yang hanya akan membolehkan orang ramai membaca akses objek dalam baldi. Sekarang, jika anda menuju ke titik akhir yang ditentukan dalam konfigurasi hosting statik dari baldi, anda akan melihat laman web anda.

Kemajuan! Tetapi kita boleh melakukan yang lebih baik daripada itu.

Baldi kedua (www.mywebsite.com) kami akan kosongkan tetapi konfigurasikan untuk mengarahkan ke baldi pertama kami menggunakan HTTP sebagai protokol (kami akan menjadikannya HTTPS kemudian).

Baldi anda kini sudah sedia untuk digunakan!

Konfigurasikan Domain dengan Laluan53

Oleh itu, laman web anda terus berjalan tetapi hanya boleh diakses melalui titik akhir baldi dan bukan domain tersuai anda. Mari ubah itu.

Menuju ke Laluan53 . Sekiranya anda mendaftarkan domain anda dengan Pendaftar Amazon, anda harus melihat bahawa zon yang dihoskan telah disediakan untuk anda dengan dua set rekod. Satu untuk Name Server (NS) dan satu untuk SOA.

Yang perlu kita buat hanyalah membuat dua set rekod lagi untuk menunjuk ke titik akhir baldi S3.

Untuk setiap set rekod:

- Taip: A - Alamat IPv4

- Alias: Ya

- Sasaran Alias: titik akhir laman web S3 yang sesuai dengan yang anda tetapkan untuk Nama.

Sekarang kita dapat menuju ke url khusus ... dan voilà!

Kita hampir sampai di sana, tetapi ada satu perkara terakhir yang kita hilang ...

Catatan : Sekiranya domain anda didaftarkan dengan pendaftar domain lain (bukan Amazon), anda perlu mengikuti beberapa langkah yang berbeza untuk menyiapkannya. Biasanya anda perlu menambahkan rekod CNAME dengan nilai titik akhir baldi S3 utama.

Penyelesaian masalah :

Sekiranya anda memadamkan zon dihoskan yang dibuat oleh Amazon semasa anda pertama kali mendaftarkan domain (saya telah melakukannya kerana zon dihoskan dikenakan beberapa caj), anda perlu membuat zon dihoskan baru dari awal.

  1. Pilih "Buat Hosted Zone" dan tetapkan nama domain, misalnya "mywebsite.com"
  2. Ini akan menghasilkan beberapa set rekod baru untuk jenis NS dan SOA.
  3. Masuk ke domain berdaftar anda dan kemas kini nilai Pelayan Nama kepada yang dihasilkan dalam set rekod NS baru.

Memohon Sijil

Hebat, laman web ini kini dihoskan menggunakan url tersuai! Namun kita hanya dapat mengaksesnya melalui protokol HTTP.

Kita harus sentiasa memastikan laman web kita diamankan menggunakan protokol HTTPS. Ini melindungi laman web dan pengguna kami daripada serangan suntikan berbahaya dan menjamin keaslian.

Pergi ke Pengurus Sijil di AWS Console dan minta sijil awam baru (ini percuma). Anda akan diminta memasukkan nama domain yang ingin anda selamatkan.

Sebelum sijil dapat dikeluarkan, Amazon perlu dapat mengesahkan bahawa anda memiliki domain yang ditentukan.

Anda boleh memilih dari dua kaedah pengesahan: E-mel atau DNS.

E-mel umumnya lebih mudah, tetapi anda perlu memastikan anda dapat mengakses e-mel yang digunakan untuk mendaftarkan domain. Sebagai alternatif, jika anda menggunakan Amazon Registrar dan Route53, anda boleh memilih kaedah DNS. Ini memerlukan anda menambahkan beberapa set rekod tertentu ke zon yang dihoskan, tetapi ini kebanyakannya automatik untuk anda sehingga cukup mudah.

It can take a few minutes for the certificate to be issued after validation.

When its all done we can continue to the final step!

Configuring CloudFront

For the final step we are going to use CloudFront which allows us to use the new SSL certificate to serve the website with HTTPS. CloudFront also speeds up the distribution of web content by storing it at multiple edge locations and delivering from the closest edge location to a user.

We need two new web distributions, one for each S3 bucket. Head to CloudFront in the AWS Console and create the first web distribution.

There are lots of settings available to create a web distribution, but for the basics we only need to change five:

  1. Origin Domain Name: Set this to the S3 website endpoint for one of the buckets. Important: This field will give you some auto-complete options with your S3 bucket names. However, using these can cause issues with redirecting to the bucket endpoint. So instead use the bucket endpoint directly.
  2. Origin Id: This populated for you when you enter Origin Domain Name.
  3. Viewer Protocol Policy: Set to “Redirect HTTP to HTTPS”.
  4. Alternate Domain Names: This should match the name of the S3 bucket you’re pointing to. For example “mywebsite.com”.
  5. SSL Certificate: Select “Custom SSL Certificate” and select your new certificate from the dropdown.

Do this again for the second S3 bucket.

The distributions can take a while to spin up, so while we wait, let’s do the finishing steps.

Back in S3, go to your secondary bucket (www.mywebsite.com), in the Properties tab and under Static Website Hosting set the redirect protocol to HTTPS.

Finally, head back to Route53. We need to update the custom A records we created to now target the CloudFront distributions rather than the S3 buckets. For each record, change the Alias Target and select the CloudFront distribution available in the dropdown.

Note: Again, if you are using another DNS service you’ll need to go update the CNAME record from there to point to the CloudFront domain name.

And there you have it! Your beautiful website is now available at the custom domain and served with HTTPS!

Thanks for reading! I hope this guide was useful and enjoyable, I’d love to know if you found it helpful.