Bereitstellung Einer Statischen Site

Die folgenden Anleitungen basieren auf einigen gemeinsamen Annahmen:

Sie verwenden den Standard -Build -Ausgangsposition ( dist ). Dieser Ort kann mit build.outDir geändert werden und Sie können in diesem Fall Anweisungen aus diesen Leitfäden extrapolieren.
Sie verwenden NPM. Sie können äquivalente Befehle verwenden, um die Skripte auszuführen, wenn Sie Garn oder andere Paketmanager verwenden.
VITE ist als lokale Devisenabhängigkeit in Ihrem Projekt installiert, und Sie haben die folgenden NPM -Skripte eingerichtet:

package.json

json

{
  "scripts": {
    "build": "vite build",
    "preview": "vite preview"
  }
}

Es ist wichtig zu beachten, dass vite preview für die Vorschau des Builds lokal und nicht als Produktionsserver bestimmt ist.

NOTE

Diese Leitfäden geben Anweisungen zur Durchführung einer statischen Bereitstellung Ihrer vite Site. VITE unterstützt auch die Server -Side -Rendering. SSR bezieht sich auf Front-End-Frameworks, die unterstützen, die gleiche Anwendung in Node.js auszuführen, sie auf HTML vorzubereiten und schließlich auf dem Client zu feuchtigen. Schauen Sie sich den SSR -Leitfaden an, um mehr über diese Funktion zu erfahren. Wenn Sie dagegen nach Integration mit herkömmlichen serverseitigen Frameworks suchen, lesen Sie stattdessen den Backend Integration Guide .

Aufbau der App

Sie können npm run build Befehl ausführen, um die App zu erstellen.

bash

$ npm run build

Standardmäßig wird die Build -Ausgabe bei dist platziert. Sie können diesen dist -Ordner auf einer Ihrer bevorzugten Plattformen bereitstellen.

Testen Sie Die App Lokal

Sobald Sie die App erstellt haben, können Sie sie lokal testen, indem Sie npm run preview Befehl ausführen.

bash

$ npm run preview

Mit dem Befehl vite preview startet ein lokaler statischer Webserver, der die Dateien von dist unter http://localhost:4173 bedient. Es ist eine einfache Möglichkeit, zu überprüfen, ob die Produktionsbau in Ihrer lokalen Umgebung in Ordnung aussieht.

Sie können den Port des Servers konfigurieren, indem Sie das --port -Flag als Argument übergeben.

package.json

json

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

Jetzt startet der Befehl preview den Server bei http://localhost:8080 .

Github -Seiten

Stellen Sie die richtigen base in vite.config.js ein.
Wenn Sie über GitHub -Seiten (z. B. www.example.com ) für https://<USERNAME>.github.io/ oder eine benutzerdefinierte Domäne bereitgestellt werden, setzen Sie base bis '/' . Alternativ können Sie base aus der Konfiguration entfernen, da sie standardmäßig '/' ist.
Wenn Sie auf https://<USERNAME>.github.io/<REPO>/ bereitstellen (z. B. Ihr Repository bei https://github.com/<USERNAME>/<REPO> ), setzen Sie base auf '/<REPO>/' .

Gehen Sie auf der Seite "GitHub Pages" auf der Seite "Repository -Einstellungen" und wählen Sie die Bereitstellungsquelle als "Github -Aktionen". Dadurch wird ein Workflow erstellt, der Ihr Projekt erstellt und bereitstellt, ein Beispiel -Workflow, der Abhängigkeiten und Builds mithilfe von NPM installiert, wird angegeben:

yml

# Einfacher Workflow zum Bereitstellen statischer Inhalte für Github -Seiten
name: Deploy static content to Pages

on:
  # Läuft auf Pushs, die auf die Standardzweig abzielen
  push:
    branches: ['main']

  # Ermöglicht Ihnen, diesen Workflow manuell über die Registerkarte Aktionen auszuführen
  workflow_dispatch:

# Legt die GitHub_Token -Berechtigungen fest, damit die Bereitstellung auf Github -Seiten die Bereitstellung ermöglicht
permissions:
  contents: read
  pages: write
  id-token: write

# Ermöglichen Sie eine gleichzeitige Bereitstellung
concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  # Single -Bereitstellung Job, da wir gerade bereitstellen
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Set up Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
      - name: Install dependencies
        run: npm ci
      - name: Build
        run: npm run build
      - name: Setup Pages
        uses: actions/configure-pages@v4
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          # DIST -Ordner hochladen
          path: './dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

Gitlab -Seiten und Gitlab CI

Stellen Sie die richtigen base in vite.config.js ein.
Wenn Sie zu https://<USERNAME or GROUP>.gitlab.io/ bereitstellen, können Sie base weglassen, da es standardmäßig '/' ist.
Wenn Sie auf https://<USERNAME or GROUP>.gitlab.io/<REPO>/ bereitstellen, liegt Ihr Repository beispielsweise bei https://gitlab.com/<USERNAME>/<REPO> , dann setzen Sie base auf '/<REPO>/' .

Erstellen Sie eine Datei namens .gitlab-ci.yml im Root Ihres Projekts mit dem folgenden Inhalt. Dadurch wird Ihre Website erstellt und bereitgestellt, wenn Sie Änderungen an Ihren Inhalten vornehmen:

.gitlab-ci.yml

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

Installieren Sie die Netlify CLI .
Erstellen Sie eine neue Site mit ntl init .
Bereitstellung mit ntl deploy .

bash

# Installieren Sie die Netlify CLI
$ npm install -g netlify-cli

# Erstellen Sie eine neue Website in Netlify
$ ntl init

# Bereitstellung in einer eindeutigen Vorschau -URL
$ ntl deploy

Die Netlify CLI wird Ihnen eine Vorschau -URL zur Inspektion teilen. Wenn Sie bereit sind, in die Produktion zu gehen, verwenden Sie die prod Flagge:

bash

# Stellen Sie die Website in Produktion ein
$ ntl deploy --prod

Netlify mit Git

Drücken Sie Ihren Code in ein Git -Repository (Github, Gitlab, Bitbucket, Azure DevOps).
Importieren Sie das Projekt in Netlify.
Wählen Sie das Zweigverzeichnis, das Ausgangsverzeichnis und richten Sie gegebenenfalls Umgebungsvariablen ein.
Klicken Sie auf Bereitstellung .
Ihre vite App wird bereitgestellt!

Nachdem Ihr Projekt importiert und bereitgestellt wurde, werden alle nachfolgenden Drücken zu anderen Zweigen als der Produktionszweig sowie Pull -Anfragen Vorschau -Bereitstellungen generiert, und alle Änderungen an der Produktionszweig (üblicherweise „Haupt“) führen zu einer Produktionsbereitstellung .

Vercel

Vercel Cli

Installieren Sie die Vercel CLI und führen Sie vercel aus, um bereitzustellen.
Vercel erkennt, dass Sie VITE verwenden und die richtigen Einstellungen für Ihre Bereitstellung aktivieren.
Ihre Anwendung wird bereitgestellt! (zB vite-vue-template.vercel.app )

bash

$ npm i -g vercel
$ vercel init vite
Vercel CLI
> Success! Initialized "vite" example in ~/your-folder.
- To deploy, `cd vite` and run `vercel`.

Vercel für Git

Drücken Sie Ihren Code in Ihr Git -Repository (Github, Gitlab, Bitbucket).
Importieren Sie Ihr vite -Projekt in Vercel.
Vercel erkennt, dass Sie VITE verwenden und die richtigen Einstellungen für Ihre Bereitstellung aktivieren.
Ihre Anwendung wird bereitgestellt! (zB vite-vue-template.vercel.app )

Nachdem Ihr Projekt importiert und bereitgestellt wurde, generieren alle nachfolgenden Vorschriften für Zweige Vorschau -Bereitstellungen , und alle Änderungen an der Produktionszweig (üblicherweise „Haupt“) führen zu einer Produktionsbereitstellung .

Erfahren Sie mehr über Vercels Git -Integration .

Cloudflare -Seiten

Wolkenseiten Über Wrangler

Installieren Sie Wrangler CLI .
Authentifizieren Wrangler mit Ihrem CloudFlare -Konto mit wrangler login .
Führen Sie Ihren Build -Befehl aus.
Bereitstellung mit npx wrangler pages deploy dist .

bash

# Installieren Sie Wrangler CLI
$ npm install -g wrangler

# Melden Sie sich als Cloudflare -Konto von CLI an
$ wrangler login

# Führen Sie Ihren Build -Befehl aus
$ npm run build

# Erstellen Sie eine neue Bereitstellung
$ npx wrangler pages deploy dist

Nachdem Ihr Vermögen hochgeladen wurde, gibt Ihnen Wrangler eine Vorschau -URL, um Ihre Website zu inspizieren. Wenn Sie sich in das Dashboard von CloudFlare Pages anmelden, werden Sie Ihr neues Projekt sehen.

Wolkenseiten Mit Git

Drücken Sie Ihren Code in Ihr Git -Repository (Github, GitLab).
Melden Sie sich beim CloudFlare -Dashboard an und wählen Sie Ihr Konto auf dem Konto Home > Seiten aus.
Wählen Sie ein neues Projekt und die Option "Connect Git" erstellen.
Wählen Sie das GIT -Projekt aus, das Sie bereitstellen möchten, und klicken Sie auf Start -Setup klicken
Wählen Sie das entsprechende Framework -Voreinstellung in der Build -Einstellung je nach ausgewählten vite -Framework aus.
Dann speichern und bereitstellen!
Ihre Anwendung wird bereitgestellt! (zB https://<PROJECTNAME>.pages.dev/ )

Nachdem Ihr Projekt importiert und bereitgestellt wurde, generieren alle nachfolgenden Vorschriften an Zweige Vorschau -Bereitstellungen, sofern nicht in Ihren Zweig -Build -Steuerelementen angegeben sind. Alle Änderungen an der Produktionszweig (üblicherweise „Haupt“) führen zu einem Produktionseinsatz.

Sie können auch benutzerdefinierte Domänen hinzufügen und benutzerdefinierte Build -Einstellungen auf Seiten verarbeiten. Erfahren Sie mehr über Cloudflare -Seiten Git -Integration .

Google Firebase

Stellen Sie sicher, dass Sie Firebase-Tools installiert haben.

Erstellen Sie mit dem folgenden Inhalt firebase.json und .firebaserc an der Stammin Ihres Projekts:

firebase.json

json

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

.firebaserc

{
  "projects": {
    "default": "<YOUR_FIREBASE_ID>"
  }
}

Nach dem Ausführen npm run build verwenden Sie den Befehl firebase deploy .

Anstieg

Installieren Sie zuerst Surge , wenn Sie es noch nicht getan haben.
Lauf npm run build .
Bereitstellen zum Schreiben durch Eingabe surge dist .

Sie können auch in einer benutzerdefinierten Domain bereitstellen, indem Sie surge dist yourdomain.com hinzufügen.

Azure Statische Web -Apps

Sie können Ihre Vite -App schnell mit dem Microsoft Azure Static Web Apps -Dienst bereitstellen. Sie brauchen:

Ein Azure -Konto und ein Abonnementschlüssel. Sie können hier ein kostenloses Azure -Konto erstellen.
Ihr App -Code wurde nach GitHub gedrückt.
Die SWA -Erweiterung im Visual Studio -Code .

Installieren Sie die Erweiterung in VS -Code und navigieren Sie zu Ihrem App -Stamm. Öffnen Sie die Erweiterung der statischen Web -Apps, melden Sie sich bei Azure an und klicken Sie auf das Zeichen "+", um eine neue statische Web -App zu erstellen. Sie werden aufgefordert, zu bestimmen, welcher Abonnementschlüssel verwendet werden soll.

Folgen Sie dem von der Erweiterung gestarteten Assistenten, um Ihrer App einen Namen zu geben, wählen Sie ein Framework -Voreinstellung und bezeichnen Sie das App -Root (normalerweise / ) und erstellte Dateisposition /dist . Der Assistent wird ausgeführt und erstellt eine Github -Aktion in Ihrem Repo in einem .github -Ordner.

In der Aktion werden Ihre App bereitgestellt (sehen Sie sich die Fortschritte in der Registerkarte "Aktionen Ihres Repos an). Wenn Sie erfolgreich abgeschlossen sind, können Sie Ihre App in der Adresse des Fortschrittsfensters der Erweiterung angezeigt, indem Sie auf die Schaltfläche„ Durchsuchen Sie die Website durchsuchen “, die angezeigt wird, wenn die Github -Aktion ausgeführt wurde.

Machen

Sie können Ihre Vite -App als statische Site auf Render bereitstellen.

Erstellen Sie ein Render -Konto .
Klicken Sie im Dashboard auf die neue Schaltfläche und wählen Sie statische Site .
Schließen Sie Ihr Github/GitLab -Konto an oder verwenden Sie ein öffentliches Repository.
Geben Sie einen Projektnamen und einen Zweig an.
- Befehl erstellen : npm install && npm run build
- Veröffentlichung veröffentlichen : dist
Klicken Sie Auf Statische Site Erstellen .
Ihre App sollte bei https://<PROJECTNAME>.onrender.com/ bereitgestellt werden.

Standardmäßig wird ein neues Komitee, das an die angegebene Filiale übertragen wird, automatisch eine neue Bereitstellung ausgelöst. Auto-Deploy kann in den Projekteinstellungen konfiguriert werden.

Sie können Ihrem Projekt auch eine benutzerdefinierte Domain hinzufügen.

FlightControl

Stellen Sie Ihre statische Website mit FlightControl ein, indem Sie diese Anweisungen befolgen.

Hosting Der Statischen Kinsta -Site

Stellen Sie Ihre statische Site mit Kinsta ein, indem Sie diese Anweisungen befolgen.

Xmit Statische Site -Hosting

Stellen Sie Ihre statische Site mithilfe von XMIT an, indem Sie diesem Handbuch folgen.

Bereitstellung Einer Statischen Site ​

Aufbau der App ​

Testen Sie Die App Lokal ​

Github -Seiten ​

Gitlab -Seiten und Gitlab CI ​

Netlify ​

Netlify CLI ​

Netlify mit Git ​

Vercel ​

Vercel Cli ​

Vercel für Git ​

Cloudflare -Seiten ​

Wolkenseiten Über Wrangler ​

Wolkenseiten Mit Git ​

Google Firebase ​

Anstieg ​

Azure Statische Web -Apps ​

Machen ​

FlightControl ​

Hosting Der Statischen Kinsta -Site ​

Xmit Statische Site -Hosting ​

Bereitstellung Einer Statischen Site

Aufbau der App

Testen Sie Die App Lokal

Github -Seiten

Gitlab -Seiten und Gitlab CI

Netlify

Netlify CLI

Netlify mit Git

Vercel

Vercel Cli

Vercel für Git

Cloudflare -Seiten

Wolkenseiten Über Wrangler

Wolkenseiten Mit Git

Google Firebase

Anstieg

Azure Statische Web -Apps

Machen

FlightControl

Hosting Der Statischen Kinsta -Site

Xmit Statische Site -Hosting