Comment déployer une application Gatsby sur la plate-forme d'applications DigitalOcean

De Get Docs
Aller à :navigation, rechercher

L'auteur a sélectionné /dev/color pour recevoir un don dans le cadre du programme Write for DOnations.

Introduction

Dans ce tutoriel, vous allez déployer une application Gatsby sur la App Platform de DigitalOcean. App Platform est une Platform as a Service qui crée, déploie et gère automatiquement des applications. Combiné à la vitesse d'un générateur de site statique comme Gatsby, cela fournit une solution JAMStack évolutive qui ne nécessite pas de programmation côté serveur.

Dans ce didacticiel, vous allez créer un exemple d'application Gatsby sur votre ordinateur local, envoyer votre code à GitHub, puis le déployer sur App Platform.

Conditions préalables

Étape 1 - Création d'un projet Gatsby

Dans cette section, vous allez créer un exemple d'application Gatsby, que vous déploierez ultérieurement sur App Platform.

Tout d'abord, clonez le démarreur Gatsby par défaut à partir de GitHub. Vous pouvez le faire avec la commande suivante dans votre terminal :

git clone https://github.com/gatsbyjs/gatsby-starter-default

Le site de démarrage Gatsby vous fournit le code passe-partout dont vous avez besoin pour commencer à coder votre application. Pour plus d'informations sur la création d'une application Gatsby, consultez Comment configurer votre premier site Web Gatsby.

Lorsque vous avez terminé de cloner le référentiel, cd dans le répertoire gatsby-starter-default :

cd gatsby-starter-default

Installez ensuite les dépendances Node :

npm install

Après avoir téléchargé l'application et installé les dépendances, ouvrez le fichier suivant dans un éditeur de texte :

nano gatsby-config.js

Vous venez d'ouvrir le fichier de configuration de Gatsby. Ici, vous pouvez modifier les métadonnées de votre site.

Accédez à la touche title et remplacez Gatsby Default Starter par Save the Whales, comme indiqué dans la ligne en surbrillance suivante :

gatsby-starter-default/gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `Save the Whales`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

Fermez et enregistrez le fichier. Ouvrez maintenant le fichier d'index dans votre éditeur de texte préféré :

nano src/pages/index.js

Pour continuer avec le thème "Save the Whales", remplacez Hi people par Adopt a whale today, remplacez Welcome to your new Gatsby site. par Whales are our friends. et supprimez le dernier <p> ] étiqueter:

gatsby-starter-default/src/pages/index.js

import React from "react"
import { Link } from "gatsby"
import { StaticImage } from "gatsby-plugin-image"

import Layout from "../components/layout"
import SEO from "../components/seo"

const IndexPage = () => (
  <Layout>
    <SEO title="Home" />
    <h1>Adopt a whale today</h1>
    <p>Whales are our friends.</p>
    <StaticImage
      src="../images/gatsby-astronaut.png"
      width={300}
      quality={95}
      formats={["AUTO", "WEBP", "AVIF"]}
      alt="A Gatsby astronaut"
      style={{ marginBottom: `1.45rem` }}
    />
    <Link to="/page-2/">Go to page 2</Link> <br />
    <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
  </Layout>
)

export default IndexPage

Enregistrez et fermez le fichier. Vous allez échanger l'image de l'astronaute Gatsby avec un GIF d'une baleine. Avant d'ajouter le GIF, vous devez d'abord créer un répertoire GIF et le télécharger.

Allez dans le répertoire src et créez un fichier gifs :

cd src/
mkdir gifs

Naviguez maintenant dans votre dossier gifs nouvellement créé :

cd gifs

Téléchargez un GIF de baleines de Giphy  :

wget https://media.giphy.com/media/lqdJsUDvJnHBgM82HB/giphy.gif

Wget est un utilitaire qui vous permet de télécharger des fichiers depuis Internet. Giphy est un site Web qui héberge des GIF.

Ensuite, changez le nom de giphy.gif à whales.gif :

mv giphy.gif whales.gif

Après avoir changé le nom du GIF, revenez au dossier racine du projet et ouvrez à nouveau le fichier d'index :

cd ../..
nano src/pages/index.js

Vous allez maintenant ajouter le GIF à la page d'accueil de votre site. Supprimez l'importation et l'élément StaticImage, puis remplacez-les par les lignes en surbrillance suivantes :

gatsby-starter-default/src/pages/index.js

import React from "react"
import { Link } from "gatsby"

import whaleGIF from "../gifs/whales.gif"
import Layout from "../components/layout"
import SEO from "../components/seo"

const IndexPage = () => (
  <Layout>
    <SEO title="Home" />
    <h1>Adopt a whale today</h1>
    <p>Whales are our friends.</p>
    <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
        <img src={whaleGIF} alt="Picture of Whale from BBC America" />
    </div>
    <Link to="/page-2/">Go to page 2</Link> <br />
    <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
  </Layout>

Ici, vous avez importé le GIF des baleines et l'avez inclus dans une balise d'image entre l'élément <div>. La balise alt informe le lecteur de l'origine du GIF.

Fermez et enregistrez le fichier d'index.

Vous allez maintenant exécuter votre site localement pour vous assurer qu'il fonctionne. Depuis la racine de votre projet, lancez le serveur de développement :

gatsby develop

Une fois la construction de votre site terminée, saisissez localhost:8000 dans la barre de recherche de votre navigateur. Vous trouverez le rendu suivant dans votre navigateur :

Dans cette section, vous avez créé un exemple d'application Gatsby. Dans la section suivante, vous allez pousser votre code vers GitHub afin qu'il soit accessible à App Platform.

Étape 2 - Pousser votre code vers GitHub

Dans cette section du didacticiel, vous allez valider votre code sur git et le pousser jusqu'à GitHub. À partir de là, la plate-forme d'applications de DigitalOcean pourra accéder au code de votre site Web.

Allez à la racine de votre projet et créez un nouveau dépôt git :

git init

Ensuite, ajoutez tous les fichiers modifiés à git :

git add .

Enfin, validez toutes vos modifications dans git avec la commande suivante :

git commit -m "Initial Commit"

Cela validera cette version de votre application dans le contrôle de version git. Le -m prend un argument de chaîne et l'utilise comme un message sur le commit.

Remarque : Si vous n'avez pas encore configuré git sur cette machine, vous pouvez recevoir le résultat suivant :

*** Please tell me who you are.

Run

  git config --global user.email "[email protected]"
  git config --global user.name "Your Name"

to set your account's default identity.
Omit --global to set the identity only in this repository.

Exécutez les deux commandes git config pour fournir ces informations avant de continuer. Si vous souhaitez en savoir plus sur git, consultez notre tutoriel How To Contribute to Open Source: Getting Started with Git.


Vous recevrez une sortie comme celle-ci :

Output[master 1e3317b] Initial Commit
 3 files changed, 7 insertions(+), 13 deletions(-)
 create mode 100644 src/gifs/whales.gif

Une fois que vous avez commité le fichier, allez sur GitHub et connectez-vous. Après vous être connecté, créez un nouveau référentiel appelé gatsby-digital-ocean-app-platform. Vous pouvez rendre le référentiel privé ou public :

Après avoir créé un nouveau référentiel, revenez à la ligne de commande et ajoutez l'adresse du référentiel distant :

git remote set-url origin https://github.com/your_name/gatsby-digital-ocean-app-platform

Assurez-vous de remplacer your_name par votre nom d'utilisateur sur GitHub.

Ensuite, déclarez que vous voulez pousser vers la branche main avec ce qui suit :

git branch -M main

Enfin, poussez votre code vers votre référentiel nouvellement créé :

git push -u origin main

Une fois que vous avez entré vos informations d'identification, vous recevrez un résultat semblable à celui-ci :

OutputCounting objects: 3466, done.
Compressing objects: 100% (1501/1501), done.
Writing objects: 100% (3466/3466), 28.22 MiB | 32.25 MiB/s, done.
Total 3466 (delta 1939), reused 3445 (delta 1926)
remote: Resolving deltas: 100% (1939/1939), done.
To https://github.com/your_name/gatsby-digital-ocean-app-platform
 * [new branch]      main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.

Vous pourrez désormais accéder à votre code dans votre compte GitHub.

Dans cette section, vous avez poussé votre code vers un référentiel GitHub distant. Dans la section suivante, vous allez déployer votre application Gatsby de GitHub vers App Platform.

Étape 3 - Déploiement de votre application Gatsby sur la plate-forme d'applications DigitalOcean

Dans cette étape, vous allez déployer votre application sur DigitalOcean App Platform. Si vous ne l'avez pas déjà fait, créez un compte DigitalOcean.

Ouvrez votre panneau de configuration DigitalOcean, sélectionnez le bouton Créer en haut de l'écran, puis sélectionnez Applications dans le menu déroulant :

Après avoir sélectionné Apps, vous allez récupérer votre référentiel depuis GitHub. Cliquez sur l'icône GitHub et autorisez DigitalOcean à accéder à vos référentiels. Il est recommandé de sélectionner uniquement le référentiel que vous souhaitez déployer.

Vous serez redirigé vers DigitalOcean. Allez dans le champ Repository et sélectionnez le projet et la branche que vous souhaitez déployer, puis cliquez sur Next :

Remarque : Sous Branche, il y a une case pré-cochée indiquant Modifications du code de déploiement automatique. Cela signifie que si vous apportez des modifications à votre référentiel GitHub, DigitalOcean déploiera automatiquement ces modifications.


Sur la page suivante, il vous sera demandé de configurer votre application. Dans votre cas, tous les préréglages sont corrects, vous pouvez donc cliquer sur Suivant :

Lorsque vous avez terminé de configurer votre application, donnez-lui un nom comme save-the-whales :

Une fois que vous aurez sélectionné votre nom et cliqué sur Suivant, vous accéderez à la page du plan de paiement. Étant donné que votre application est un site statique, vous pouvez choisir le forfait Starter, qui est gratuit :

Cliquez maintenant sur le bouton Lancer l'application de démarrage . Après quelques minutes d'attente, votre application sera déployée.

Accédez à l'URL indiquée sous le titre de votre application. Vous trouverez votre application Gatsby déployée avec succès.

Conclusion

Dans ce didacticiel, vous avez créé un site Gatsby avec des GIF et déployé le site sur DigitalOcean App Platform. DigitalOcean App Platform est un moyen pratique de déployer et de partager vos projets Gatsby. Si vous souhaitez en savoir plus sur ce produit, consultez la documentation officielle pour App Platform.