Laravel+Vue SPA双服务器使用原因及单远程服务器部署咨询

Hey there! Let's tackle your two questions about Vue.js SPA + Laravel setups—they’re super common for modern web dev, so great to dig into the "why" and "how" here.

First off, you’re right—you can serve a Vue SPA directly from Laravel’s public directory with a single server, especially for smaller projects. But two servers (and Passport) become valuable as your project scales or your team/requirements grow. Let’s break down the reasons:

Separation of Concerns & Team Workflow #

• Frontend/Backend Independence: Splitting into two servers lets frontend teams focus on UI/UX, routing, and client-side logic, while backend teams handle business rules, database operations, and API security. They can deploy updates independently—no need to redeploy the entire stack just to fix a button or tweak an API endpoint.
• Specialized Optimization: Frontend servers can leverage CDNs, caching strategies, and static asset compression (like gzip) to speed up page loads. Backend servers can be optimized for API throughput, database connections, and server-side processing without worrying about serving static files.

Scalability #

If your app grows, you can scale the frontend layer (add more servers, use a CDN) independently of the backend. For example, if you get a traffic spike on your landing page, you don’t need to scale your API servers—just the frontend ones. Similarly, if your API needs more power, you can scale those without touching the frontend.

Laravel Passport: Why It’s Needed #

SPAs are stateless—unlike traditional Laravel apps that use session-based auth, SPAs can’t rely on server-side sessions because the frontend runs entirely in the browser. Passport solves this by providing robust token-based authentication (like OAuth2 or JWT) out of the box:

• It handles secure user login, token issuance, and token validation for your API.
• You can easily implement features like password reset, token revocation, and scoped permissions (e.g., let a user only access their own data).
• Building this authentication logic from scratch is error-prone and time-consuming—Passport gives you battle-tested tools to secure your API without reinventing the wheel.

Running both Vue and Laravel on one server is totally doable—you just need to set up your web server (we’ll use Nginx here, since it’s common and efficient) to route requests to the right service. Here’s a step-by-step guide:

Prerequisites #

First, make sure your server has these installed:

• Nginx (or Apache)
• PHP 8.0+ (with required extensions for Laravel)
• MySQL/MariaDB
• Node.js + npm (if you want to build the Vue app on the server)

Step 1: Deploy the Laravel Backend #

1. Upload Your Laravel Code:
   • Use Git: Clone your repo to a directory like /var/www/laravel-api (run git clone your-repo-url /var/www/laravel-api).
   • Or SFTP: Use tools like FileZilla to upload your Laravel project files to that directory.
2. Configure Environment:
   • Copy .env.example to .env (cp .env.example .env) and update values like APP_URL (e.g., http://your-domain.com/api), database credentials, and Passport settings.
3. Set Up Dependencies:
   • Run composer install to install PHP dependencies.
   • Generate your app key: php artisan key:generate.
   • Run database migrations: php artisan migrate.
   • Install Passport: php artisan passport:install (this creates the necessary tokens for auth).
4. Fix File Permissions:
   • Make sure the storage and bootstrap/cache directories are writable: chmod -R 775 storage bootstrap/cache and chown -R www-data:www-data /var/www/laravel-api.

Step 2: Deploy the Vue SPA #

1. Upload Your Vue Code:
   • Git: Clone your repo to /var/www/vue-spa.
   • SFTP: Upload your Vue project files, or just the pre-built dist directory (if you built it locally).
2. Build the App (If Needed):
   • If you didn’t build locally, run npm install then npm run build—this creates a dist folder with optimized static files.
3. Configure Nginx to Route Requests
   Now you need to tell Nginx to send frontend requests to Vue’s dist folder, and API requests to Laravel’s public folder. Here’s a sample Nginx config (create it at /etc/nginx/sites-available/your-domain):

   server {
       listen 80;
       server_name your-domain.com www.your-domain.com;
   
       # Frontend Vue SPA
       location / {
           root /var/www/vue-spa/dist;
           try_files $uri $uri/ /index.html; # Supports Vue's history mode
       }
   
       # Backend Laravel API
       location /api {
           root /var/www/laravel-api/public;
           try_files $uri $uri/ /index.php?$query_string;
           fastcgi_pass unix:/run/php/php8.2-fpm.sock; # Adjust PHP version as needed
           fastcgi_index index.php;
           fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
           include fastcgi_params;
       }
   }
   

   • Enable the config: ln -s /etc/nginx/sites-available/your-domain /etc/nginx/sites-enabled/.
   • Test the config: nginx -t—if no errors, restart Nginx: systemctl restart nginx.

Step 3: Update Vue’s API Base URL #

Make sure your Vue app points to the correct API endpoint. In your Vue project, set the base URL to /api (since we’re using the same domain) or http://your-domain.com/api if you prefer absolute paths. For example, in Axios:

axios.defaults.baseURL = '/api';

File Upload Tips #

• Git: This is the most maintainable method—push updates to your repo, then run git pull on the server to get the latest code. For Laravel, don’t forget to run composer install --no-dev and php artisan migrate after pulling. For Vue, run npm run build and restart Nginx if needed.
• SFTP: Good for quick updates or small changes—just upload the modified files to the correct directory. For Vue, if you change code, you’ll need to rebuild the dist folder and upload those files.
• Automated Deployment: For larger projects, use tools like GitHub Actions or GitLab CI to automatically build and deploy your code when you push to the main branch. This reduces manual errors and speeds up deployments.

内容的提问来源于stack exchange，提问作者QaMar ALi