如何在同一服务器上运行Angular2与Codeigniter？

我来给你分享几个实用的方案，都是在同一XAMPP Apache服务器上同时跑Angular 2（基于Webpack）和CodeIgniter的常用思路，你可以根据自己的项目需求选合适的：

方案1：前端静态文件集成到CodeIgniter项目（推荐生产环境用） #

这个方案把Angular构建后的静态文件放到CodeIgniter项目里，用Apache重写规则区分前端页面和API请求，实现同一域名下共存：

• 先构建你的Angular项目：如果用Angular CLI，执行ng build --prod生成dist文件夹；如果是自定义Webpack配置，运行对应的构建脚本得到静态产物。
• 在CodeIgniter项目的根目录（就是XAMPP的htdocs下的CI项目文件夹）新建一个frontend文件夹，把dist里的所有文件复制进去。
• 修改CodeIgniter根目录的.htaccess文件，添加重写规则，把API请求交给CI处理，其他请求指向Angular的入口：

RewriteEngine On

# 处理API请求，转发到CodeIgniter的index.php
RewriteRule ^api/(.*)$ index.php/$1 [L]

# 处理Angular的前端路由，指向frontend目录的index.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ frontend/index.html [L]

• 在CodeIgniter的application/config/routes.php里，给所有API接口加上api/前缀，比如：

$route['api/users/list'] = 'UsersController/getUserList';
$route['api/users/create'] = 'UsersController/createUser';

这样访问域名根路径就是Angular前端，请求/api/xxx就会触发CodeIgniter的接口逻辑。

方案2：Apache虚拟主机（适合开发/生产环境） #

给Angular和CodeIgniter分别配置独立的子域名，完全分开两个服务的目录，管理起来更清晰：

1. 修改本地hosts文件（Windows路径：C:\Windows\System32\drivers\etc\hosts，Mac/Linux路径：/etc/hosts），添加两行：

127.0.0.1 frontend.local
127.0.0.1 api.local

2. 配置Apache虚拟主机：打开XAMPP的apache/conf/extra/httpd-vhosts.conf，添加两个虚拟主机配置：

# Angular前端的虚拟主机
<VirtualHost *:80>
    DocumentRoot "C:/xampp/htdocs/your-angular-project/dist"
    ServerName frontend.local
    <Directory "C:/xampp/htdocs/your-angular-project/dist">
        AllowOverride All
        Require all granted
        # 处理Angular的HTML5路由
        RewriteEngine On
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule ^(.*)$ index.html [L]
    </Directory>
</VirtualHost>

# CodeIgniter API的虚拟主机
<VirtualHost *:80>
    DocumentRoot "C:/xampp/htdocs/your-codeigniter-project"
    ServerName api.local
    <Directory "C:/xampp/htdocs/your-codeigniter-project">
        AllowOverride All
        Require all granted
        RewriteEngine On
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule ^(.*)$ index.php/$1 [L]
    </Directory>
</VirtualHost>

3. 重启XAMPP的Apache服务，之后访问http://frontend.local就是Angular前端，http://api.local就是CodeIgniter的API接口。
4. 跨域处理：因为是不同子域名，需要在CodeIgniter的控制器里添加CORS响应头，避免跨域报错：

public function __construct() {
    parent::__construct();
    header("Access-Control-Allow-Origin: http://frontend.local");
    header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
    header("Access-Control-Allow-Headers: Content-Type, Authorization");
}

方案3：同一域名下的子目录分离（适合快速测试） #

把Angular和CodeIgniter分别放在htdocs的不同子目录，各自独立运行：

• 把Angular构建后的dist文件夹重命名为angular，放到XAMPP的htdocs目录下。
• 把CodeIgniter项目文件夹放到htdocs目录下，命名为ci。
• 给两个目录分别配置.htaccess：
  • Angular的htdocs/angular/.htaccess：

  RewriteEngine On
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^(.*)$ index.html [L]
  

  • CodeIgniter的htdocs/ci/.htaccess：

  RewriteEngine On
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule ^(.*)$ index.php/$1 [L]
  

• 访问http://localhost/angular打开Angular前端，http://localhost/ci/api/xxx调用CodeIgniter接口。

开发阶段小技巧 #

如果开发时不想每次都构建Angular，可以用Webpack Dev Server的代理功能，把API请求转发到CodeIgniter的Apache服务器：

• 在Angular的Webpack配置文件（比如webpack.dev.js）里添加代理配置：

devServer: {
  port: 4200, // Angular开发服务器端口
  proxy: {
    '/api': {
      target: 'http://localhost/your-codeigniter-project',
      changeOrigin: true,
      pathRewrite: { '^/api': '' } // 去掉请求路径里的/api前缀，转发给CI
    }
  }
}

这样启动Angular开发服务器后，请求http://localhost:4200/api/users会自动转发到http://localhost/your-codeigniter-project/users，不用部署构建产物，开发效率更高。

内容的提问来源于stack exchange，提问作者Moses bendicion