Menggunakan Aplikasi Timbunan Penuh Pertama Anda dengan Vercel dan Heroku

Mengagihkan aplikasi tindanan penuh boleh berasa amat menggembirakan, terutamanya jika anda baru dalam proses tersebut. Walau bagaimanapun, platform seperti Vercel dan Heroku menjadikannya mudah untuk menggunakan dan mengurus bahagian hadapan dan belakang anda secara bebas. Panduan ini akan memandu anda menggunakan aplikasi timbunan penuh asas, dengan bahagian hadapan dihoskan pada Vercel dan bahagian belakang pada Heroku.

Mengapa Gunakan Vercel dan Heroku?

Vercel:

• Dioptimumkan untuk rangka kerja bahagian hadapan seperti Next.js, React dan Angular.
• Menawarkan penggunaan berterusan yang lancar dengan penyepaduan Git.
• Menyediakan caching kelebihan global untuk prestasi yang lebih pantas.

Heroku:

• Platform serba boleh untuk menggunakan perkhidmatan hujung belakang dan API.
• Mudah disediakan dengan pembolehubah persekitaran dan penyepaduan pangkalan data.
• Skala dengan baik dengan pilihan peringkat percuma untuk pemula.

Prasyarat
Sebelum anda bermula, pastikan anda mempunyai:

1. Git dipasang dan pemahaman asas tentang kawalan versi.
2. Projek bahagian hadapan (React, Next.js, dll.) dan projek hujung belakang (Node.js, Express, dll.).
3. Akaun di Vercel dan Heroku.
4. Node.js dan npm dipasang pada mesin tempatan anda.

Langkah 1: Sediakan Kod Bahagian Hadapan Anda

1.1 Mulakan Repositori Frontend
Jika anda belum melakukannya, tolak projek bahagian hadapan anda ke repositori Git (GitHub, GitLab, dll.):

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

1.2 Optimumkan Bahagian Depan untuk Penggunaan
Pastikan projek bahagian hadapan anda sedia untuk pengeluaran:

• Jalankan npm run build untuk rangka kerja seperti Next.js atau React untuk mencipta binaan pengeluaran yang dioptimumkan.
• Pastikan pembolehubah persekitaran (cth., URL API) ditetapkan dalam .env.local atau terus dalam papan pemuka Vercel.

Langkah 2: Gunakan Bahagian Depan Anda ke Vercel

2.1 Sambung ke Vercel

• Log masuk ke Vercel.
• Klik "Projek Baharu" dan import repositori Git anda.

2.2 Konfigurasikan Tetapan Penerapan

• Pilih pratetap rangka kerja yang betul (cth., Next.js, React).
• Tambahkan sebarang pembolehubah persekitaran yang diperlukan (cth.,REACT_APP_API_URL).

2.3 Gunakan Bahagian Depan
Klik "Kerahkan", dan Vercel akan mengendalikan selebihnya!

• Selepas penggunaan, anda akan menerima URL langsung untuk bahagian hadapan anda.
• Contoh: https://your-project.vercel.app.

Langkah 3: Sediakan Kod Bahagian Belakang Anda

3.1 Mulakan Repositori Bahagian Belakang
Tolak projek bahagian belakang anda ke repositori Git yang berasingan:

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

3.2 Tambah Profil
Heroku menggunakan Procfile untuk menentukan cara untuk menjalankan aplikasi anda. Buat Profil dalam akar projek anda:

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

Ganti index.js dengan fail titik masuk anda.

3.3 Tetapkan Pembolehubah Persekitaran
Pastikan semua pembolehubah persekitaran yang diperlukan (cth., URL pangkalan data, kunci API) disimpan dalam .env. Heroku membenarkan anda mengkonfigurasi ini kemudian dalam papan pemuka.

Langkah 4: Gunakan Bahagian Belakang Anda ke Heroku

4.1 Cipta Apl Heroku

1. Log masuk ke Heroku.
2. Klik "Baharu" → "Buat Apl Baharu".
3. Pilih nama dan wilayah unik untuk apl anda.

4.2 Gunakan Bahagian Belakang

1. Navigasi ke tab Deploy.
2. Sambungkan repositori GitHub anda.
3. Dayakan Automatic Deploy atau gunakan secara manual dengan mengklik Deploy Branch.

4.3 Konfigurasi Pembolehubah Persekitaran
Dalam tab Tetapan, tambahkan pembolehubah persekitaran anda:

• Contoh: DATABASE_URL, SECRET_KEY.

Langkah 5: Sambungkan Frontend ke Backend
Kemas kini projek bahagian hadapan anda untuk menghala ke bahagian belakang Heroku:

• Tetapkan URL hujung belakang sebagai pembolehubah persekitaran:z

web: node index.js  

• Dalam kod bahagian hadapan anda, gantikan URL API berkod keras dengan process.env.REACT_APP_API_URL:

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

Langkah 6: Uji dan Nyahpepijat

1. Lawati URL bahagian hadapan anda daripada Vercel dan pastikan semua ciri berfungsi, termasuk panggilan API.
2. Gunakan log Heroku untuk menyahpepijat isu bahagian belakang:

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

1. Pantau log binaan Vercel untuk sebarang isu berkaitan penempatan.

Amalan Terbaik

1. Kawalan Versi: Gunakan cawangan Git untuk pembangunan dan gabungkan perubahan hanya selepas ujian.
2. Pengendalian Ralat: Laksanakan respons ralat yang betul di bahagian belakang anda untuk membantu menyahpepijat.
3. HTTPS: Pastikan URL Vercel dan Heroku menggunakan HTTPS untuk komunikasi selamat.
4. CORS: Konfigurasikan dasar CORS di bahagian belakang anda untuk membenarkan permintaan daripada URL bahagian hadapan anda.

Kesimpulan
Menggunakan aplikasi tindanan penuh dengan Vercel dan Heroku adalah mudah dan mesra pemula. Dengan Vercel mengendalikan bahagian hadapan dan Heroku menjana kuasa bahagian belakang, anda boleh menumpukan pada ciri membina dan bukannya bimbang tentang infrastruktur.

Mulakan penggunaan hari ini dan hidupkan projek anda! ?

Atas ialah kandungan terperinci Menggunakan Aplikasi Timbunan Penuh Pertama Anda dengan Vercel dan Heroku. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!