Hé Habr !
Dans cet article, je vais vous expliquer comment héberger facilement et simplement un site Web statique en utilisant les technologies Yandex, à savoir Stockage d'objets.
Au final, vous disposerez d’un site web hébergé qui sera accessible via un lien externe.
Cet article vous sera utile si vous
- Un développeur débutant qui apprend juste à programmer ;
- Un développeur qui a créé un portfolio et souhaite le rendre public pour le montrer à ses amis et à ses employeurs.
À propos de moi
Récemment, je développais un service SaaS, une sorte de marketplace où les gens trouvent des entraîneurs sportifs pour un entraînement personnel. Utilisation de la pile Amazon Web Services (ci-après dénommée AWS). Mais plus je plongeais dans le projet, plus j'apprenais de nuances sur les différents processus d'organisation d'une startup.
J'ai rencontré les problèmes suivants :
- AWS consommait beaucoup d'argent. Ayant travaillé pendant 3 ans dans des entreprises d'entreprise, je me suis habitué à des joies telles que Docker, Kubernetes, CI/CD, le déploiement bleu vert et, en tant qu'aspirant programmeur de startup, je voulais mettre en œuvre la même chose. En conséquence, je suis arrivé à la conclusion qu'AWS consommait entre 300 et 400 dollars par mois. Kubernetes s'est avéré être le plus cher, environ 100 dollars, avec un salaire minimum d'un cluster et d'un nœud.
PS : Il n'est pas nécessaire de faire cela au début. - Ensuite, en pensant au côté juridique, j'ai découvert la loi 152-FZ, qui disait quelque chose comme ceci : "Les données personnelles des citoyens de la Fédération de Russie doivent être stockées sur le territoire de la Fédération de Russie", sinon des amendes, ce que je ne voulais pas. J'ai décidé de m'attaquer à ces problèmes avant qu'ils ne me viennent d'en haut :).
Inspiré concernant la migration de l'infrastructure d'Amazon Web Services vers Yandex.Cloud, j'ai décidé d'étudier la pile Yandex plus en détail.
Pour moi, les principales fonctionnalités de Yandex.Cloud étaient les suivantes :
- 2 à 3 fois moins cher (selon l'article ci-dessus et les tarifs publics)
- , ce que la grande Amazonie ne peut pas encore réaliser.
J'ai étudié d'autres concurrents de ce service, mais à cette époque, Yandex gagnait.
Je vous ai parlé de moi pour que nous puissions passer aux choses sérieuses.
Étape 0. Préparez le site
Tout d’abord, nous avons besoin d’un site Web que nous souhaitons placer sur Internet. Puisque je suis un développeur Angular, je vais créer un modèle d'application SPA simple, que je publierai ensuite sur Internet.
PS Qui comprend Angular ou connaît sa documentation , aller à .
Installons Angular-CLI pour créer des sites SPA dans Angular :
npm install -g @angular/cliCréons une application Angular à l'aide de la commande suivante :
ng new angular-habr-object-storageEnsuite, allez dans le dossier de l'application et lancez-la pour vérifier sa fonctionnalité :
cd angular-habr-object-storage
ng serve --open
L'application a été créée, mais n'est pas encore prête à être hébergée. Assemblons l'application dans une petite version (Production) pour supprimer toutes les choses inutiles et ne laisser que les fichiers nécessaires.
Dans Angular, vous pouvez le faire avec la commande suivante :
ng build --prodSuite à cette commande, un dossier est apparu à la racine de l'application dist avec notre site Internet.
Travaux. Passons maintenant à l'hébergement.
Étape 1.
Aller sur le site et cliquez sur le bouton « Connecter ».
Note:
- Pour utiliser le service Yandex, vous aurez peut-être besoin du courrier Yandex (mais ce n'est pas certain)
- Pour certaines fonctions, vous devrez déposer de l'argent sur votre compte personnel (minimum 500 roubles).
Après une inscription et une autorisation réussies, nous sommes dans votre compte personnel.
Ensuite, à gauche dans le menu, vous devez trouver le service « Object Storage », que nous utiliserons pour héberger le site.
En bref en termes :
- Object Storage est un stockage de fichiers compatible avec la technologie similaire AWS S3 d'Amazon, qui possède également sa propre API pour gérer le stockage à partir du code et, comme AWS S3, peut être utilisé pour héberger un site statique.
- Dans Object Storage, nous créons des « buckets » (buckets), qui sont des zones de stockage distinctes pour nos fichiers.
Créons-en un. Pour cela, dans la console du service, cliquez sur le bouton « Créer un bucket ».
Le formulaire de création d'un bucket comporte les champs suivants, parcourons-les :
- Nom du compartiment. Pour plus de simplicité, appelons le projet de la même manière qu'Angular -
angular-habr-object-storage - Max. taille. Nous parions autant que pèse notre site, car le site n'est pas stocké gratuitement et pour chaque gigaoctet alloué, nous paierons à Yandex un joli centime.
- Accès à la lecture des objets. Nous le définissons sur « Public », puisque l'utilisateur doit recevoir chaque fichier de notre site statique pour que la mise en page puisse y être dessinée correctement, que les scripts puissent être traités, etc.
- Accès à la liste des objets et Accès aux paramètres de lecture. Laissez-le comme « Limité ». Cela est nécessaire pour utiliser le compartiment comme stockage de fichiers interne pour les applications.
- Classe de stockage. Laissez-le comme "Standard". Cela signifie que notre site sera visité fréquemment, et donc les fichiers qui composent le site seront fréquemment téléchargés. De plus, l'article affecte les performances et le paiement (insérer le lien).
Cliquez sur « Créer un bucket » et le bucket est créé.
Nous devons maintenant télécharger notre site dans le bucket. Le moyen le plus simple est d'ouvrir un dossier à proximité dist notre site et faites-le glisser directement sur la page à l'aide des poignées. C'est plus pratique que de cliquer sur le bouton « Charger les objets », car dans ce cas les dossiers ne sont pas transférés et vous devrez les créer manuellement dans le bon ordre.
Ainsi, le site est chargé dans le stockage, afin que nous puissions offrir aux utilisateurs la possibilité d'accéder au stockage en tant que site Web.
Pour cela, sur le côté gauche du menu, cliquez sur l'onglet « Site Internet ».
Sur la page de configuration d'un bucket en tant que site, sélectionnez l'onglet « Hébergement ». Nous indiquons ici la page principale du site, généralement index.html. Si vous disposez d'une application SPA, toutes les erreurs sont probablement également traitées sur la page principale, nous indiquerons donc également index.html sur la page d'erreur.
Nous voyons immédiatement par quel lien notre site sera accessible. Cliquez sur Enregistrer.
Après environ 5 minutes, en cliquant sur le lien, nous constatons que notre site est désormais accessible à tous.
Merci à tous ceux qui ont lu jusqu'au bout ! Ceci est mon premier article ; je prévois de décrire plus en détail d'autres services Yandex et leur intégration avec les technologies frontend et backend.
Écrivez dans les commentaires à quel point vous souhaitez en savoir plus sur d'autres services Yandex ou sur l'utilisation d'Angular dans le développement moderne.
Source: habr.com