Bereitstellen Ihrer ersten Full-Stack-Anwendung mit Vercel und Heroku

Die Bereitstellung einer Full-Stack-Anwendung kann sich überwältigend anfühlen, insbesondere wenn Sie mit dem Prozess noch nicht vertraut sind. Plattformen wie Vercel und Heroku machen es jedoch einfach, Ihr Frontend und Backend unabhängig voneinander bereitzustellen und zu verwalten. Dieser Leitfaden führt Sie durch die Bereitstellung einer einfachen Full-Stack-Anwendung, wobei das Frontend auf Vercel und das Backend auf Heroku gehostet wird.

Warum Vercel und Heroku verwenden?

Vercel:

• Optimiert für Frontend-Frameworks wie Next.js, React und Angular.
• Bietet nahtlose kontinuierliche Bereitstellung mit Git-Integrationen.
• Bietet globales Edge-Caching für schnellere Leistung.

Heroku:

• Eine vielseitige Plattform für die Bereitstellung von Backend-Diensten und APIs.
• Einfache Einrichtung mit Umgebungsvariablen und Datenbankintegrationen.
• Lasst sich gut mit kostenlosen Optionen für Anfänger skalieren.

Voraussetzungen
Bevor Sie beginnen, stellen Sie sicher, dass Sie Folgendes haben:

1. Git installiert und ein grundlegendes Verständnis der Versionskontrolle.
2. Ein Frontend-Projekt (React, Next.js usw.) und ein Backend-Projekt (Node.js, Express usw.).
3. Konten über Vercel und Heroku.
4. Node.js und npm auf Ihrem lokalen Computer installiert.

Schritt 1: Bereiten Sie Ihren Frontend-Code vor

1.1 Initialisieren Sie das Frontend-Repository
Wenn Sie dies noch nicht getan haben, übertragen Sie Ihr Frontend-Projekt in ein Git-Repository (GitHub, GitLab usw.):

git init  
git add .  
git commit -m "Initial commit"  
git remote add origin <your-repo-url>  
git push -u origin main  

1.2 Optimieren Sie das Frontend für die Bereitstellung
Stellen Sie sicher, dass Ihr Frontend-Projekt produktionsbereit ist:

• Führen Sie npm run build für Frameworks wie Next.js oder React aus, um einen optimierten Produktions-Build zu erstellen.
• Stellen Sie sicher, dass Umgebungsvariablen (z. B. API-URLs) in .env.local oder direkt im Vercel-Dashboard festgelegt sind.

Schritt 2: Stellen Sie Ihr Frontend in Vercel bereit

2.1 Mit Vercel verbinden

• Melden Sie sich bei Vercel an.
• Klicken Sie auf „Neues Projekt“ und importieren Sie Ihr Git-Repository.

2.2 Bereitstellungseinstellungen konfigurieren

• Wählen Sie die richtige Framework-Voreinstellung aus (z. B. Next.js, React).
• Fügen Sie alle erforderlichen Umgebungsvariablen hinzu (z. B. REACT_APP_API_URL).

2.3 Bereitstellen des Frontends
Klicken Sie auf „Bereitstellen“ und Vercel kümmert sich um den Rest!

• Nach der Bereitstellung erhalten Sie eine Live-URL für Ihr Frontend.
• Beispiel: https://your-project.vercel.app.

Schritt 3: Bereiten Sie Ihren Backend-Code vor

3.1 Backend-Repository initialisieren
Schieben Sie Ihr Backend-Projekt in ein separates Git-Repository:

git init  
git add .  
git commit -m "Initial commit"  
git remote add origin <your-repo-url>  
git push -u origin main  

3.2 Profildatei hinzufügen
Heroku verwendet eine Procfile, um zu definieren, wie Ihre Anwendung ausgeführt wird. Erstellen Sie eine Profildatei im Stammverzeichnis Ihres Projekts:

git init  
git add .  
git commit -m "Initial commit"  
git remote add origin <your-repo-url>  
git push -u origin main  

Ersetzen Sie index.js durch Ihre Einstiegspunktdatei.

3.3 Umgebungsvariablen festlegen
Stellen Sie sicher, dass alle erforderlichen Umgebungsvariablen (z. B. Datenbank-URLs, API-Schlüssel) in .env gespeichert sind. Mit Heroku können Sie diese später im Dashboard konfigurieren.

Schritt 4: Stellen Sie Ihr Backend für Heroku bereit

4.1 Erstellen Sie eine Heroku-App

1. Melden Sie sich bei Heroku an.
2. Klicken Sie auf „Neu“ → „Neue App erstellen“.
3. Wählen Sie einen eindeutigen Namen und eine eindeutige Region für Ihre App.

4.2 Stellen Sie das Backend bereit

1. Navigieren Sie zur Registerkarte „Bereitstellen“.
2. Verbinden Sie Ihr GitHub-Repository.
3. Aktivieren Sie automatische Bereitstellungen oder stellen Sie manuell bereit, indem Sie auf Zweig bereitstellen klicken.

4.3 Umgebungsvariablen konfigurieren
Fügen Sie auf der Registerkarte „Einstellungen“ Ihre Umgebungsvariablen hinzu:

• Beispiel: DATABASE_URL, SECRET_KEY.

Schritt 5: Frontend mit Backend verbinden
Aktualisieren Sie Ihr Frontend-Projekt so, dass es auf das Heroku-Backend verweist:

• Legen Sie die Backend-URL als Umgebungsvariable fest:z

web: node index.js  

• Ersetzen Sie in Ihrem Frontend-Code hartcodierte API-URLs durch process.env.REACT_APP_API_URL:

REACT_APP_API_URL=https://your-backend-app.herokuapp.com  

Schritt 6: Testen und Debuggen

1. Besuchen Sie Ihre Frontend-URL von Vercel und stellen Sie sicher, dass alle Funktionen funktionieren, einschließlich API-Aufrufe.
2. Verwenden Sie die Protokolle von Heroku, um Backend-Probleme zu beheben:

const response = await fetch(`${process.env.REACT_APP_API_URL}/api/endpoint`); 

1. Überwachen Sie die Build-Protokolle von Vercel auf bereitstellungsbezogene Probleme.

Best Practices

1. Versionskontrolle: Verwenden Sie Git-Zweige für die Entwicklung und führen Sie Änderungen erst nach dem Testen zusammen.
2. Fehlerbehandlung: Implementieren Sie geeignete Fehlerreaktionen in Ihrem Backend, um das Debuggen zu erleichtern.
3. HTTPS: Stellen Sie sicher, dass sowohl Vercel- als auch Heroku-URLs HTTPS für eine sichere Kommunikation verwenden.
4. CORS: Konfigurieren Sie CORS-Richtlinien in Ihrem Backend, um Anfragen von Ihrer Frontend-URL zuzulassen.

Fazit
Die Bereitstellung einer Full-Stack-Anwendung mit Vercel und Heroku ist unkompliziert und einsteigerfreundlich. Da Vercel das Frontend übernimmt und Heroku das Backend betreibt, können Sie sich auf die Entwicklung von Funktionen konzentrieren, anstatt sich um die Infrastruktur zu kümmern.

Beginnen Sie noch heute mit der Bereitstellung und erwecken Sie Ihre Projekte zum Leben! ?

Das obige ist der detaillierte Inhalt vonBereitstellen Ihrer ersten Full-Stack-Anwendung mit Vercel und Heroku. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!