Cara menghosting situs web statis menggunakan Yandex.Cloud Object Storage

Hei Habr!

Pada artikel ini, saya akan memberi tahu Anda cara menghosting situs statis dengan mudah dan sederhana menggunakan teknologi Yandex, yaitu Penyimpanan Objek.

Pada akhirnya, Anda akan memiliki situs web yang dihosting web yang dapat diakses melalui tautan eksternal.

Artikel ini akan bermanfaat jika Anda

• Pengembang pemula yang baru belajar memprogram;
• Pengembang yang telah membuat portofolio dan ingin menempatkannya di domain publik untuk ditunjukkan kepada teman dan pemberi kerja.

Tentang diri saya

Baru-baru ini, saya mengembangkan layanan SaaS, semacam pasar tempat orang menemukan pelatih olahraga untuk pelatihan pribadi. Menggunakan tumpukan Amazon Web Services (selanjutnya disebut AWS). Namun semakin dalam saya menyelami proyek ini, semakin banyak nuansa yang saya pelajari tentang berbagai proses pengorganisasian sebuah startup.

Saya mengalami masalah berikut:

• AWS menghabiskan banyak uang. Setelah bekerja selama 3 tahun di perusahaan Enterprise, saya terbiasa dengan kesenangan seperti Docker, Kubernetes, CI/CD, penerapan biru hijau, dan, sebagai calon programmer startup, saya ingin menerapkan hal yang sama. Hasilnya, saya sampai pada kesimpulan bahwa AWS menghabiskan 300-400 dolar setiap bulannya. Kubernetes ternyata yang paling mahal, sekitar 100 dolar, dengan upah minimum satu cluster dan satu node.
  PS Tidak perlu melakukan ini di awal.
• Selanjutnya kalau dipikir-pikir dari sisi hukumnya, saya belajar tentang UU 152-FZ yang isinya kira-kira sebagai berikut: "Data pribadi warga negara Federasi Rusia harus disimpan di wilayah Federasi Rusia", jika tidak, denda, yang tidak saya inginkan. Saya memutuskan untuk mengatasi masalah ini sebelum datang kepada saya dari atas :).

Terinspirasi artikel tentang migrasi infrastruktur dari Amazon Web Services ke Yandex.Cloud, saya memutuskan untuk mempelajari tumpukan Yandex lebih detail.

Bagi saya, fitur utama Yandex.Cloud adalah sebagai berikut:

• 2-3 kali lebih murah (sesuai artikel di atas dan daftar harga umum)
• Penyimpanan data pribadi pengguna di wilayah Federasi Rusia, yang belum dapat dicapai oleh Amazon yang hebat.

Saya mempelajari pesaing lain dari layanan ini, tetapi pada saat itu Yandex menang.

Aku sudah bercerita tentang diriku padamu, jadi kita bisa mulai berbisnis.

Langkah 0. Siapkan situs

Pertama, kita memerlukan website yang ingin kita tempatkan di Internet. Karena saya seorang pengembang Angular, saya akan membuat template aplikasi SPA sederhana, yang kemudian akan saya posting di Internet.

PS Siapa yang memahami Angular atau mengetahui dokumentasinya https://angular.io/guide/setup-local, pergi ke Langkah 1.

Mari instal Angular-CLI untuk membuat situs SPA di Angular:

npm install -g @angular/cli

Mari buat aplikasi Angular menggunakan perintah berikut:

ng new angular-habr-object-storage

Selanjutnya, buka folder aplikasi dan luncurkan untuk memeriksa fungsinya:

cd angular-habr-object-storage
ng serve --open

Aplikasi sudah dibuat, namun belum siap untuk dihosting. Mari kita rakit aplikasi menjadi build kecil (Produksi) untuk menghapus semua hal yang tidak perlu dan hanya menyisakan file yang diperlukan.
Di Angular Anda dapat melakukan ini dengan perintah berikut:

ng build --prod

Sebagai hasil dari perintah ini, sebuah folder muncul di root aplikasi dist dengan situs web kami.

Bekerja. Sekarang mari beralih ke hosting.

Langkah 1.

Pergi ke situs web https://console.cloud.yandex.ru/ dan klik tombol "Hubungkan".

Catatan:

• Untuk menggunakan layanan Yandex, Anda mungkin memerlukan surat Yandex (tetapi ini belum pasti)
• Untuk beberapa fungsi, Anda harus menyetor uang ke akun Anda di akun pribadi Anda (minimal 500 rubel).

Setelah pendaftaran dan otorisasi berhasil, kami berada di akun pribadi Anda.

Selanjutnya di sebelah kiri menu Anda perlu menemukan layanan "Penyimpanan Objek", yang akan kita gunakan untuk menghosting situs.

Secara singkat:

• Object Storage adalah penyimpanan file yang kompatibel dengan teknologi AWS S3 serupa dari Amazon, yang juga memiliki API sendiri untuk mengelola penyimpanan dari kode dan, seperti AWS S3, dapat digunakan untuk meng-host situs statis.
• Di Object Storage kita membuat "bucket" (ember), yang merupakan tempat penyimpanan terpisah untuk file kita.

Mari kita buat salah satunya. Untuk melakukan ini, di konsol layanan, klik tombol “Buat keranjang”.

Formulir untuk membuat keranjang memiliki bidang-bidang berikut, mari kita bahas:

• Nama ember. Untuk mempermudah, sebut saja proyek ini sama dengan Angular - angular-habr-object-storage
• Maks. ukuran. Kami bertaruh sebanyak berat situs kami, karena situs ini tidak disimpan secara gratis dan untuk setiap gigabyte yang dialokasikan, kami akan membayar Yandex cukup banyak.
• Akses ke objek baca. Kami mengaturnya ke "Publik", karena pengguna harus menerima setiap file situs statis kami sehingga tata letak dapat digambar dengan benar, skrip dapat diproses, dll.
• Akses ke daftar objek dan Akses untuk membaca pengaturan. Biarkan sebagai "Terbatas". Hal ini diperlukan untuk menggunakan bucket sebagai penyimpanan file internal untuk aplikasi.
• Kelas penyimpanan. Biarkan sebagai "Standar". Artinya situs kita akan sering dikunjungi, sehingga file-file yang menyusun situs tersebut akan sering diunduh. Ditambah lagi item tersebut mempengaruhi kinerja dan pembayaran (masukkan tautan).

Klik “Buat keranjang” dan keranjang dibuat.

Sekarang kita perlu mengunggah situs kita ke ember. Cara termudah adalah dengan membuka folder terdekat dist situs kami dan seret langsung ke halaman menggunakan pegangan. Ini lebih nyaman daripada mengklik tombol “Muat objek”, karena dalam hal ini folder tidak ditransfer dan Anda harus membuatnya secara manual dalam urutan yang benar.

Jadi, situs dimuat ke dalam penyimpanan, sehingga kami dapat memberikan kesempatan kepada pengguna untuk mengakses penyimpanan sebagai situs web.
Untuk melakukan ini, di sisi kiri menu, klik tab “Situs Web”.

Pada halaman untuk menyiapkan keranjang sebagai situs, pilih tab “Hosting”. Di sini kami menunjukkan halaman utama situs, biasanya index.html. Jika Anda memiliki aplikasi SPA, kemungkinan besar semua error juga diproses di halaman utama, jadi kami juga akan menunjukkan index.html di halaman error tersebut.

Kita langsung melihat link mana yang bisa diakses situs kita. Klik simpan.

Setelah sekitar 5 menit, dengan mengklik link tersebut, kami melihat bahwa situs kami sekarang tersedia untuk semua orang.

Terima kasih kepada semua orang yang membaca sampai akhir! Ini adalah artikel pertama saya; Saya berencana untuk menjelaskan lebih lanjut layanan Yandex lainnya dan integrasinya dengan teknologi frontend dan backend.

Tulis di komentar betapa tertariknya Anda mempelajari layanan Yandex lainnya atau tentang penggunaan Angular dalam perkembangan modern.

Sumber: www.habr.com