Déploiement de site statique à l’aide de Netlify CLI / Blogs / Perficient

Un peu de contexte :

Pour commencer, assurez-vous d’avoir accès à :

Déploiement de l’interface utilisateur Netlify

Connectez-vous à l’environnement XM Cloud

Prenons note de l’ID d’environnement choisi qui contient le site que nous allons déployer.

Ensuite, nous devons déterminer les variables d’environnement que nous utiliserons pour déployer notre site dans Netlify. Pour cela, nous aurons besoin de :

• GRAPH_QL_ENDPOINT

• JSS_APP_NAME

• PUBLIC_URL

• SITE CORE_API_KEY

Créer un compte Netlify

La création d’un compte dans Netlify est simple, et pour ce POC, j’ai créé un compte gratuit. Une fois le compte créé, allez-y et créez un site et sélectionnez l’option « Importer un projet existant ».

Sélectionnez le référentiel GitHub pour votre instance XM Cloud à laquelle vous souhaitez vous connecter. Avec cette option, nous configurons une relation CI/CD :

1. Netlify tirera la dernière de cette branche, lorsque vous déclencherez un déploiement dans Netlify ou dans la CLI.

2. Les déploiements sont déclenchés dans Netlify à partir de Github chaque fois que des modifications sont apportées à la branche sélectionnée

Paramètres de construction

Le paramètre de construction indique à Netlify quelles commandes émettre lors de la réalisation de la construction.

Variables d’environnement

Ensuite, nous devrons créer les variables d’environnement notées ci-dessus

*Comme il s’agit d’un compte gratuit, je ne suis pas en mesure de définir les portées/contextes de ces variables.

C’est aussi ce que nous utiliserons comme variable PUBLIC_URL

À ce stade, tout doit être en place pour « Déclencher le déploiement » trouvé dans le menu de déploiement.

En cas de succès, vous devriez voir un journal de déploiement semblable au suivant.

S’il y avait des problèmes, le journal signalerait un échec et une trace complète de l’erreur, ce que je trouve très utile.

Déploiement local

Pour le déploiement local, nous ferons la plupart de notre travail dans le dossier du site statique, c’est-à-dire /src/sxastarter.

Ce qui se passe essentiellement ici, c’est que nous utiliserons la CLI Netlify pour créer manuellement le dossier et les actifs locaux, puis pousserons cette accumulation vers le compte cloud Netlify pour le déploiement.

1. Installez Netlify CLi en l’exécutant sur la ligne de commande

npm install -g netlify-cli - netlify

2. Connectez-vous à notre compte dans netlify en lançant (on vous posera quelques questions sur votre compte Netlify, c’est à dire les sites à utiliser ..etc)

   ntl init ou netlify init

   

3. Construisez un dossier local et des ressources, ce qui nécessite les mêmes paramètres que ceux mentionnés ci-dessus dans les paramètres de construction sur le site Web Netlify (vous serez peut-être interrogé sur la commande de construction à utiliser et le dossier déployé, dans mon cas, c’était

   npm run next:build et .next respectivement.

   Construire et déployer sur le compte Netlify

   ntl deploy --build --prod ou netlify deploy --build --prod

   

Vous devriez maintenant pouvoir voir votre site Web déployé sur l’URL générée par Netlify

Un script pour ce type de déploiement peut ressembler à ceci

$netlifyTOken="xxxxxxxxxxxxxxxx"

# Check if the Netlify CLI is installed
if (-not (Get-Command netlify -ErrorAction SilentlyContinue)) {
    # Install the Vercel CLI using npm
    npm install -g netlify-cli
}


# Deploy the project using the Netlify CLI
netlify deploy --build --prod  --auth $netlifyTOken

J’espère que ce fut une procédure pas à pas utile pour créer des déploiements locaux et cloud dans Netlify. Comme mentionné ci-dessus, c’était similaire à mon travail précédent avec Vercel et c’était assez simple, étant donné la parité des fonctionnalités entre les deux plates-formes. Ensuite, je m’attaquerai au déploiement de XM Cloud sur la plate-forme Amplify, jusque-là, restez curieux !