Skip to content
On this page

Déploiement d'un site statique

Les guides suivants sont basés sur des hypothèses communes :

  • Vous utilisez l'emplacement de sortie de la compilation par défaut (dist). Cet emplacement [peut être modifié en utilisant build.outDir] (/config/build-options.md#build-outdir), et vous pouvez extrapoler les instructions de ces guides dans ce cas.
  • Vous utilisez npm. Vous pouvez utiliser des commandes équivalentes pour exécuter les scripts si vous utilisez Yarn ou d'autres gestionnaires de paquets.
  • Vite est installé comme une dépendance locale de dev dans votre projet, et vous avez configuré les scripts npm suivants :
json
{
  "scripts" : {
    "build" : "vite build",
    "preview" : "vite preview"
  }
}

Il est important de noter que vite preview est destiné à la prévisualisation de la construction localement et non à un serveur de production.

TIP

Ces guides fournissent des instructions pour effectuer un déploiement statique de votre site Vite. Vite prend également en charge le Server Side Rendering. SSR fait référence aux cadres frontaux qui permettent d'exécuter la même application dans Node.js, de la pré-rendre en HTML et enfin de l'hydrater sur le client. Consultez le Guide SSR pour en savoir plus sur cette fonctionnalité. D'autre part, si vous recherchez une intégration avec des frameworks traditionnels côté serveur, consultez plutôt le Guide de l'intégration backend.

Construction de l'application

Vous pouvez exécuter la commande npm run build pour construire l'application.

bash
$ npm run build

Par défaut, la sortie de la compilation sera placée dans le dossier dist. Vous pouvez déployer ce dossier dist sur n'importe laquelle de vos plateformes préférées.

Tester l'application localement

Une fois que vous avez construit l'application, vous pouvez la tester localement en exécutant la commande npm run preview.

bash
$ npm run build
$ npm run preview

La commande vite preview va démarrer un serveur web statique local qui servira les fichiers de dist à http://localhost:4173. C'est un moyen facile de vérifier si le build de production semble correct dans votre environnement local.

Vous pouvez configurer le port du serveur en passant le drapeau --port comme argument.

json
{
  "scripts" : {
    "preview" : "vite preview --port 8080"
  }
}

Maintenant la commande preview lancera le serveur à http://localhost:8080.

Pages GitHub

  1. Définissez la bonne base dans vite.config.js.

    Si vous déployez sur https://<USERNAME>.github.io/, vous pouvez omettre base car il prend par défaut la valeur '/'.

    Si vous déployez vers https://<USERNAME>.github.io/<REPO>/, par exemple votre dépôt est à https://github.com/<USERNAME>/<REPO>, alors mettez base à '/<REPO>/'.

  2. A l'intérieur de votre projet, créez deploy.sh avec le contenu suivant (avec les lignes en surbrillance décommentées de manière appropriée), et exécutez-le pour le déploiement :

    bash
    #!/usr/bin/env sh
    
    # abandonner en cas d'erreur
    set -e
    
    # construire
    npm run build
    
    # Naviguez dans le répertoire de sortie de la compilation
    cd dist
    
    # Placez .nojekyll pour contourner le traitement Jekyll
    echo > .nojekyll
    
    # si vous déployez vers un domaine personnalisé
    # echo 'www.example.com' > CNAME
    
    git init
    git checkout -B main
    git add -A
    git commit -m 'deploy'
    
    # si vous déployez sur https://<USERNAME>.github.io
    # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git main
    
    # si vous déployez sur https://<USERNAME>.github.io/<REPO>
    # git push -f git@github.com:<USERNAME>/<REPO>.git main:gh-pages
    
    cd -
    

TIP

Vous pouvez également exécuter le script ci-dessus dans votre configuration CI pour activer le déploiement automatique à chaque poussée.

Pages GitLab et GitLab CI

  1. Définissez la bonne base dans vite.config.js.

    Si vous déployez vers https://<USERNAME or GROUP>.gitlab.io/, vous pouvez omettre base car il prend par défaut la valeur '/'.

    Si vous déployez vers https://<USERNAME ou GROUP>.gitlab.io/<REPO>/, par exemple votre dépôt est à https://gitlab.com/<USERNAME>/<REPO>, alors définissez base à '/<REPO>/'.

  2. Créez un fichier appelé .gitlab-ci.yml à la racine de votre projet avec le contenu ci-dessous. Cela permettra de construire et de déployer votre site chaque fois que vous apporterez des modifications à votre contenu :

    yaml
     image: node:16.5.0
     pages:
       stage: deploy
       cache:
         key:
           files:
             - package-lock.json
           prefix: npm
         paths:
           - node_modules/
       script:
         - npm install
         - npm run build
         - cp -a dist/. public/
       artifacts:
         paths:
           - public
       rules:
         - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH
    

Netlify

Netlify CLI

  1. Installez le [Netlify CLI] (https://cli.netlify.com/).
  2. Créez un nouveau site en utilisant ntl init.
  3. Déployez en utilisant ntl deploy.
bash
# Installer le CLI de Netlify
$ npm install -g netlify-cli

# Créer un nouveau site dans Netlify
$ ntl init

# Déployer vers une URL unique de prévisualisation
$ ntl deploy

Le CLI Netlify partagera avec vous une URL de prévisualisation à inspecter. Lorsque vous êtes prêt à passer en production, utilisez le drapeau prod :

bash
# Déployer le site en production
$ ntl deploy --prod

Netlify avec Git

  1. Poussez votre code vers un dépôt git (GitHub, GitLab, BitBucket, Azure DevOps).
  2. Importez le projet vers Netlify.
  3. Choisissez la branche, le répertoire de sortie et configurez les variables d'environnement le cas échéant.
  4. Cliquez sur Déployer.
  5. Votre application Vite est déployée !

Après l'importation et le déploiement de votre projet, toutes les poussées ultérieures vers des branches autres que la branche de production ainsi que les demandes de pull génèreront des [Déploiements de prévisualisation] (https://docs.netlify.com/site-deploys/deploy-previews/), et toutes les modifications apportées à la branche de production (communément appelée "principale") entraîneront un [Déploiement de production] (https://docs.netlify.com/site-deploys/overview/#definitions).

Vercel

CLI de Vercel

  1. Installez le [Vercel CLI] (https://vercel.com/cli) et exécutez vercel pour déployer.
  2. Vercel détectera que vous utilisez Vite et activera les paramètres corrects pour votre déploiement.
  3. Votre application est déployée ! (e.g. vite-vue-template.vercel.app)
bash
$ npm i -g vercel
$ vercel init vite
CLI de Vercel
> Success! Initialized "vite" example in ~/your-folder.
- To deploy, `cd vite` and run `vercel`.

Vercel pour Git

  1. Poussez votre code dans votre dépôt git (GitHub, GitLab, Bitbucket).
  2. [Importez votre projet Vite] (https://vercel.com/new) dans Vercel.
  3. Vercel détectera que vous utilisez Vite et activera les paramètres corrects pour votre déploiement.
  4. Votre application est déployée ! (e.g. vite-vue-template.vercel.app)

Après l'importation et le déploiement de votre projet, toutes les poussées ultérieures vers les branches généreront des [Déploiements de prévisualisation] (https://vercel.com/docs/concepts/deployments/environments#preview), et toutes les modifications apportées à la branche de production (communément appelée "main") entraîneront un [Déploiement de production] (https://vercel.com/docs/concepts/deployments/environments#production).

En savoir plus sur l'[Intégration Git] de Vercel (https://vercel.com/docs/concepts/git).

Pages Cloudflare

Pages Cloudflare via Wrangler

  1. Installez [Wrangler CLI] (https://developers.cloudflare.com/workers/wrangler/get-started/).
  2. Authentifiez Wrangler avec votre compte Cloudflare en utilisant wrangler login.
  3. Exécutez votre commande de construction.
  4. Déployez en utilisant npx wrangler pages publish dist.
bash
# Installer la CLI de Wrangler
$ npm install -g wrangler

# Se connecter au compte Cloudflare depuis l'interface CLI
$ wrangler login

# Exécutez votre commande de construction
$ npm run build

# Créer un nouveau déploiement
$ npx wrangler pages publish dist

Une fois vos ressources téléchargées, Wrangler vous donnera une URL de prévisualisation pour inspecter votre site. Lorsque vous vous connecterez au tableau de bord des pages Cloudflare, vous verrez votre nouveau projet.

Cloudflare Pages avec Git

  1. Poussez votre code vers votre dépôt git (GitHub, GitLab).
  2. Connectez-vous au tableau de bord Cloudflare et sélectionnez votre compte dans Account Home > Pages.
  3. Sélectionnez Créer un nouveau projet et l'option Connecter Git.
  4. Sélectionnez le projet git que vous souhaitez déployer et cliquez sur Débuter la configuration.
  5. Sélectionnez le préréglage du framework correspondant dans le paramètre de construction en fonction du framework Vite que vous avez sélectionné.
  6. Puis enregistrez et déployez !
  7. Votre application est déployée ! (par exemple https://<PROJECTNAME>.pages.dev/)

Après l'importation et le déploiement de votre projet, toutes les poussées ultérieures vers les branches généreront des [Déploiements de prévisualisation] (https://developers.cloudflare.com/pages/platform/preview-deployments/), sauf si cela est spécifié dans vos [contrôles de construction de branche] (https://developers.cloudflare.com/pages/platform/branch-build-controls/). Toutes les modifications apportées à la branche de production (communément appelée "main") donneront lieu à un déploiement de production.

Vous pouvez également ajouter des domaines personnalisés et gérer les paramètres de construction personnalisés sur les pages. En savoir plus sur [l'intégration Git de Cloudflare Pages] (https://developers.cloudflare.com/pages/get-started/#manage-your-site).

Google Firebase

  1. Assurez-vous d'avoir installé firebase-tools.

  2. Créez firebase.json et .firebaserc à la racine de votre projet avec le contenu suivant :

    firebase.json :

    json
    {
       "hosting": {
         "public": "dist",
         "ignore": [],
         "rewrites": [
           {
             "source": "**",
             "destination": "/index.html"
           }
         ]
       }
     }
    

    .firebaserc :

    js
    {
      "projets" : {
        "default" : "<VOTRE_FIREBASE_ID>"
      }
    }
    
  3. Après avoir exécuté npm run build, déployez en utilisant la commande firebase deploy.

Surge

  1. Installez d'abord surge, si vous ne l'avez pas déjà fait.

  2. Lancez npm run build.

  3. Déployez surge en tapant surge dist.

Vous pouvez également déployer vers un [custom domain] (http://surge.sh/help/adding-a-custom-domain) en ajoutant surge dist yourdomain.com.

Azure Static Web Apps

Vous pouvez déployer rapidement votre application Vite avec le service Microsoft Azure Static Web Apps. Vous avez besoin :

Installez l'extension dans VS Code et accédez à la racine de votre application. Ouvrez l'extension Static Web Apps, connectez-vous à Azure et cliquez sur le signe "+" pour créer une nouvelle Static Web App. Vous serez invité à désigner la clé d'abonnement à utiliser.

Suivez l'assistant lancé par l'extension pour donner un nom à votre application, choisir un cadre prédéfini et désigner la racine de l'application (généralement /) et l'emplacement du fichier construit /dist. L'assistant s'exécutera et créera une action GitHub dans votre repo dans un dossier .github.

L'action va déployer votre application (suivez sa progression dans l'onglet Actions de votre dépôt) et, une fois terminée, vous pourrez visualiser votre application à l'adresse fournie dans la fenêtre de progression de l'extension en cliquant sur le bouton "Browse Website" qui apparaît lorsque l'action GitHub a été exécutée.

Rendu

Vous pouvez déployer votre application Vite en tant que site statique sur [Render] (https://render.com/).

  1. Créez un [compte Render] (https://dashboard.render.com/register).

  2. Dans le [Tableau de bord] (https://dashboard.render.com/), cliquez sur le bouton Nouveau et sélectionnez Site statique.

  3. Connectez votre compte GitHub/GitLab ou utilisez un dépôt public.

  4. Spécifiez un nom de projet et une branche.

    • Commande Build : npm run build
    • Répertoire de publication** : dist
  5. Cliquez sur Créer un site statique.

    Votre application devrait être déployée à https://<PROJECTNAME>.onrender.com/.

Par défaut, tout nouveau commit poussé vers la branche spécifiée déclenchera automatiquement un nouveau déploiement. L'option [Auto-Deploy] (https://render.com/docs/deploys#toggling-auto-deploy-for-a-service) peut être configurée dans les paramètres du projet.

Vous pouvez également ajouter un [domaine personnalisé] (https://render.com/docs/custom-domains) à votre projet.

Documentation traduite. MIT License. (afc29b4d)