Hei Habr!
I denne artikkelen vil jeg fortelle deg hvordan du enkelt og enkelt kan være vert for et statisk nettsted ved hjelp av Yandex-teknologier, nemlig Objektlagring.
Til slutt vil du ha et webhotell som vil være tilgjengelig via en ekstern lenke.
Denne artikkelen vil være nyttig hvis du
- Начинающий разработчик, который только обучается программированию;
- En utvikler som har laget en portefølje og ønsker å plassere den i det offentlige domene for å vise den til venner og arbeidsgivere.
Om meg
Nylig utviklet jeg en SaaS-tjeneste, en slags markedsplass hvor folk finner sportstrenere for personlig trening. Brukte Amazon Web Services-stabelen (heretter referert til som AWS). Men jo dypere jeg dykket ned i prosjektet, jo flere nyanser lærte jeg om de forskjellige prosessene for å organisere en oppstart.
Я столкнулся с следующими проблемами:
- AWS forbrukte mye penger. Etter å ha jobbet i 3 år i Enterprise-bedrifter, ble jeg vant til gleder som Docker, Kubernetes, CI/CD, blågrønn distribusjon, og som en aspirerende oppstartsprogrammerer ønsket jeg å implementere det samme. Som et resultat kom jeg til den konklusjon at AWS forbrukte 300-400 dollar månedlig. Kubernetes viste seg å være den dyreste, rundt 100 dollar, med en minstelønn på én klynge og én node.
PS Det er ikke nødvendig å gjøre dette i starten. - Deretter, når jeg tenkte på den juridiske siden, lærte jeg om lov 152-FZ, som sa noe sånt som følgende: "Personopplysninger om borgere av den russiske føderasjonen må lagres på den russiske føderasjonens territorium", ellers bøter, som jeg ikke ville ha. Jeg bestemte meg for å takle disse problemene før det kom til meg ovenfra :).
Inspirert о мигрировании инфраструктуры из Amazon Web Services в Яндекс.Облако, я решил изучить стек Яндекса подробнее.
For meg var nøkkelfunksjonene til Yandex.Cloud følgende:
- 2-3 ganger billigere (i henhold til artikkelen ovenfor og offentlige prislister)
- , som den store Amazonas ennå ikke kan oppnå.
Jeg studerte andre konkurrenter til denne tjenesten, men på den tiden vant Yandex.
О себе рассказал, можно и перейти к делу.
Шаг 0. Подготовим сайт
Først trenger vi en nettside som vi ønsker å legge ut på Internett. Siden jeg er en Angular-utvikler skal jeg lage en enkel SPA-applikasjonsmal, som jeg så legger ut på Internett.
PS Hvem forstår Angular eller kjenner til dokumentasjonen , gå til .
La oss installere Angular-CLI for å lage SPA-nettsteder i Angular:
npm install -g @angular/cliLa oss lage en Angular-applikasjon ved å bruke følgende kommando:
ng new angular-habr-object-storageGå deretter til applikasjonsmappen og start den for å sjekke funksjonaliteten:
cd angular-habr-object-storage
ng serve --open
Applikasjonen er opprettet, men er ennå ikke klar for hosting. La oss sette sammen applikasjonen til en liten build (Produksjon) for å fjerne alle unødvendige ting og la bare de nødvendige filene være igjen.
I Angular kan du gjøre dette med følgende kommando:
ng build --prodSom et resultat av denne kommandoen dukket det opp en mappe i roten av programmet dist med nettsiden vår.
Virker. La oss nå gå videre til hosting.
Trinn 1.
La oss gå til siden og klikk på "Koble til"-knappen.
Merk:
- For å bruke Yandex-tjenesten kan det hende du trenger Yandex-post (men dette er ikke sikkert)
- Для некоторых функций придется положить деньги на счет в личном кабинете (минимум 500 рублей).
Etter vellykket registrering og autorisasjon er vi på din personlige konto.
Neste til venstre i menyen må du finne "Objektlagring"-tjenesten, som vi vil bruke for å være vert for nettstedet.
Kort fortalt:
- Object Storage — это хранилище файлов, совместимое с аналогичной технологией Амазона AWS S3, у которого также есть свой API для управления хранилищем из кода и его также как и AWS S3 можно использовать для размещения статического сайта.
- В Object Storage мы создаем "бакеты" (bucket / Корзина), которые являются отдельными хранилищами наших файлов.
Создадим один из них. Для этого в консоли сервиса жмем на кнопку "Создать бакет".
Skjemaet for å lage en bøtte har følgende felt, la oss gå gjennom dem:
- Navn på bøtte. For enkelhets skyld, la oss kalle prosjektet det samme som Angular -
angular-habr-object-storage - Maks. størrelse. Vi satser så mye som siden vår veier, siden siden ikke lagres gratis og for hver tildelt gigabyte betaler vi Yandex en pen krone.
- Tilgang til å lese objekter. Vi setter den til "Offentlig", siden brukeren må motta hver fil på vårt statiske nettsted slik at layouten kan tegnes riktig på den, skript kan behandles, etc.
- Tilgang til listen over objekter og Tilgang for å lese innstillinger. La det være "Begrenset". Dette er nødvendig for å bruke bøtta som intern fillagring for applikasjoner.
- Oppbevaringsklasse. La det stå som "Standard". Dette betyr at nettstedet vårt vil bli besøkt ofte, og derfor vil filene som utgjør nettstedet ofte lastes ned. Pluss at varen påvirker ytelse og betaling (sett inn lenke).
Klikk på "Opprett en bøtte" og bøtten opprettes.
Nå må vi laste opp siden vår til bøtta. Den enkleste måten er å åpne en mappe i nærheten dist nettstedet vårt og dra det direkte inn på siden ved hjelp av håndtak. Dette er mer praktisk enn å klikke på "Last inn objekter"-knappen, fordi i dette tilfellet blir ikke mappene overført, og du må opprette dem manuelt i riktig rekkefølge.
Итак, сайт загружен в хранилище, тем можем предоставить пользователям возможность обращаться к хранилищу, как к сайту.
For å gjøre dette, klikk på fanen "Nettsted" på venstre side av menyen.
På siden for å sette opp en bøtte som et nettsted, velg "Hosting"-fanen. Her angir vi hovedsiden til nettstedet, vanligvis index.html. Hvis du har en SPA-applikasjon, så behandles sannsynligvis alle feil også på hovedsiden, så vi vil også indikere index.html på feilsiden.
Vi ser umiddelbart hvilken lenke siden vår vil være tilgjengelig gjennom. Klikk lagre.
Etter omtrent 5 minutter, ved å klikke på lenken, ser vi at siden vår nå er tilgjengelig for alle.
Takk til alle som leser til slutt! Dette er min første artikkel; Jeg planlegger å beskrive andre Yandex-tjenester og deres integrasjon med frontend- og backend-teknologier ytterligere.
Skriv i kommentarfeltet hvor interessert du er i å lære om andre Yandex-tjenester eller om bruken av Angular i moderne utvikling.
Kilde: www.habr.com