如何在同一域名部署Laravel REST API与Angular 5应用？

当然有靠谱的方案！这是前后端同域名部署的常见场景，我给你分享几个生产环境里常用的实现方式，都是经过验证的：

方案一：Nginx 反向代理（推荐） #

这是最常用的部署方式，通过Nginx的路由规则把请求分流到Angular和Laravel。

配置示例 #

编辑你的Nginx虚拟主机配置文件（比如/etc/nginx/sites-available/www.mydomain.com）：

server {
    listen 80;
    server_name www.mydomain.com;

    # 指向Angular生产构建后的dist目录
    root /var/www/angular-app/dist;
    index index.html;

    # 处理所有非/api开头的请求，交给Angular单页应用路由
    location / {
        try_files $uri $uri/ /index.html;
        # 解决Angular路由刷新404的问题
    }

    # 处理/api开头的请求，转发给Laravel后端
    location /api {
        # 指向Laravel的public目录
        root /var/www/laravel-app/public;
        try_files $uri $uri/ /index.php?$query_string;

        # 配置PHP-FPM（根据你的PHP版本和配置调整）
        fastcgi_pass unix:/run/php/php7.4-fpm.sock; # 或者 127.0.0.1:9000
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }
}

配置说明 #

• 所有访问www.mydomain.com/xxx的请求，优先查找Angular的静态文件；如果是路由路径（比如/dashboard），找不到对应文件时会返回index.html，由Angular的前端路由处理。
• 所有www.mydomain.com/api/xxx的请求，会被转发到Laravel的index.php，由Laravel的后端路由处理。

方案二：Apache 配置 #

如果你用Apache服务器，需要启用mod_rewrite模块，然后通过.htaccess或虚拟主机配置实现路由分流。

方式1：通过.htaccess配置 #

1. 在Angular的dist目录下创建.htaccess：

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    # 排除/api开头的请求，交给Angular处理
    RewriteCond %{REQUEST_URI} !^/api
    RewriteRule . /index.html [L]
</IfModule>

2. 在Laravel的public目录下的.htaccess中，确保路由前缀正确：

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /api/
    RewriteRule ^index\.php$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /api/index.php [L]
</IfModule>

方式2：虚拟主机配置 #

直接在Apache的虚拟主机文件中配置：

<VirtualHost *:80>
    ServerName www.mydomain.com
    DocumentRoot /var/www/angular-app/dist

    <Directory /var/www/angular-app/dist>
        AllowOverride All
        Require all granted
        RewriteEngine On
        RewriteBase /
        RewriteRule ^index\.html$ - [L]
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteCond %{REQUEST_URI} !^/api
        RewriteRule . /index.html [L]
    </Directory>

    # 把/api路径映射到Laravel的public目录
    Alias /api /var/www/laravel-app/public
    <Directory /var/www/laravel-app/public>
        AllowOverride All
        Require all granted
        RewriteEngine On
        RewriteBase /api/
        RewriteRule ^index\.php$ - [L]
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule . /api/index.php [L]
    </Directory>
</VirtualHost>

额外注意事项 #

1. Angular路由模式：确保Angular使用PathLocationStrategy（默认就是这个），避免Hash模式的#路径。在app-routing.module.ts中确认：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  // 你的路由配置
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: false })], // useHash设为false
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. Laravel路由前缀：Laravel默认会给routes/api.php里的路由自动加上/api前缀（查看RouteServiceProvider的配置），所以直接把所有后端路由写在这个文件里就好，不用手动加前缀，非常方便。

3. 移除CORS配置：之前跨域时可能在Laravel中配置了CORS中间件，现在同域名下不需要跨域了，可以移除相关配置，减少不必要的响应头。

4. Angular生产构建：部署前记得运行ng build --prod生成生产环境的dist文件夹，把dist里的内容放到Web服务器指定的目录中。

内容的提问来源于stack exchange，提问作者Mohamed Nagah