build and create deploy production
This commit is contained in:
arifal
180
BUILD_GUIDE.md
Normal file
180
BUILD_GUIDE.md
Normal file
@@ -0,0 +1,180 @@
|
||||
# 🚀 Panduan Build untuk Production
|
||||
|
||||
## 📋 Masalah yang Diselesaikan
|
||||
|
||||
Aplikasi ini memiliki **banyak file JS dan CSS** yang harus dibangun semuanya karena:
|
||||
- Setiap halaman memerlukan file JS/CSS yang spesifik
|
||||
- Jika ada file yang hilang, halaman akan error (404 Not Found)
|
||||
- Server dengan RAM terbatas sering mengalami "killed" saat build
|
||||
|
||||
## 🎯 Solusi yang Tersedia
|
||||
|
||||
### 1. **Build di Local (RECOMMENDED) 🏆**
|
||||
```bash
|
||||
# Build di local computer Anda
|
||||
npm run build:local
|
||||
|
||||
# Upload ke server
|
||||
./deploy.sh username server.com /path/to/project
|
||||
```
|
||||
|
||||
**Kelebihan:**
|
||||
- ✅ Tidak ada batasan memory
|
||||
- ✅ Build lebih cepat
|
||||
- ✅ Semua file terjamin ter-build
|
||||
|
||||
### 2. **Build di Server dengan Optimasi**
|
||||
```bash
|
||||
# Option A: Build dengan memory optimization
|
||||
npm run build:prod
|
||||
|
||||
# Option B: Build dengan retry mechanism
|
||||
npm run build:chunked
|
||||
|
||||
# Option C: Build manual dengan script
|
||||
./build-production.sh
|
||||
```
|
||||
|
||||
### 3. **Setup Server untuk Build**
|
||||
```bash
|
||||
# Setup swap memory dan optimasi (run dengan sudo)
|
||||
sudo ./server-setup.sh
|
||||
|
||||
# Kemudian build
|
||||
npm run build:prod
|
||||
```
|
||||
|
||||
## 📁 File yang Akan Dibangun
|
||||
|
||||
Semua file ini **WAJIB** ada karena dibutuhkan oleh halaman-halaman aplikasi:
|
||||
|
||||
### CSS Files:
|
||||
- `resources/scss/style.scss` - Main stylesheet
|
||||
- `resources/scss/icons.scss` - Icons
|
||||
- `resources/scss/components/_*.scss` - Components
|
||||
- `resources/scss/dashboards/_*.scss` - Dashboard styles
|
||||
- `resources/scss/pages/quick-search/*.scss` - Quick search pages
|
||||
- Third-party CSS (Quill, Flatpickr, GridJS, dll)
|
||||
|
||||
### JS Files:
|
||||
- **Core:** `app.js`, `config.js`, `dashboard.js`
|
||||
- **Pages:** `chart.js`, `form-*.js`, `table-*.js`, `maps-*.js`
|
||||
- **Data:** `data-advertisements.js`, `data-umkm.js`, `data-tourisms.js`
|
||||
- **Settings:** `syncronize.js`, `general-settings.js`
|
||||
- **Dashboards:** `bigdata.js`, `pbg.js`, `potentials/*.js`
|
||||
- **Users & Roles:** `users/*.js`, `roles/*.js`, `menus/*.js`
|
||||
- **Reports:** `growth-report.js`, `tourisms/index.js`
|
||||
- **Dan semua file lainnya sesuai kebutuhan halaman**
|
||||
|
||||
## ⚙️ Konfigurasi Build
|
||||
|
||||
### Memory Optimization
|
||||
```javascript
|
||||
// vite.config.production.js
|
||||
export default defineConfig({
|
||||
build: {
|
||||
rollupOptions: {
|
||||
output: {
|
||||
manualChunks: {
|
||||
vendor: ['bootstrap', 'moment', 'axios'],
|
||||
charts: ['apexcharts'],
|
||||
maps: ['leaflet', 'jsvectormap', 'gmaps'],
|
||||
ui: ['sweetalert2', 'flatpickr', 'quill']
|
||||
}
|
||||
},
|
||||
maxParallelFileOps: 1 // Untuk server dengan RAM terbatas
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### Memory Limits
|
||||
```bash
|
||||
# Untuk server dengan RAM 2GB+
|
||||
NODE_OPTIONS="--max-old-space-size=2048"
|
||||
|
||||
# Untuk server dengan RAM 1GB
|
||||
NODE_OPTIONS="--max-old-space-size=1024"
|
||||
```
|
||||
|
||||
## 🔧 Troubleshooting
|
||||
|
||||
### Build Terkill (Killed)
|
||||
```bash
|
||||
# Solusi 1: Build di local
|
||||
npm run build:local
|
||||
./deploy.sh
|
||||
|
||||
# Solusi 2: Tambah swap memory
|
||||
sudo ./server-setup.sh
|
||||
|
||||
# Solusi 3: Gunakan build chunked
|
||||
npm run build:chunked
|
||||
```
|
||||
|
||||
### File JS/CSS Tidak Ditemukan
|
||||
```bash
|
||||
# Pastikan semua file ada di vite.config.production.js
|
||||
# Jangan hapus file apapun dari daftar input!
|
||||
|
||||
# Verifikasi build
|
||||
find public/build -name "*.js" | wc -l
|
||||
find public/build -name "*.css" | wc -l
|
||||
```
|
||||
|
||||
### Server Kehabisan Memory
|
||||
```bash
|
||||
# Check memory usage
|
||||
free -h
|
||||
|
||||
# Add swap file
|
||||
sudo fallocate -l 2G /swapfile
|
||||
sudo chmod 600 /swapfile
|
||||
sudo mkswap /swapfile
|
||||
sudo swapon /swapfile
|
||||
```
|
||||
|
||||
## 📦 Deployment Flow
|
||||
|
||||
### Local Build → Server Deploy
|
||||
```bash
|
||||
# 1. Di local
|
||||
npm ci
|
||||
npm run build:local
|
||||
|
||||
# 2. Edit deploy.sh dengan info server
|
||||
# 3. Deploy
|
||||
./deploy.sh username server.com /path/to/project
|
||||
```
|
||||
|
||||
### Server Build
|
||||
```bash
|
||||
# 1. Setup server
|
||||
sudo ./server-setup.sh
|
||||
|
||||
# 2. Install dependencies
|
||||
npm ci --production=false
|
||||
|
||||
# 3. Build
|
||||
npm run build:chunked
|
||||
|
||||
# 4. Optimize Laravel
|
||||
php artisan config:cache
|
||||
php artisan route:cache
|
||||
php artisan view:cache
|
||||
```
|
||||
|
||||
## ⚠️ Catatan Penting
|
||||
|
||||
1. **JANGAN HAPUS FILE APAPUN** dari `vite.config.production.js`
|
||||
2. **SEMUA FILE WAJIB ADA** karena dibutuhkan oleh halaman-halaman aplikasi
|
||||
3. **BUILD DI LOCAL** adalah solusi terbaik untuk server dengan RAM terbatas
|
||||
4. **BACKUP** selalu sebelum deploy ke production
|
||||
|
||||
## 🎉 Success Indicators
|
||||
|
||||
Build berhasil jika:
|
||||
- ✅ File `public/build/manifest.json` ada
|
||||
- ✅ Folder `public/build/assets/` berisi banyak file JS/CSS
|
||||
- ✅ Tidak ada error 404 saat mengakses halaman
|
||||
- ✅ Semua halaman dapat memuat JS/CSS yang dibutuhkan
|
||||
Reference in New Issue
Block a user