You're taking the right approach by deploying your frontend and backend on separate servers and using environment variables to manage the API URL. This separation provides better scalability and security. Let me guide you through the setup process.
Create a .env.local file for local development:
NEXT_PUBLIC_API_URL=http://localhost:3001/apiFor production, set the environment variable in your Vercel dashboard:
NEXT_PUBLIC_API_URL with the value of your production backend URL (e.g., https://your-backend-api.com/api)Using the environment variable in your code:
The lib/api.ts file is already set up to use this environment variable:
export const api = axios.create({
baseURL: process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001/api",
headers: {
"Content-Type": "application/json",
},
});Since your frontend and backend will be on different domains, you need to ensure CORS is properly configured on the backend.
Create a .env file for local development:
PORT=3001
JWT_SECRET=your-secret-key
ENCRYPTION_KEY=your-secret-key-for-aes-encryption
OPENAI_API_KEY=your-openai-api-key
FRONTEND_URL=http://localhost:3000For production, set these environment variables in your hosting platform:
PORT: The port your server will run on (often set automatically by the hosting provider)JWT_SECRET: Secret key for JWT token generationENCRYPTION_KEY: Secret key for AES encryptionOPENAI_API_KEY: Your OpenAI API keyFRONTEND_URL: Your frontend URL for CORS configurationUpdate your backend server to allow requests from your frontend domain:
import cors from 'cors';
// CORS configuration
const corsOptions = {
origin: process.env.FRONTEND_URL || 'http://localhost:3000',
methods: ['GET', 'POST', 'PUT', 'DELETE'],
allowedHeaders: ['Content-Type', 'Authorization'],
credentials: true
};
app.use(cors(corsOptions));NEXT_PUBLIC_API_URL environment variableAfter deployment, test the connection between your frontend and backend:
Since you're deploying on separate servers and using environment variables, consider these additional security measures:
To monitor API calls between your frontend and backend:
Implement logging middleware on your backend:
app.use((req, res, next) => {
console.log(`${req.method} ${req.path} - ${new Date().toISOString()}`);
next();
});This setup will ensure your frontend and backend can communicate securely while being deployed on separate servers, with all configuration managed through environment variables.
I'll modify the entire codebase to use MongoDB for storing all server details, user information, and database configurations. This will make the application more robust and production-ready.
First, let's design the MongoDB schemas we'll need:
schemas.js
Now, let's implement the complete solution with MongoDB integration.
Now, let's update the frontend to work with our MongoDB backend:
You'll need to set up the following environment variables for both your frontend and backend:
# Server Configuration
PORT=3001
FRONTEND_URL=https://your-frontend-url.com
# MongoDB Connection
MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/ai_db_query_tool
# Security
JWT_SECRET=your_jwt_secret_key_here
ENCRYPTION_KEY=your_encryption_key_here
# OpenAI API
OPENAI_API_KEY=your_openai_api_key_hereNEXT_PUBLIC_API_URL=https://your-backend-url.com/api
NEXT_PUBLIC_ENCRYPTION_KEY=your_encryption_key_hereai_db_query_toolCreate the following collections:
usersdatabasesqueryhistoriesNEXT_PUBLIC_API_URL to point to your deployed backendNEXT_PUBLIC_ENCRYPTION_KEY (must match the backend's ENCRYPTION_KEY)/api/health endpoint for monitoringThis implementation provides a robust foundation for your AI-powered database query tool with MongoDB for storing all server details, user information, and database configurations.
Please make sure to add the following environment variables to your project: