如何在PHP站点子目录部署Angular Universal应用？

Absolutely—you can deploy your Angular Universal app under the /universal path alongside your PHP main site. The key here is using reverse proxy with your web server (Apache or Nginx, standard for PHP sites) to route requests to your Node.js-based Universal app when they hit the /universal path. Here's a step-by-step breakdown for both common server setups:

Apache Setup #

1. Enable Required Modules
   First, make sure mod_proxy and mod_proxy_http are enabled on your Apache server:

   a2enmod proxy proxy_http
   systemctl restart apache2
   

2. Update VirtualHost Configuration
   Edit your site's VirtualHost config (usually in /etc/apache2/sites-available/example.com.conf) to add proxy rules for /universal, while keeping your PHP site as the default. Example:

   <VirtualHost *:80>
       ServerName example.com
   
       # PHP Main Site Configuration
       DocumentRoot /var/www/html/php-main-site
       <Directory /var/www/html/php-main-site>
           AllowOverride All
           Require all granted
       </Directory>
   
       # Proxy /universal Requests to Angular Universal Node Server
       ProxyPass /universal http://localhost:4000/universal
       ProxyPassReverse /universal http://localhost:4000/universal
   </VirtualHost>
   

3. Configure Angular Universal
   When building your Universal app, set the baseHref to match the path:

   ng build --prod --base-href /universal/
   ng run your-app-name:server:production
   

   Update your server.ts to handle the base path by adding the APP_BASE_HREF provider:

   import { APP_BASE_HREF } from '@angular/common';
   
   export function app(): express.Express {
     const server = express();
     const distFolder = join(process.cwd(), 'dist/your-app-name/browser');
     const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
   
     server.set('view engine', 'html');
     server.set('views', distFolder);
   
     // Serve static files from /universal
     server.get('*.*', express.static(distFolder, {
       maxAge: '1y',
       index: indexHtml,
       prefix: '/universal'
     }));
   
     // Handle all Angular routes
     server.get('*', (req, res) => {
       res.render(indexHtml, {
         req,
         providers: [
           { provide: APP_BASE_HREF, useValue: req.baseUrl }
         ]
       });
     });
   
     return server;
   }
   

Nginx Setup #

1. Update Site Configuration
   Edit your Nginx site config (usually in /etc/nginx/sites-available/example.com) to route /universal requests to your Node server, while handling PHP via PHP-FPM. Example:

   server {
       listen 80;
       server_name example.com;
   
       # Root for PHP Main Site
       root /var/www/html/php-main-site;
       index index.php index.html;
   
       # Handle PHP Requests
       location ~ \.php$ {
           fastcgi_pass unix:/run/php/php8.1-fpm.sock; # Adjust to your PHP-FPM socket
           fastcgi_index index.php;
           fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
           include fastcgi_params;
       }
   
       # Proxy /universal Requests to Angular Universal Node Server
       location /universal {
           proxy_pass http://localhost:4000;
           proxy_http_version 1.1;
           proxy_set_header Upgrade $http_upgrade;
           proxy_set_header Connection 'upgrade';
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           proxy_set_header X-Forwarded-Proto $scheme;
           proxy_cache_bypass $http_upgrade;
       }
   }
   

2. Restart Nginx
   Apply changes after validating the config:

   nginx -t # Test for config errors
   systemctl restart nginx
   

Critical Post-Deployment Steps #

• Keep Node Server Running: Use PM2 to ensure your Universal server stays up:

  pm2 start dist/your-app-name/server/main.js --name "angular-universal"
  pm2 startup # Set PM2 to run on server boot
  

• Test Route Refresh: Visit http://example.com/universal/some-route and refresh—this should work because the proxy forwards all /universal requests to the Node server for server-side rendering.
• Verify Static Resources: Check that CSS, JS, and assets load correctly (the base-href setting fixes most path issues here).

内容的提问来源于stack exchange，提问作者julian corredor