De nos jours, vous pouvez déployer gratuitement votre site Web avec un nom de domaine de deuxième niveau dans le cloud. Êtes-vous curieux de savoir comment? Continuez à lire.

Je vous suggère de voir comment vous pouvez créer un livre d'or sur ASP.NET Core (avec reCAPTCHA) et l'héberger gratuitement sur un hébergement cloud assez bien connu (oui, avec des limitations, mais il convient tout à fait à un site Web personnel avec peu de trafic)

En tant que base de données, j'ai aimé MongoDB d'Atlas . Il peut également être "zayuzat" gratuitement.
Alternativement, il existe encore de bonnes options sous la forme de DynamoDB avec une sorte de limites gratuites et Firebase Firestore.

L'application sera dockée. Mais comme «il y a un manque de volonté» pour installer localement Docker, nous allons configurer le pipeline pour générer et publier automatiquement l'image Docker (bien sûr, également gratuit)

Vous pouvez trouver le code source du livre d'or sur github
Je ne considérerai pas le code en détail. En bref, je vais juste regarder l'ajout de reCAPTCHA v3. Le recaptcha du livre d'or est Must. De plus, Recaptcha 3rd version ne dérange pas l'utilisateur avec la saisie de caractères.

Utilisation de reCAPTCHA

Vous pouvez créer un compte et obtenir SiteKey et SecretKey dans la console d'administration Google reCAPTCHA .
N'oubliez pas d'ajouter localhost (temporairement au moment du développement) et l'url de votre site Web à la liste des domaines (c'est dans les paramètres)

Nous accrochons le script avec la clé extraite des paramètres de l'application comme paramètre:

<script src="https://www.google.com/recaptcha/api.js?render=@Configuration["ReCaptcha:SiteKey"]" async defer></script> 

Et en cas d'envoi du contenu du formulaire, nous ajoutons le jeton reCAPTCHA (nous envoyons «XMLHttpRequest» sans utiliser jQuery)

 grecaptcha.ready(function() { grecaptcha.execute('@Configuration["ReCaptcha:SiteKey"]', {action: 'homepage'}).then(function(token) { xhttp.open('POST', '@Url.Action("AddMessage", "Home")', true); xhttp.setRequestHeader("RequestVerificationToken", document.getElementById('RequestVerificationToken').value); var formData = new FormData(document.forms.message); formData.append("Token", token) xhttp.send(formData); }); }); 

L'AntiForgeryToken est défini comme en-tête. Ceci est un autre jeton, sans lequel il ne le fait pas non plus.
Afin de vous assurer que la demande n'a pas été envoyée par le robot ou le spammeur, vous devez envoyer le jeton reçu de reCAPTCHA et la clé secrète à l'adresse www.google.com/recaptcha/api/siteverify

Pour cela, nous avons besoin de HttpClient. La création de HttpClient à l'aide de la construction using n'est pas du tout dans le concept ASP.NET Core. Dans Core, il est habituel de créer une fabrique HttpClientFactory. Il est créé simplement. Une ligne est ajoutée à Startup.cs

 services.AddHttpClient(); 

Et puis, dans les concepteurs des contrôleurs, nous pouvons extraire / créer des instances client à partir de la DI. Par exemple, comme ceci:

 private readonly HttpClient _httpClient; public HomeController(IHttpClientFactory httpClientFactory) { _httpClient = httpClientFactory.CreateClient("defaultClient"); } 

Vérifiez reCAPTCHA comme ceci:

 var parameters = new Dictionary<string, string> { { "secret", _configuration["ReCaptcha:SecretKey"] }, { "response", model.Token } }; var encodedContent = new FormUrlEncodedContent(parameters); var response = await _httpClient.PostAsync("https://www.google.com/recaptcha/api/siteverify", encodedContent); var result = JsonConvert.DeserializeObject<ReCaptchaResponse>(await response.Content.ReadAsStringAsync()); 

Dans ce cas, la classe ReCaptchaResponse elle-même:

 public class ReCaptchaResponse { public bool success { get; set; } public double score { get; set; } public string action { get; set; } public string hostname { get; set; } public string challenge_ts { get; set; } } 

Créer une base de données cloud gratuite

Lors de l'enregistrement d'un compte avec MongoDB Atlas .
Vous devez entrer un numéro de téléphone et d'autres données personnelles. Le cluster Starter gratuit est conçu pour apprendre MongoDB et pour les petites applications. Il est intéressant que vous puissiez choisir non seulement la région, mais le fournisseur d'hébergement cloud de votre base à votre goût parmi les trois plus grands

Après avoir créé le cluster, vous devrez créer un utilisateur

et vous devrez ajouter toutes les adresses IP avec la liste autorisée (malheureusement, le plan d'hébergement gratuit de Heroku ne fournit pas d'adresse IP statique).

Il ne nous reste plus qu'à créer une base de données et une collection

Cliquez sur COLLECTIONS puis sur Ajouter mes propres données

Nous trouvons le nom de la base de données et de la collection et remplissons les champs. Il est préférable de ne pas sélectionner les collections plafonnées, car dans ce cas, il ne sera pas possible de supprimer des enregistrements. Les collections plafonnées sont tout simplement parfaites pour la journalisation des informations. L'enregistrement de nouveaux enregistrements est rapide, lorsqu'un certain montant est atteint, les anciens enregistrements sont réécrits.

En cliquant sur Connecter et en sélectionnant Connecter votre application

Vous pourrez copier la chaîne de connexion

Création d'une application Heroku

Tout y est vraiment simple. Même une carte de crédit ne peut pas être liée lors de l'enregistrement d'un compte.

Création d'un pipeline pour publier une image sur le Docker Hub

Dans le projet, créez un Dockerfile avec un contenu assez ordinaire (un exemple de fichier est fourni pour la version de .NET Core 2.2)

 FROM mcr.microsoft.com/dotnet/core/aspnet:2.2-stretch-slim AS base WORKDIR /app EXPOSE 64498 EXPOSE 44396 FROM mcr.microsoft.com/dotnet/core/sdk:2.2-stretch AS build WORKDIR /src COPY Guestbook.csproj Guestbook.csproj RUN dotnet restore COPY . . WORKDIR /src RUN dotnet build -c Release -o /app FROM build AS publish RUN dotnet publish -c Release -o /app FROM base AS final WORKDIR /app COPY --from=publish /app . ENTRYPOINT ["dotnet", "Guestbook.dll"] 

Pour que Heroku puisse lancer l'image, la dernière ligne devra être changée en

 CMD ASPNETCORE_URLS=http://*:$PORT dotnet Guestbook.dll 

Le code source doit être exécuté dans un système de contrôle de version. J'ai commencé sur github.
Une fois que le code est placé sur GitHub pour créer l'image docker, il devient possible d'utiliser Azure Devops . Vous pouvez ignorer cette partie de l'article, installer Docker localement et tout reconstruire manuellement à chaque fois.

Je décrirai la création du projet avec des captures d'écran

Après avoir créé le projet lui-même, vous devez créer un nouveau pipeline

et sélectionnez le système de contrôle de version que vous utilisez

Vous pouvez maintenant sélectionner un référentiel

Ensuite, vous devrez autoriser DevOps à accéder au référentiel.
Et il sera possible de choisir le type de configuration (le fichier yaml d'un certain type sera créé automatiquement)

Notre version est Docker.
Dans la fenêtre qui s'ouvre, vous devez spécifier le chemin d'accès au fichier Docker:

Dans l'étape suivante, le contenu du fichier yaml vous sera affiché.

Vous pouvez le penser et le conjurer vous-même, mais il est plus facile de copier le code suivant et d'y remplacer certaines valeurs (Attention! Les espaces dans yaml sont très importants):

 variables: dockerId: your-docker-login # Replace with your Docker ID for Docker Hub or the admin user name for the Azure Container Registry imageName: mongodb-guestbook # Replace with the name of the image you want to publish steps: - script: | docker build -t $(dockerId)/$(imageName) . docker login -u $(dockerId) -p $(dockerPassword) docker push $(dockerId)/$(imageName) docker login --username=_ --password=$(token) registry.heroku.com docker build -t registry.heroku.com/myfreeguestbook/web . docker push registry.heroku.com/myfreeguestbook/web 

votre-connexion-docker que vous devez remplacer par l'ID de votre compte docker
mongodb-guestbook changer le nom de votre image
au lieu de myfreeguestbook, insérez le nom de votre application sur Heroku

Il ne reste plus qu'à entrer les valeurs des variables dockerPassword et token . Pour ce faire, cliquez sur Variables

Eh bien, entrez le mot de passe du compte docker. Et le jeton ..

S'il est clair où obtenir le mot de passe du compte Docker, alors pour obtenir le jeton, nous avons besoin de la CLI Heroku
Vous pouvez le télécharger sur le lien suivant: Télécharger et installer
Vous pouvez installer la version autonome / portable.

Connectez-vous à l'aide de l'une des commandes suivantes: heroku login (cette commande ouvrira une fenêtre de navigateur pour la connexion) ou heroku login -I (cette commande demandera un mot de passe dans la console)

Le jeton est obtenu à l'aide de la commande

heroku auth:token

Il est également conseillé de changer le type d'application Heroku en conteneur. Cela se fait par la commande:

heroku stack:set container -a myfreeguestbook

N'oubliez pas de remplacer myfreeguestbook par le nom de votre application.

Une fois le pipeline terminé et créé l'image docker, vous devez exécuter la commande publiant votre application:

heroku container:release -a myfreeguestbook

Si vous êtes le bon développeur et stockez tous les paramètres dans le fichier appsettings.Development.json, le projet ne fonctionnera pas pour vous. Pour que tout fonctionne, vous devez ajouter des paramètres à Heroku

Les éléments enfants Json sont séparés par des doubles traits de soulignement __

Configuration de domaine et SSL

Avec Heroku CLI, vous pouvez ajouter votre domaine à l'application. Pour ce faire, vous devrez d'abord attacher une carte de crédit à votre compte.

Équipe:

heroku domains:add www.example.ru

Cela vous donnera quelque chose comme:

Ajout de www.example.ru à ⬢ exemple d'application ... terminé
▸ Configurez le fournisseur DNS de votre application pour pointer vers la cible DNS
▸ whispering-willow-5678.herokudns.com.
▸ Pour obtenir de l'aide, consultez https://devcenter.heroku.com/articles/custom-domains
Il doit être répété pour votre domaine racine (par exemple, par exemple.ru)

Les alias CNAME doivent être enregistrés et ajoutés en tant que CNAME sur votre portail d'enregistrement de nom de domaine

www whispering-willow-erkie5ugksj4fo.herokudns.com

@ mighty-horse-dvkerbibi34biufbwiieuf.herokudns.com

Vous pouvez les ajouter directement dans l'éditeur d'enregistrement DNS arbitraire:

www.example.ru. IN CNAME whispering-willow-erkie5ugksj4fo.herokudns.com.

@.example.ru IN CNAME mighty-horse-dvkerbibi34biufbwiieuf.herokudns.com.

Vous pouvez le faire.

Mais je préfère l'option d'avoir un compte cloudflare gratuit. Après tout, Cloudflare fournit un certificat SSL gratuit. Pour le contenu, vous devez spécifier les valeurs CNAME reçues de Heroku. Comme vous pouvez le voir, j'ai également ajouté du courrier Yandex gratuit pour le domaine.

Eh bien, ce qui sera indiqué dans les valeurs des serveurs de noms Cloudflare, vous devrez spécifier sous la forme de serveurs DNS sur le site de votre registraire de domaine.

Le résultat est que CloudFlare est un intermédiaire entre votre fournisseur DNS et Heroku.