Overview
Luz de Arcanos is optimized for deployment on Vercel using Astro’s SSR (Server-Side Rendering) mode. This guide covers the complete deployment process from local development to production.Prerequisites
Node.js 18+ or Bun runtime
Free account at vercel.com
Obtain from Google AI Studio
GitHub, GitLab, or Bitbucket repository
Local Development Setup
1. Clone and Install
2. Configure Environment Variables
Create a.env file in the project root:
3. Run Development Server
http://localhost:4321.
See
package.json:5-9 for all available scripts.Vercel Deployment
Method 1: Vercel CLI (Recommended)
Install Vercel CLI
Deploy from Command Line
The first
vercel command creates a preview deployment. Use vercel --prod for production.Method 2: GitHub Integration (Automated)
1. Connect Repository to Vercel
- Go to vercel.com/new
- Click “Import Project”
- Select your Git provider (GitHub, GitLab, Bitbucket)
- Choose the repository
- Vercel will auto-detect Astro configuration
2. Configure Environment Variables
In the Vercel dashboard:- Go to Project Settings → Environment Variables
- Add variable:
- Key:
GEMINI_API_KEY - Value: Your Gemini API key
- Environments: Production, Preview (optional), Development (optional)
- Key:
- Click Save
3. Deploy
Click Deploy. Vercel will:- Install dependencies
- Run
bun build - Deploy serverless functions
- Assign a production URL
Every push to
main branch will trigger automatic production deployments. Pull requests create preview deployments.Build Configuration
Astro SSR Adapter
The project uses the Vercel adapter for SSR:server mode enables SSR. Every route is rendered on-demand.The Vercel adapter transforms Astro pages into Vercel serverless functions.
See
astro.config.mjs:1-9 for the complete configuration.Build Output
Runningbun build produces:
Vercel Function Configuration
Vercel automatically configures:- Runtime: Node.js 18.x (or Bun if detected)
- Memory: 1024 MB (default)
- Timeout: 10 seconds (Hobby), 60 seconds (Pro)
- Regions: Auto (deployed globally)
The 10-second timeout is sufficient for Gemini API calls (~1-3 seconds average).
Environment Variables
Required Variables
Google Gemini API key. Obtain from Google AI Studio.Format:
AIza... (39 characters)Optional Variables
Automatically set by Vercel. Use
development for local testing.Setting Variables Locally
Setting Variables on Vercel
Via CLI:- Project Settings → Environment Variables
- Add
GEMINI_API_KEY - Select environments (Production, Preview, Development)
- Save
Deployment Checklist
- Repository pushed to GitHub/GitLab/Bitbucket
-
.envfile created locally (not committed) - Gemini API key obtained from Google AI Studio
- Vercel account created
- Repository connected to Vercel
-
GEMINI_API_KEYenvironment variable set on Vercel - First deployment successful
- Production URL tested
- Custom domain configured (optional)
Custom Domain Setup
Add Domain to Vercel
- Go to Project Settings → Domains
- Enter your domain (e.g.,
luzdearcanos.com) - Follow DNS configuration instructions
- Wait for DNS propagation (5 minutes - 24 hours)
DNS Configuration
Add these records to your DNS provider:Vercel automatically provisions SSL certificates via Let’s Encrypt.
Monitoring & Logs
View Deployment Logs
Via CLI:- Go to Deployments
- Click on a deployment
- View Build Logs or Function Logs
Monitor Function Performance
Vercel Pro provides:- Function execution time
- Memory usage
- Error rates
- Geographic distribution
Hobby plan includes basic logs. Upgrade to Pro for advanced analytics.
Troubleshooting
Build Fails: “GEMINI_API_KEY not found”
Cause: Environment variable not set on Vercel. Solution:Runtime Error: “429 Rate Limit Exceeded”
Cause: Gemini API quota exceeded. Solution: The application automatically falls back to alternative models and then to template-based readings. No action needed.Build Warning: “trustedDependencies”
Cause:protobufjs requires post-install scripts.
Solution: Already handled in package.json:16-18:
SSR Not Working
Cause: Adapter not configured. Solution: Verifyastro.config.mjs:
Performance Optimization
Edge Functions (Advanced)
For ultra-low latency, upgrade to Vercel Edge Functions:Static Asset Optimization
- Images: Compress with tools like Squoosh
- Video: Optimize background video (720p is sufficient)
- Fonts: Preconnect to Google Fonts (already configured)
Caching Headers
Add caching for static assets:Rollback & Versioning
Rollback to Previous Deployment
Via Dashboard:- Go to Deployments
- Find previous successful deployment
- Click ⋮ → Promote to Production
Git-based Versioning
Vercel keeps deployment history for 30 days (Hobby) or unlimited (Pro).
Production Checklist
- Environment variables verified in production
- Test consultation flow end-to-end
- Check mobile responsiveness
- Verify SEO meta tags (Open Graph, Twitter Card)
- Test usage limit (5 consultations)
- Confirm fallback reading works (simulate API failure)
- Check video background loads on mobile
- Validate SSL certificate
- Set up monitoring alerts (Pro plan)
Next Steps
After successful deployment:- Monitor usage: Check Vercel analytics
- Set up alerts: Configure email notifications for errors
- Optimize costs: Review Gemini API usage
- Add analytics: Integrate Google Analytics or Plausible
- Custom domain: Configure your own domain name
Live demo: luzdearcanos.vercel.app