Comment utiliser AWS Amplify pour les applications d’interface avant?

By /

Avant de passer à la partie de la pièce, permettez-moi de vous dire pourquoi les applications de façade avant (React, Vue, etc.) sont passées à AWS Amplify.

Pourquoi l’amplification?

Pour publier les applications frontales, j’ai utilisé des choses différentes comme EC2et CloudFrontEtc. Mais là problèmes Avec la gestion de tout seul dans l’organisation:

  • Il existe différents environnements tels que la production, le progrès, le développement, etc., et nous devons gérer tous ces cas seuls.
  • Nous devons gérer CI/CD Pipelines pour tous ces environnements. Dans les grandes organisations, cela conduit à certaines dépendances dans l’équipe de plate-forme.
  • Si l’application utilise certains environment variablesIl peut varier pour chaque environnement. Et sa gestion est un mal de tête différent.
  • S’il s’agit d’un produit SaaS et que nous devons le fournir via notre domaine client, nous devons implémenter un système distinct pour l’activer. (Par exemple, vous avez 10 clients qui utilisent cette application. Ils veulent fournir cette application à partir de leur domaine au lieu de vos entreprises.)
  • Nous devons gérer Nginx / Apache (ou tout autre serveur) pour les configurations rewrites and redirects Ou pour passer custom headers.

L’application d’une amplification peut résoudre tous ces problèmes.

Comment publier une demande?

Il y a des choses dont nous avons besoin pour publier une application.

  1. Livraison d’un entrepôt et choisissez une succursale
  2. Ajouter des paramètres de construction
  3. Livraison de différentes succursales à différents environnements
  4. Variables environnementales
  5. Ajouter des champs personnalisés
  6. Créer des avis / alertes si la construction échoue
  7. Moniteur
  8. Mot de passe Protégez votre site
  9. Autonomiser les insultes des relations publiques

Livraison d’un entrepôt et choisissez une succursale

Lors de la création d’une application, nous devrons accorder un accès Amplify au compte GitLab, GitHub, Bitbuckket, etc. Ensuite, nous pouvons voir tous les entrepôts à notre disposition dans ce compte.

Comment utiliser AWS Amplify pour les applications d’interface avant?

Sélectionnez le RIBO et une branche pour le publier.

Ajouter des paramètres de construction

Utilisez-le comme référence pour créer des paramètres de construction.

Pour nos applications, nous devons télécharger npm packages Avant de construire nos demandes. Par conséquent, à amplifier preBuild phase. Le symbole devrait ressembler à ceci:

frontend:
  phases:
    preBuild:
      commands:
        - 'npm ci'

Pour créer l’application, nous pouvons simplement ajouter cette configuration:

build:
  commands:
    - 'printenv >> .env'
    - 'npm run build'

Nous en discuterons plus sur printenv La question dans la section Variables d’environnement.

Aussi, pourtant npm run buildIl génère des fichiers de construction et les stocke dans build Dossier dans le guide racine. Pour que l’amplification découvre ce dossier et service à partir de cela, nous devons fournir le chemin sous artifacts.

artifacts:
  baseDirectory: /build
  files:
    - '**/*'

Livraison de différentes succursales à différents environnements

Dans Amplify, nous pouvons simplement connecter différentes branches pour gérer différents environnements.

Par exemple, et master La succursale peut servir l’environnement de production, dev La branche peut faire de même pour l’environnement de développement, etc.

Dans les coulisses, il utilise différentes distributions CloudFront pour chaque branche.

Nous pouvons simplement le faire en utilisant l’interface utilisateur, mais si vous avez des problèmes là-bas, cela peut vous aider si vous avez suffisamment d’accès. Remplacez votre application Amplify et le nom de la branche en conséquence.

aws amplify create-branch --app-id d1kkiwslwnw735 --branch-name dev

Variables environnementales

À l’aide de l’interface utilisateur Amplify, on peut facilement ajouter des variables environnementales. Mais il existe des opportunités que la valeur de ces variables changera en fonction de l’environnement.

Pour y faire face, par défaut, nous passons une valeur pour tous les environnements et nous pouvons surmonter ces valeurs en fonction de l’environnement / de la branche.

Mais il y a la chasse ici.

Si nous essayions directement d’atteindre notre variable en utilisant process.env.MY_VARIABLECe sera sa valeur undefined. (Mais pourquoi? – parce qu’il génère des fichiers HTML, CSS, JS. Ils ne peuvent pas atteindre process Au moment de l’opération.)

Pour accéder à ces variables, nous devons obtenir un fichier .env déposer. Nous pouvons ajouter ces variables pendant prebuild L’étape que nous avons discutée plus tôt dans la section ci-dessus.

Nous pouvons choisir d’ajouter toutes les variables environnementales manuellement. Ou nous pouvons utiliser printenv Commande pour toutes les variables environnementales disponibles pour le système d’exploitation à ce moment-là et la stocker dans un .env déposer.

Vous pouvez vous référer à ces documents officiels pour plus d’informations

Ajouter des champs personnalisés

Pour ajouter un champ dédié, nous pouvons simplement passer au service de gestion du terrain et ajouter n’importe quel nom de champ.

Il génère un SSL gratuit avec un ACM pour notre gamme.

Si nous ne le créons pas correctement, nous pouvons voir cette erreur dans votre navigateur: ERR_SSL_PROTOCOL_ERROR

Après avoir légèrement lutté avec les champs désignés, j’ai finalement découvert ce que signifient toutes les configurations. Prenons un exemple pour comprendre cela.

Disons que je veux ajouter my-app.example.com À la liste.

  • Tout d’abord, ajouter example.com (Et pas my-app.example.com) Pour former le champ.
  • Vous pouvez voir la liste des sous-réparations maintenant. ((www Par défaut avec re -usidance)
  • Si vous ne voulez pas être dirigé example.com C’est eux-mêmes, vous devez cliquer Exclude Root. Ce faisant, le certificat SSL pour la plage racine ne sera pas établi.
  • Vous pouvez également supprimer la boîte de sélection qui prépare la ré-guidance racine à sa sous-répartition.
  • au lieu de wwwTu dois mettre my-app Et appuyez sur le bouton Enregistrer.
  • Il générera des enregistrements CNAME. Ajoutez-les tous avec des fournisseurs DNS (comme GoDaddy) pour vérifier la propriété.
  • Après avoir vérifié la propriété, enfin, vous créerez l’enregistrement CNAME pour votre sous-répat. Ajoutez-le de votre fournisseur DNS et en quelques minutes, vous verrez le message que vous avez créé avec succès pour la gamme désignée.

Nous pouvons également effectuer les procédures ci-dessus en utilisant AWS CLI pour automatiser ce processus.

Créer des avis / alertes si la construction échoue

dans Notifications La section, nous pouvons créer des alertes par e-mail pour chaque environnement / branche si la construction échoue.

Moniteur

Vous n’avez pas besoin d’un outil appartenant à une autorité externe pour surveiller des choses de base comme:

  • Nombre de demandes
  • Codes de cas HTTP
  • Temps de réponse (cumin)

Vous pouvez surveiller ces choses de base à partir de l’interface utilisateur Amplify.

Mot de passe Protégez votre site

Pour empêcher les personnes indésirables d’accéder à votre application, nous pouvons utiliser cette fonctionnalité.

Aller à Access Control Faire un clic Manage access.

Modifiez les paramètres d’arrivée et entrez Username et Password

Autonomiser les insultes des relations publiques

Ceci est utile pendant que nous élevons Pull Requests Pour revoir et intégrer le symbole. Il crée une application temporaire de références aux références aux modifications de test.

Une fois les références combinées avec des relations publiques, elle détruit automatiquement l’environnement. Il est également visible sur la page des relations publiques de Github.

Pour activer cela, allez à Previews La section et cliquez Enable previews.

Il peut être demandé d’installer l’application GitHub.

Une fois que tout est traité, vous pouvez augmenter les relations publiques avec cette configuration.

conclusion

AWS Amplify facilite la diffusion de l’application frontale. Nous n’avons pas besoin d’autres outils pour la composition CI/CDRemettre des variables environnementales ou gérer les champs alloués. Il supprime beaucoup de maux de tête et nous aide à nous concentrer sur le développement.

Source Link

Scroll to Top