Comment héberger un site web statique avec Yandex.Cloud Object Storage

Salut, Habr !

Dans cet article, je vais vous expliquer comment facilement et simplement héberger un site statique à l'aide des technologies de Yandex, à savoir Object Storage.

À la fin, vous aurez un site web hébergé qui sera accessible via un lien externe.

Cet article sera utile si vous êtes

• Un développeur débutant qui est en train d'apprendre la programmation ;
• Un développeur qui a créé un portfolio et souhaite le rendre accessible au public, afin de le montrer à ses amis et employeurs.

À propos de moi

Récemment, j'ai développé un service SaaS, similaire à un marché, où les gens trouvent des entraîneurs sportifs pour des entraînements personnels. J'ai utilisé le stack Amazon Web Services (AWS). Mais plus je me plongeais dans le projet, plus j'apprenais sur les différents processus d'organisation d'une startup.

J'ai rencontré les problèmes suivants :

• AWS coûtait très cher. Après avoir travaillé 3 ans dans des entreprises de taille établie, je suis habitué à des outils tels que Docker, Kubernetes, CI/CD, blue-green deployment, et en tant que développeur débutant dans une startup, je voulais implémenter la même chose. Au final, je me suis rendu compte qu'AWS coûtait entre 300 et 400 dollars par mois. Le plus coûteux était Kubernetes, environ 100 dollars, avec un minimum d'un cluster et une node.
  P.S. Au début, il n'est pas nécessaire de faire cela.
• Ensuite, en réfléchissant à l'aspect juridique, j'ai découvert la loi 152-FZ, qui énonçait à peu près ceci : "Les données personnelles des citoyens russes doivent être stockées sur le territoire de la Russie", sinon des amendes, ce que je voulais éviter. J'ai décidé de m'occuper de ces questions avant que cela ne me tombe dessus :)

Inspiré article par la migration de l'infrastructure d'Amazon Web Services vers Yandex.Cloud, j'ai décidé d'étudier le stack de Yandex plus en détail.

Pour moi, les caractéristiques clés de Yandex.Cloud étaient les suivantes :

• Moins cher de 2 à 3 fois (selon l'article ci-dessus et les tarifs publics)
• Stockage des données personnelles des utilisateurs sur le territoire de la Russie, ce que le grand Amazon ne peut pas encore réaliser.

J'ai étudié d'autres concurrents de ce service, mais à cette époque, Yandex était en tête.

J'ai parlé de moi, passons aux choses sérieuses.

Étape 0. Préparez le site

Tout d'abord, nous aurons besoin d'un site que nous souhaitons héberger sur Internet. Étant développeur Angular, je vais créer un simple modèle d'application SPA que je vais ensuite héberger sur Internet.

P.S. Ceux qui maîtrisent Angular ou connaissent sa documentation https://angular.io/guide/setup-local, passez à Étape 1.

Nous allons installer Angular-CLI pour créer des sites SPA avec Angular :

npm install -g @angular/cli

Créons une application Angular à l'aide de la commande suivante :

ng new angular-habr-object-storage

Ensuite, nous allons dans le dossier de l'application et la lançons pour vérifier son bon fonctionnement :

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

L'application a été créée, mais elle n'est pas encore prête à être hébergée. Nous allons créer un petit build (Production) pour éliminer le superflu et ne garder que les fichiers nécessaires.
Dans Angular, cela peut être fait avec la commande suivante :

ng build --prod

En conséquence de cette commande, un dossier est apparu à la racine de l'application dist avec notre site.

Ça fonctionne. Passons maintenant à l'hébergement.

Étape 1.

Allons sur le site https://console.cloud.yandex.ru/ et cliquons sur le bouton "Connecter".

Remarque :

• Pour utiliser le service Yandex, une adresse e-mail Yandex peut être nécessaire (mais ce n'est pas certain).
• Pour certaines fonctionnalités, il sera nécessaire de déposer de l'argent sur le compte dans l'espace personnel (minimum 500 roubles).

Après une inscription et une connexion réussies, nous sommes dans l'espace personnel.

Ensuite, dans le menu à gauche, il faut trouver le service "Object Storage", que nous allons utiliser pour l'hébergement du site.

En bref sur les termes :

• Object Storage est un stockage de fichiers compatible avec la technologie similaire d'Amazon AWS S3, qui dispose également de son API pour gérer le stockage à partir du code et qui, comme AWS S3, peut être utilisé pour héberger un site statique.
• Dans Object Storage, nous créons des "buckets" (bucket / Corbeille), qui sont des stockages séparés pour nos fichiers.

Créons l'un d'eux. Pour cela, dans la console du service, cliquons sur le bouton "Créer un bucket".

Dans le formulaire de création de bucket, il y a les champs suivants, parcourons-les :

• Nom du bucket. Pour simplifier, appelons-le comme le projet Angular — angular-habr-object-storage
• Taille max. Mettons autant que pèse notre site, car le site n'est pas stocké gratuitement et pour chaque gigaoctet attribué, nous devrons payer quelques centimes à Yandex.
• Accès en lecture aux objets. Mettons "Public", car l'utilisateur doit pouvoir accéder à chaque fichier de notre site statique pour que la mise en page s'affiche correctement, que les scripts fonctionnent, etc.
• Accès à la liste des objets et accès à la lecture des paramètres. Laissons "Restreint". Ceci est nécessaire pour utiliser le bucket comme stockage interne des fichiers pour les applications.
• Classe de stockage. Nous laissons "Standard". Cela signifie que notre site sera souvent visité, et donc les fichiers qui le composent seront fréquemment téléchargés. De plus, ce point influence les performances et le coût (insérer le lien).

Nous cliquons 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 à côté de notre site dist et de glisser-déposer directement dans la page. C'est plus pratique que de cliquer sur le bouton "Téléverser des objets", car dans ce cas, les dossiers ne sont pas transférés et il faudra les créer manuellement dans le bon ordre.

Ainsi, le site est téléchargé dans le stockage, et nous pouvons permettre aux utilisateurs d'accéder au stockage comme s'il s'agissait d'un site.
Pour cela, à gauche dans le menu, cliquez sur l'onglet "Site web".

Sur la page de configuration du bucket comme site, sélectionnez l'onglet "Hébergement". Ici, nous indiquons la page d'accueil du site, qui est généralement index.html. Si vous avez une application SPA, il se peut que toutes les erreurs soient également traitées sur la page d'accueil, alors nous indiquerons également index.html pour la page d'erreur.

Nous voyons immédiatement par quel lien notre site sera accessible. Cliquons sur enregistrer.

Dans environ cinq minutes, en accédant au lien, nous pouvons voir que notre site est maintenant accessible à tous.

Merci à tous ceux qui ont lu jusqu'à la fin ! C'est mon premier article, je prévois de décrire d'autres services de Yandex et leur intégration avec les technologies frontend et backend.

Écrivez dans les commentaires à quel point il vous serait intéressant de connaître d'autres services de Yandex ou sur l'utilisation d'Angular dans le développement moderne.

Source : habr.com