如何用Apache2在树莓派4上托管多个Angular应用？

方案1：通过子路径访问（无需额外端口） #

1. 构建Angular应用时指定基础路径 #

每个Angular项目构建前必须设置base-href，否则内部资源和路由会出错：

# 第一个应用，对应路径/app1
ng build --base-href /app1/
# 第二个应用，对应路径/app2
ng build --base-href /app2/

构建完成后，把每个项目dist/目录下的所有文件复制到Apache的子文件夹：

# 复制第一个应用文件到/var/www/html/app1
sudo cp -r ./你的第一个Angular项目/dist/* /var/www/html/app1/
# 复制第二个应用文件到/var/www/html/app2
sudo cp -r ./你的第二个Angular项目/dist/* /var/www/html/app2/

2. 配置Apache支持Angular单页路由 #

Angular是单页应用，直接访问子路径下的路由（比如http://树莓派IP/app1/user）会返回404，需要让Apache把请求转发到对应应用的index.html。

方法A：用.htaccess文件（推荐）

在每个应用的子目录下创建.htaccess：

cd /var/www/html/app1
sudo nano .htaccess

粘贴以下内容：

RewriteEngine On
# 若请求的文件/目录不存在，转发到index.html
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [L]

给/var/www/html/app2也创建同样的.htaccess文件，然后启用Apache的rewrite模块：

sudo a2enmod rewrite
sudo systemctl restart apache2

方法B：修改Apache主配置

编辑默认站点配置：

sudo nano /etc/apache2/sites-available/000-default.conf

在<VirtualHost *:80>块内添加：

<Directory /var/www/html/app1>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^ index.html [L]
</Directory>

<Directory /var/www/html/app2>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^ index.html [L]
</Directory>

保存后重启Apache：

sudo systemctl restart apache2

测试访问 #

• 原应用：http://你的树莓派IP
• 第一个子应用：http://你的树莓派IP/app1
• 第二个子应用：http://你的树莓派IP/app2

方案2：通过不同端口访问 #

1. 准备应用目录与构建文件 #

不用指定base-href（或设为/），构建后复制到独立目录：

# 构建第一个应用
ng build
sudo mkdir -p /var/www/app1
sudo cp -r ./你的第一个Angular项目/dist/* /var/www/app1/

# 构建第二个应用
ng build
sudo mkdir -p /var/www/app2
sudo cp -r ./你的第二个Angular项目/dist/* /var/www/app2/

2. 创建虚拟主机配置文件 #

为每个应用创建独立的配置：

# 第一个应用（监听8080端口）
sudo nano /etc/apache2/sites-available/app1.conf

粘贴内容：

<VirtualHost *:8080>
    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/app1

    <Directory /var/www/app1>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All
        Require all granted
        # 支持Angular路由
        RewriteEngine On
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule ^ index.html [L]
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/app1-error.log
    CustomLog ${APACHE_LOG_DIR}/app1-access.log combined
</VirtualHost>

同理创建第二个应用的app2.conf，将监听端口改为8081，DocumentRoot改为/var/www/app2。

3. 启用端口与虚拟主机 #

编辑Apache端口配置，添加新端口：

sudo nano /etc/apache2/ports.conf

添加：

Listen 8080
Listen 8081

启用虚拟主机并重启服务：

sudo a2ensite app1.conf
sudo a2ensite app2.conf
sudo a2enmod rewrite
sudo systemctl restart apache2

如果树莓派开了防火墙，开放新增端口：

sudo ufw allow 8080/tcp
sudo ufw allow 8081/tcp

测试访问 #

• 原应用：http://你的树莓派IP
• 第一个应用：http://你的树莓派IP:8080
• 第二个应用：http://你的树莓派IP:8081

额外注意 #

复制文件后建议设置权限，避免访问问题：

# 子路径方案
sudo chown -R www-data:www-data /var/www/html/app1 /var/www/html/app2
# 端口方案
sudo chown -R www-data:www-data /var/www/app1 /var/www/app2

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