Appearance
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 utilisantbuild.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
Définissez la bonne
base
dansvite.config.js
.Si vous déployez sur
https://<USERNAME>.github.io/
, vous pouvez omettrebase
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 mettezbase
à'/<REPO>/'
.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
Définissez la bonne
base
dansvite.config.js
.Si vous déployez vers
https://<USERNAME or GROUP>.gitlab.io/
, vous pouvez omettrebase
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éfinissezbase
à'/<REPO>/'
.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 :yamlimage: 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
- Installez le [Netlify CLI] (https://cli.netlify.com/).
- Créez un nouveau site en utilisant
ntl init
. - 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
- Poussez votre code vers un dépôt git (GitHub, GitLab, BitBucket, Azure DevOps).
- Importez le projet vers Netlify.
- Choisissez la branche, le répertoire de sortie et configurez les variables d'environnement le cas échéant.
- Cliquez sur Déployer.
- 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
- Installez le [Vercel CLI] (https://vercel.com/cli) et exécutez
vercel
pour déployer. - Vercel détectera que vous utilisez Vite et activera les paramètres corrects pour votre déploiement.
- 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
- Poussez votre code dans votre dépôt git (GitHub, GitLab, Bitbucket).
- [Importez votre projet Vite] (https://vercel.com/new) dans Vercel.
- Vercel détectera que vous utilisez Vite et activera les paramètres corrects pour votre déploiement.
- 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
- Installez [Wrangler CLI] (https://developers.cloudflare.com/workers/wrangler/get-started/).
- Authentifiez Wrangler avec votre compte Cloudflare en utilisant
wrangler login
. - Exécutez votre commande de construction.
- 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
- Poussez votre code vers votre dépôt git (GitHub, GitLab).
- Connectez-vous au tableau de bord Cloudflare et sélectionnez votre compte dans Account Home > Pages.
- Sélectionnez Créer un nouveau projet et l'option Connecter Git.
- Sélectionnez le projet git que vous souhaitez déployer et cliquez sur Débuter la configuration.
- 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é.
- Puis enregistrez et déployez !
- 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
Assurez-vous d'avoir installé firebase-tools.
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>" } }
Après avoir exécuté
npm run build
, déployez en utilisant la commandefirebase deploy
.
Surge
Installez d'abord surge, si vous ne l'avez pas déjà fait.
Lancez
npm run build
.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 :
- Un compte Azure et une clé d'abonnement. Vous pouvez créer un [compte Azure gratuit ici] (https://azure.microsoft.com/free).
- Le code de votre application poussé sur GitHub.
- L'Extension SWA dans Visual Studio Code.
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/).
Créez un [compte Render] (https://dashboard.render.com/register).
Dans le [Tableau de bord] (https://dashboard.render.com/), cliquez sur le bouton Nouveau et sélectionnez Site statique.
Connectez votre compte GitHub/GitLab ou utilisez un dépôt public.
Spécifiez un nom de projet et une branche.
- Commande Build :
npm run build
- Répertoire de publication** :
dist
- Commande Build :
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.