Récemment, j'ai réorganisé ma version open source de 2048 Game et j'ai décidé de la migrer vers Next.js et React 18. Le jeu existant a été publié sur les pages GitHub sans aucun domaine personnalisé. J'envisageais de déployer sur Vercel mais cela perdrait le trafic organique de Google qui s'est accumulé au cours des 3 dernières années. Cela signifie que je devais expérimenter le déploiement sur les pages GitHub et aujourd'hui, je partagerai ce que j'ai appris. Si vous souhaitez voir le résultat final avant de lire l'intégralité de l'article, vous pouvez . vérifiez-le ici Introduction rapide J'utiliserai deux fonctionnalités GitHub : GitHub Actions et GitHub Pages. Si vous n'en avez pas entendu parler, laissez-moi vous expliquer rapidement : sont comme de petits workflows qui peuvent effectuer des tâches sur vos projets. C'est comme avoir un assistant qui fait automatiquement les choses que vous lui dites de faire. Vous pouvez utiliser des actions pour exécuter des tests, pour des contrôles de qualité ou pour créer votre application. Dans mon cas, j'ai utilisé ces workflows pour automatiser le pipeline de déploiement. Les actions GitHub Que sont ? Considérez-les comme une option d'hébergement Web pour les développeurs et les projets open source. Vous pouvez utiliser les pages GitHub pour partager vos portefeuilles, héberger des sites Web de vos projets open source ou simplement publier vos projets préférés comme le mien. les pages GitHub Maintenant, commençons. Étape 1 – Activez les pages GitHub pour votre référentiel Pour publier notre application Next.js, je devais activer les pages GitHub pour le référentiel du projet. Vous pouvez trouver dans l'onglet Paramètres (1 dans l'image ci-dessous), puis sélectionner dans le menu de gauche (2), et trouver le menu déroulant qui nous permet de spécifier la de déploiement (3). Pages source Vous devrez maintenant modifier la de déploiement en . source GitHub Actions Désormais, votre projet dispose d'une page dédiée. Il vous suffit d'y publier du contenu. Étape 2 – Configurer le processus de construction Next.js Avant de déployer l'application Next.js, il est important de modifier la sortie de build. Par défaut, Next.js utilise Node.js pour exécuter l'application, ce qui est incompatible avec les pages GitHub. Les pages GitHub sont conçues pour héberger des fichiers statiques, ce qui signifie que nous ne pouvons y publier que du HTML, CSS, JavaScript (et autres fichiers statiques). Nous devrons donc activer la génération de pages statiques dans Next.js. Pour ce faire, vous allez changer le mode de sortie pour dans : export next.config.js /** @type {import('next').NextConfig} */ const nextConfig = { output: "export", // <=== enables static exports reactStrictMode: true, }; module.exports = nextConfig; Maintenant, après avoir exécuté , Next.js générera un dossier contenant des actifs statiques pour votre application. Dans les prochaines étapes, nous prendrons ce répertoire et le téléchargerons sur les pages GitHub. next build out Étape 3 – Corriger les images manquantes Les Pages sont publiées sous un sous-chemin d'un domaine et prennent le nom du projet comme sous-chemin. Déroutant? Jetons un coup d'œil à une URL de mon jeu 2048 à titre d'exemple : https://mateuszsokola.github.io/2048-in-react/ Github a créé un sous-domaine dédié pour mon utilisateur appelé . Mais le projet est publié sous le sous-chemin, qui dans mon cas est . Malheureusement, cela entraînera des problèmes d'images et de styles manquants. mateuszsokola (mon nom d'utilisateur) /2048-in-react Par défaut, Next.js mappe tous les actifs statiques du domaine. Cela signifie que le fichier sera résolu en au lieu de . favicon.ico mateuszsokola.github.io/favicon.ico mateuszsokola.github.io/2048-in-react/favicon.icon Pour résoudre ce problème, nous pouvons configurer un préfixe de chemin en ajoutant dans le fichier : basePath next.config.js /** @type {import('next').NextConfig} */ const nextConfig = { basePath: "/2048-in-react", // <=== here it is output: "export", reactStrictMode: true, }; module.exports = nextConfig; Dans mon cas, il s'agit puisque mon projet s'appelle . /2048-in-react 2048-in-react N'oubliez pas d'inclure le ( / ) au début du répertoire du projet. Étape 4 – Créer des actions Github Next.js produit des artefacts de déploiement qui peuvent être publiés sur les pages GitHub. Il est maintenant temps de configurer Github Actions pour les publier. J'ai décidé le déploiement en deux actions distinctes pour favoriser la réutilisabilité : L'action configurera Node.js et installera toutes les dépendances. Avoir une action autonome pour la configuration de Node.js me permettra de la réutiliser pour d'autres pipelines. Par exemple, j'ai des pipelines qui s'exécutent et . Vous souhaitez probablement également effectuer plusieurs actions. setup-node linter de code essais L'action créera des artefacts Next.js et les publiera sur les pages GitHub chaque fois que nous fusionnerons le code dans la branche . publish main Permettez-moi de commencer par expliquer l'action du . Voici le code : setup-node # File: .github/workflows/setup-node/action.yml name: setup-node description: "Setup Node.js ⚙️ - Cache dependencies ⚡ - Install dependencies 🔧" runs: using: "composite" steps: - name: Setup Node.js ⚙️ uses: actions/setup-node@v4 with: node-version: 20 - name: Cache dependencies ⚡ id: cache_dependencies uses: actions/cache@v3 with: path: node_modules key: node-modules-${{ hashFiles('package-lock.json') }} - name: Install dependencies 🔧 shell: bash if: steps.cache_dependencies.outputs.cache-hit != 'true' run: npm ci : Créez ce fichier dans le répertoire de votre projet. Assurez-vous de l'appeler . Important .github/workflows/setup-node action.yml À quoi sert cet extrait ? Cela crée une action . L'action vous permet de regrouper plusieurs étapes de flux de travail en une seule action. Si ce n'est pas clair, vous le comprendrez une fois que nous passerons à la deuxième action. composite composite Il crée un nouvel environnement de construction à l'aide de Node.js 20 et installe les dépendances du projet. Ce sont les parties les plus importantes de l’action du . Passons maintenant à l'action : setup-node publish # File: .github/workflows/publish.yml name: publish-to-github-pages on: push: branches: - main permissions: contents: read pages: write id-token: write concurrency: group: "pages" cancel-in-progress: false jobs: build: runs-on: ubuntu-latest steps: - name: Checkout 🛎️ uses: actions/checkout@v4 - name: Setup Node.js ⚙️ - Cache dependencies ⚡ - Install dependencies 🔧 uses: ./.github/workflows/setup-node - name: Setup Pages ⚙️ uses: actions/configure-pages@v4 with: static_site_generator: next - name: Build with Next.js 🏗️ run: npx next build - name: Upload artifact 📡 uses: actions/upload-pages-artifact@v3 with: path: ./out deploy: environment: name: github-pages url: ${{ steps.deployment.outputs.page_url }} runs-on: ubuntu-latest needs: build steps: - name: Publish to GitHub Pages 🚀 id: deployment uses: actions/deploy-pages@v4 Créez ce fichier dans le répertoire de votre projet. Vous pouvez nommer le fichier comme vous le souhaitez – j’ai appelé le mien . .github/workflows publish.yml Ce qu'il fait? Cette action est déclenchée à chaque fois que le nouveau code est poussé ou fusionné dans la branche . main Il utilise l'action pour configurer l'environnement. L'action que j'ai créée dans l'action précédente. Vous savez désormais comment inclure vos actions dans d'autres actions. setup-node composite composite L'action comporte deux étapes : dans la première étape, l'application Next.js est en cours de création. Dans la deuxième étape, les artefacts de la première étape sont téléchargés sur les pages GitHub. Ce sont les aspects les plus importants du pipeline de déploiement. J'ai ignoré les autorisations et la configuration de la concurrence car elles restent inchangées pour tous les déploiements de pages GitHub. Désormais, l’action est prête à être utilisée. S'engager et pousser Après avoir validé et poussé vos modifications vers la branche , GitHub lancera automatiquement le déploiement sur les pages GitHub. main Pour inspecter le processus, accédez à l'onglet (1 dans l'image ci-dessous) et sélectionnez l'action dans le menu de gauche (2) Vous verrez tous vos déploiements à l'écran (ils sont appelés ). Actions de publication sur les pages Github . workflows Sélectionnez maintenant le premier de ces flux de travail et vous verrez un déploiement en deux étapes. Lors de la phase , vous pouvez trouver un lien vers votre site Web sur les pages GitHub. de déploiement Conclusion Les pages Github ne suffisent pas pour héberger des sites Web avec des millions de vues. Mais c'est un choix parfait pour héberger votre portfolio ou un site Web pour votre projet open source. Il existe de nombreuses options gratuites pour héberger nos sites Web comme Vercel, mais je voulais vous montrer une alternative. GitHub Pages est conçu pour les développeurs et je pense que chaque développeur devrait le connaître. Si cet article vous a aidé, partagez-le sur vos réseaux sociaux. Et où déployez-vous votre application ? Est-ce toujours Vercel ? Apprenez React 18 et Next.js Vous ne vous sentez pas fort avec React ou Next.js ? Rejoignez mon cours en ligne sur Udemy ! Je vais vous aider à démarrer avec React en créant un jeu 2048 entièrement fonctionnel. Je pense que créer des jeux rend l'apprentissage plus amusant et que vous aurez quelque chose de sympa à montrer à vos amis. 👇👇👇👇 🧑🎓 Rejoignez Cours React 18 et Next.js sur Udemy – 80% de réduction seulement cette semaine.
