Carane dadi tuan rumah situs web statis nggunakake Yandex.Cloud Object Storage

Hey Habr!

Ing artikel iki, aku bakal menehi pitutur marang kowe carane gampang lan gampang dadi tuan rumah situs web statis nggunakake teknologi Yandex, yaiku Panyimpenan obyek.

Pungkasane, sampeyan bakal duwe situs web sing dadi tuan rumah web sing bisa diakses liwat tautan eksternal.

Artikel iki bakal migunani yen sampeyan

• Pangembang pemula sing lagi sinau program;
• Pangembang sing wis nggawe portofolio lan pengin dilebokake ing domain umum kanggo nuduhake menyang kanca lan majikan.

Babagan aku

Bubar, aku ngembangake layanan SaaS, sejenis pasar ing ngendi wong golek pelatih olahraga kanggo latihan pribadi. Gunakake tumpukan Layanan Web Amazon (sabanjuré diarani AWS). Nanging luwih jero aku nyilem menyang proyek kasebut, luwih akeh nuansa sing aku sinau babagan macem-macem proses ngatur wiwitan.

Aku nemoni masalah ing ngisor iki:

• AWS mbuwang akeh dhuwit. Sawise 3 taun makarya ing perusahaan Enterprise, aku wis biasa karo kabungahan kaya Docker, Kubernetes, CI / CD, penyebaran ijo biru, lan, minangka programmer wiwitan, aku pengin ngetrapake sing padha. Akibaté, aku teka ing kesimpulan sing AWS migunakaken 300-400 dolar saben wulan. Kubernetes dadi sing paling larang, kira-kira 100 dolar, kanthi upah minimal siji kluster lan siji simpul.
  PS Ora perlu nindakake iki ing wiwitan.
• Sabanjure, mikir babagan sisih hukum, aku sinau babagan hukum 152-FZ, sing ujar kaya ing ngisor iki: "Data pribadi warga Federasi Rusia kudu disimpen ing wilayah Federasi Rusia", digunakake denda, sing aku ora pengin. Aku mutusake kanggo ngatasi masalah kasebut sadurunge teka saka ndhuwur :).

Inspirasi artikel babagan migrasi infrastruktur saka Layanan Web Amazon menyang Yandex.Cloud, aku mutusake sinau tumpukan Yandex kanthi luwih rinci.

Kanggo kula, fitur utama Yandex.Cloud yaiku:

• 2-3 kaping luwih murah (miturut artikel ing ndhuwur lan dhaptar rega umum)
• Panyimpenan data pribadhi pangguna ing wilayah Federasi Rusia, sing Amazon gedhe durung bisa entuk.

Aku sinau pesaing liyane saka layanan iki, nanging ing wektu iku Yandex menang.

Aku wis ngomong babagan awakku dhewe, supaya kita bisa miwiti bisnis.

Langkah 0. Siapke situs

Kaping pisanan, kita butuh situs web sing pengin dilebokake ing Internet. Awit aku dadi pangembang Angular, aku bakal nggawe template aplikasi SPA sing prasaja, sing banjur bakal dikirim ing Internet.

PS Sing ngerti Angular utawa ngerti babagan dokumentasi https://angular.io/guide/setup-local, pindhah menyang Langkah 1.

Ayo nginstal Angular-CLI kanggo nggawe situs SPA ing Angular:

npm install -g @angular/cli

Ayo nggawe aplikasi Angular nggunakake printah ing ngisor iki:

ng new angular-habr-object-storage

Sabanjure, pindhah menyang folder aplikasi lan bukak kanggo mriksa fungsine:

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

Aplikasi wis digawe, nanging durung siap kanggo hosting. Ayo ngumpulake aplikasi kasebut dadi bangunan cilik (Produksi) kanggo mbusak kabeh sing ora perlu lan mung ninggalake file sing dibutuhake.
Ing Angular sampeyan bisa nindakake iki kanthi printah ing ngisor iki:

ng build --prod

Minangka asil saka printah iki, folder katon ing ROOT saka aplikasi dist karo situs web kita.

Nyambut gawe. Saiki ayo pindhah menyang hosting.

Langkah 1.

Ayo menyang situs https://console.cloud.yandex.ru/ lan klik ing tombol "Sambungake".

Wigati:

• Kanggo nggunakake layanan Yandex, sampeyan bisa uga mbutuhake mail Yandex (nanging iki ora mesthi)
• Kanggo sawetara fungsi sampeyan kudu nyetor dhuwit menyang akun ing akun pribadhi (minimal 500 rubel).

Sawise registrasi lan wewenang sukses, kita ana ing akun pribadi sampeyan.

Sabanjure ing sisih kiwa ing menu sampeyan kudu nemokake layanan "Panyimpenan Obyek", sing bakal digunakake kanggo hosting situs kasebut.

Secara singkat ing istilah:

• Panyimpenan Obyek minangka panyimpenan file sing kompatibel karo teknologi AWS S3 sing padha karo Amazon, sing uga duwe API dhewe kanggo ngatur panyimpenan saka kode lan, kaya AWS S3, bisa digunakake kanggo host situs statis.
• Ing Panyimpenan Obyek kita nggawe "ember" (ember), sing minangka area panyimpenan sing kapisah kanggo file kita.

Ayo nggawe salah siji saka wong-wong mau. Kanggo nindakake iki, ing konsol layanan, klik tombol "Gawe ember".

Formulir kanggo nggawe ember nduweni kolom ing ngisor iki, ayo diterusake:

• Jeneng ember. Kanggo kesederhanaan, ayo nelpon proyek kasebut padha karo Angular - angular-habr-object-storage
• Maks. ukuran. Kita nang minangka bobot situs kita, amarga situs kasebut ora disimpen kanthi gratis lan kanggo saben gigabyte sing diparengake, kita bakal mbayar Yandex dhuwit sing apik.
• Akses kanggo maca obyek. Kita nyetel "Public", amarga pangguna kudu nampa saben file situs statis supaya tata letak bisa digambar kanthi bener, skrip bisa diproses, lsp.
• Akses menyang dhaptar obyek lan Akses kanggo maca setelan. Ninggalake minangka "Watesan". Iki perlu kanggo nggunakake ember minangka panyimpenan file internal kanggo aplikasi.
• Kelas panyimpenan. Ninggalake minangka "Standar". Iki tegese situs kita bakal kerep dibukak, lan mulane file sing nggawe situs bakal kerep diundhuh. Plus item mengaruhi kinerja lan pembayaran (insert link).

Klik "Gawe ember" lan ember digawe.

Saiki kita kudu ngunggah situs kita menyang ember. Cara paling gampang yaiku mbukak folder ing cedhak dist situs kita lan seret langsung menyang kaca nggunakake gagang. Iki luwih trep tinimbang ngeklik tombol "Muat obyek", amarga ing kasus iki folder ora ditransfer lan sampeyan kudu nggawe kanthi manual kanthi urutan sing bener.

Dadi, situs kasebut dimuat menyang panyimpenan, supaya kita bisa menehi pangguna kesempatan kanggo ngakses panyimpenan minangka situs web.
Kanggo nindakake iki, ing sisih kiwa menu, klik tab "Situs web".

Ing kaca kanggo nyetel ember minangka situs, pilih tab "Hosting". Ing kene kita nuduhake kaca utama situs kasebut, biasane index.html. Yen sampeyan duwe aplikasi SPA, mesthine kabeh kesalahan uga diproses ing kaca utama, mula kita uga bakal nuduhake index.html ing kaca kesalahan.

Kita langsung ndeleng link sing bisa diakses situs kita. Klik simpen.

Sawise kira-kira 5 menit, ngeklik link kasebut, kita ndeleng manawa situs kita saiki kasedhiya kanggo kabeh wong.

Matur nuwun kanggo kabeh sing maca nganti pungkasan! Iki minangka artikel pisananku; Aku arep njlèntrèhaké layanan Yandex liyane lan integrasi karo teknologi frontend lan backend.

Tulis ing komentar kepiye kasengsem sampeyan sinau babagan layanan Yandex liyane utawa babagan panggunaan Angular ing pangembangan modern.

Source: www.habr.com