Application mobile: Hébergez une application Next.js SSR avec des données en temps réel sur AWS Amplify

Cet article a été écrit par Nikhil Swaminathan, chef de produit technique principal, AWS.

Aujourd’hui, AWS Amplify Hosting a annoncé la prise en charge du déploiement continu d’applications de rendu côté serveur (SSR) construites avec Next.js. Avec ce lancement, AWS Amplify CI/CD and Hosting vous permet de déployer des applications hybrides Next.js qui prennent en charge le rendu statique et dynamique des pages Web. Amplify’ Hosting est un service de création et d’hébergement entièrement géré qui permet aux développeurs de créer, déployer et héberger facilement des applications de pile complète sur AWS avec des fonctionnalités telles que le déploiement continu, les aperçus PR, les domaines personnalisés faciles et la protection par mot de passe. Next.js est un framework JavaScript construit sur React qui aide les développeurs à créer des applications plus performantes et conviviales pour le référencement avec des fonctionnalités telles que le pré-rendu, la division automatique du code, les routes API dynamiques.

Dans cet article de blog, nous allons déployer une application Next.js sur la console AWS Amplify, configurer un domaine personnalisé, activer la détection automatique des branches, puis configurer une base de données principale pour l’application.

Configurer l’application SSR

Pour commencer, commençons par amorcer un projet Next.js sur votre machine locale.

npx create-next-app
# or
yarn create next-app
yarn add react-markdown

Pour commencer à développer votre application, exécutez npm run dev ou yarn dev. Cela démarre le serveur de développement sur http://localhost:3000. Vous devriez voir le rendu par défaut de l’application Next.js sur votre navigateur.

Bienvenue sur l'écran du navigateur Next.js sur localhost

Avant de commencer à modifier l’application, passons en revue la structure :

  • /pages: Les pages Le dossier contient toutes les pages Web de votre application. Dans Next.js, une page est un composant React et chaque page est associée à une route basée sur son nom de fichier. Par exemple, pages/about.js sera accessible à localhost:3000/about.
  • /api: Une autre fonctionnalité clé offerte par Next.js est les routes API. N’importe quel fichier dans le dossier pages/api est mappé sur /api/* et sera traité comme un point de terminaison d’API au lieu d’une page. L’application par défaut est livrée avec pages/api/hello.js qui fournit une route API. Vous pouvez utiliser cette API pour vous connecter à n’importe quel service backend pour récupérer des données.

Déploiements CI/CD sans configuration avec AWS Amplify

Le déploiement de votre application est simple – il suffit de valider votre code auprès d’un fournisseur Git de votre choix – Amplify prend en charge AWS CodeCommit, GitHub, Bitbucket et GitLab. Une fois votre code archivé, connectez simplement votre référentiel dans la console Amplify. Amplify détecte automatiquement vos paramètres de build et déploie votre branche connectée en quelques minutes. Toutes les pages rendues par le serveur ou les routes API sont déployées en tant que ressources dans votre compte.

Pour commencer, visitez la console Amplify dans la console AWS. S’il s’agit de votre première utilisation d’Amplify, il existe deux manières de commencer : choisissez « Hébergez votre application Web » pour connecter votre référentiel Git. Si vous avez déjà des projets Amplify, sélectionnez Nouvelle application > Héberger l’application Web sur la page Toutes les applications.

AWS Amplify Sandbox créer un backend d'application ou héberger vos options d'application web

Une fois que vous avez connecté un référentiel et une branche, vous pourrez accéder à l’écran de configuration de la construction. Amplify détectera automatiquement que votre application est une application SSR. Afin de déployer des pages ou des API rendus par le serveur, nous déployons des ressources supplémentaires dans votre compte (en savoir plus ici). Pour ce faire, la console Amplify nécessite un rôle de service pour accéder aux ressources de votre compte.

AWS Amplify héberge votre application web, configurez les paramètres de build

En cliquant sur « Créer un nouveau rôle », vous accédez à la console IAM. Allez-y et créez un nouveau rôle, puis revenez à la console Amplify et choisissez le rôle que vous avez créé.

Sélectionnez votre cas d'utilisation - Amplify - Déploiement backend

Aucun autre changement n’est requis – Amplify détecte automatiquement vos paramètres de construction pour vous, vous êtes donc prêt à partir. Cliquez simplement sur terminer l’assistant et le déploiement de votre application commencera.

AWS Amplify Paramètres de génération et de test

Après quelques minutes, le pipeline de la console Amplify s’allumera en vert et votre application est maintenant déployée avec succès ! Allez-y et cliquez sur la capture d’écran pour ouvrir votre application déployée.

Amplifier l'environnement frontal de l'application entièrement déployé

Cliquez sur les détails de la construction pour afficher les détails du déploiement. Comme vous pouvez le voir, les pages rendues par le serveur ou les routes API sont déployées dans votre compte en tant que fonctions Lambda@Edge servies via CloudFront.

Amplifier les journaux de déploiement d'applications

Apportons maintenant un changement de code et validons-le pour déclencher automatiquement un build. Sur votre ordinateur local, ouvrez pages/index.js et remplacez le contenu par ce qui suit :

import Head from 'next/head'
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    
Create Next App

My Next.js Amplify app

) }

Validez votre code dans Git. Vous devriez immédiatement remarquer qu’une nouvelle version a été déclenchée dans la console Amplify. Une fois la compilation réussie, l’interface utilisateur de votre application doit être mise à jour pour afficher les dernières modifications.

Mon application Amplify Next.js déployée sur le backend Amplify

Vous devriez également pouvoir accéder à votre route API à l’adresse amplifyapp.com/api/hello

route api/hello de l'application Next.js affichant l'objet utilisateur en JSON

Domaines personnalisés faciles, détection automatique des succursales, aperçus des relations publiques, etc.

Le principal avantage du déploiement des applications Next.js sur Amplify est que vous obtenez toutes les fonctionnalités d’hébergement Amplify prêtes à l’emploi. Pour ce blog, nous allons configurer Amplify pour surveiller notre référentiel pour toutes les branches et connecter automatiquement toutes les nouvelles branches. Nous pouvons également le configurer pour déconnecter automatiquement les branches lorsqu’une branche est supprimée du référentiel. Dans la console Amplify, accédez à Paramètres de l’application > Général > Modifier. Définissez un modèle « * » pour qu’Amplify surveille tout changement apporté à votre dépôt. Vous pouvez également définir des modèles tels que « fonctionnalité * » pour ne sélectionner que les branches qui correspondent à un certain modèle.

Amplify Console active la détection automatique des branches

Les domaines personnalisés sont faciles – si vous gérez votre domaine dans AWS, la configuration de votre domaine est aussi simple que de choisir votre domaine dans une liste déroulante et de configurer des sous-domaines pointant vers des succursales. Une fois que vous avez cliqué sur « Enregistrer », Amplify génère automatiquement un certificat SSL pour vous et configure le domaine personnalisé pour vos branches de fonctionnalités.

Paramètres de l'application : Gestion de domaine - Ajouter un domaine

Amplifier les sous-domaines de l'ensemble de consoles

Ajouter une base de données avec des abonnements en temps réel à l’application SSR

Maintenant, pour la partie amusante – déployons un backend d’application avec une base de données et connectons-nous à la base de données à partir de notre application à partir de l’interface utilisateur d’administration. Lancée à re:Invent 2020, l’interface utilisateur d’administration AWS Amplify est une console hébergée en externe permettant aux équipes front-end de créer et de gérer visuellement un backend d’application. Une fois le backend configuré, nous utiliserons la bibliothèque JavaScript Amplify pour nous connecter au backend.

Pour commencer, accédez à l’onglet « Environnement backend » et appuyez sur « Commencer ». Cela configurera un environnement Amplify de « mise en scène » par défaut à partir duquel vous pourrez accéder à l’interface utilisateur d’administration.

Amplify App Get Started Environnements backend

Dans l’interface utilisateur d’administration, choisissez « Données » pour commencer. Le concepteur de modèles de données de l’interface utilisateur d’administration vous permet de créer un backend en vous concentrant sur les objets spécifiques à votre domaine (par exemple, le produit avec description et prix), les relations (par exemple, les produits ont de nombreuses commandes) et les règles d’autorisation (par exemple, seuls les utilisateurs connectés peuvent commander un produit) au lieu de configurer des tables de base de données, des API et une infrastructure d’authentification. Pour ce blog, nous allons créer un modèle de publication comme indiqué ci-dessous. Une fois que votre modèle ressemble à l’image ci-dessous, appuyez sur Enregistrer et déployer.

Modélisation des données de l'interface utilisateur d'administration de l'objet Post

Maintenant que votre base de données est déployée, connectons-y depuis votre application. À partir de votre ordinateur local, installez Amplify CLI et exécutez le amplify pull --appid XXX envName XXX commande (vous pouvez la trouver dans les instructions de configuration locale dans l’en-tête de l’interface utilisateur d’administration). Acceptez toutes les valeurs par défaut et continuez. Installez la bibliothèque cliente Amplify JS en exécutant yarn add aws-amplify

Mettez à jour votre _app.js pour vous connecter à votre backend Amplify – le aws-exports fichier contient toutes les informations pertinentes sur votre backend.

...

import Amplify from 'aws-amplify';
import config from '../src/aws-exports';
Amplify.configure({
  ...config, ssr: true
});

...

Mettez à jour votre index.js avec le code suivant. Amplify DataStore est un moteur de stockage sur appareil qui synchronise automatiquement les données entre vos applications mobiles et Web et votre base de données dans le cloud AWS pour vous aider à créer plus rapidement des applications en temps réel et hors ligne. Dans le code ci-dessous, DataStore.query récupère tous les messages, et DataStore.observe surveille la base de données pour les changements.

import styles from '../styles/Home.module.css'
import { DataStore } from 'aws-amplify'
import { useState, useEffect } from 'react'
import Link from 'next/link'
import { Post } from '../src/models'

export default function Home() {
  const [posts, setPosts] = useState([])

  useEffect(() => {
    fetchPosts()
    async function fetchPosts() {
      const postData = await DataStore.query(Post)
      setPosts(postData)
    }
    const subscription = DataStore.observe(Post).subscribe(() => fetchPosts())
    return () => subscription.unsubscribe()
  }, [])
  
  return (
    

Posts

{ posts.map(post => (

{post.title}

)) }
) }

Remplissons notre base de données avec quelques données. Revenez à l’interface utilisateur d’administration et accédez à l’onglet Contenu. Saisissez un seul enregistrement comme indiqué ci-dessous. Ces données devraient également apparaître dans votre application en temps réel.

Section Contenu de l'interface utilisateur d'administration. Entrée de poste unique

Mon application fullstack Next.js affichée sur localhost

Impressionnant! Nous avons maintenant mis en place une base de données et nous y sommes connectés depuis notre frontend. En bonus, nous pouvons implémenter le routage dynamique en utilisant le routage de Next.js, getStaticProps, et getStaticPath capacités. Étant donné que nos données sont de nature dynamique, nous devrons utiliser les capacités de routage dynamique de Next.js afin d’afficher un détail de publication pour un chemin que nous ne connaîtrons probablement pas au moment de la construction. Créer un fichier appelé pages/[id].js et collez le code suivant :

import { withSSRContext } from 'aws-amplify'
import { Post } from '../../src/models'
import Markdown from 'react-markdown'
import { useRouter } from 'next/router'

export default function PostComponent({ post }) {
  const router = useRouter()
  if (router.isFallback) {
    return 
Loading...
} return (
) } export async function getStaticPaths(req) { const { DataStore } = withSSRContext(req) const posts = await DataStore.query(Post) const paths = posts.map(post => ({ params: { id: post.id }})) return { paths, fallback: true, } } export async function getStaticProps (req) { const { DataStore } = withSSRContext(req) const { params } = req const { id } = params const post = await DataStore.query(Post, id) return { props: { post: JSON.parse(JSON.stringify(post)) }, revalidate: 1 } }

Vous pourrez maintenant cliquer sur un lien de localhost:3000 pour afficher les détails de la publication à l’ID unique de la publication. Ce message sera généré de manière statique pour la prochaine version, ce qui permettra au contenu d’être automatiquement pré-rendu.

localhost - chemin posts/postId - Ceci est mon nouveau message

Avant de pousser nos modifications vers Amplify, nous devons pointer notre branche dev vers notre backend de staging. Dans la console Amplify, choisissez « Modifier » à côté de l’étiquette indiquant « Configuration des déploiements continus » (sous le nom de la branche) et pointez la branche de développement vers le backend de transfert. Cela garantira que la construction est capable de pointer correctement vers le backend. Maintenant, envoyez simplement votre code à git et vous devriez voir vos modifications en direct.

Ressources

Pour résumer, nous avons hébergé des branches de fonctionnalités SSR, activé la détection automatique de branche, des domaines personnalisés, puis ajouté un backend d’application. Pour en savoir plus, visitez les ressources suivantes :

Merci d’avoir lu!

#Hébergez #une #application #Nextjs #SSR #avec #des #données #temps #réel #sur #AWS #Amplify