将 Angular 2 部署到 Apache 服务器

Question

我想在 Apache 服务器上部署 Angular 2 应用程序。我已经阅读了各种指南，例如 this 和 this，但它们都不起作用。我在服务器上安装了npm 和ng。

简而言之，这就是我所做的：

1. 在我的服务器上克隆了完整的项目存储库。
2. 使用npm install 安装依赖项。
3. 使用了ng build --prod 命令并创建了一个dist 目录。
4. 已将 apache 根目录更改为 /var/www/html/dist 目录。
5. 启用mod_rewrite，重新启动apache，并将此.htaccess 添加到我的dist 目录中。

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

但只有我的主页 domain.com 有效，其他页面如 domain.com/login、domain.com/register 等会抛出 404 错误。即使domain.com/index.html/login 也不起作用。

该应用程序在我使用ng serve 开发它的本地系统上运行良好。我错过了什么？

Answer 1

在根文件夹中创建.htaccess 文件并将其粘贴到.htaccess

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

Answer 2

我的/etc/apache2/sites-enabled/000-default.conf 文件中似乎缺少这个。添加此内容并重新启动apache 后，网站运行正常。

<Directory "/var/www/html/dist">
  AllowOverride All
</Directory>

Answer 3

1) 更改 index.html 文件中的基本标记

<base href="./">

2) 构建项目：

ng build --prod --base-href /myproject/

3) 在“/usr/local/apache2/htdocs/myproject/”中添加你的dist文件

4)在 Apache Server 2.4 (httpd) 上 在文件中：/usr/local/apache2/conf/httpd.conf 设置“FallbackResource”

<Directory "/usr/local/apache2/htdocs">
   ...
   FallbackResource /myproject/index.html
</Directory>

完整文件“/usr/local/apache2/conf/httpd.conf”：

ServerRoot "/usr/local/apache2"

Listen 80

LoadModule mpm_event_module modules/mod_mpm_event.so
LoadModule authn_file_module modules/mod_authn_file.so
LoadModule authn_core_module modules/mod_authn_core.so
LoadModule authz_host_module modules/mod_authz_host.so
LoadModule authz_groupfile_module modules/mod_authz_groupfile.so
LoadModule authz_user_module modules/mod_authz_user.so
LoadModule authz_core_module modules/mod_authz_core.so
LoadModule access_compat_module modules/mod_access_compat.so
LoadModule auth_basic_module modules/mod_auth_basic.so
LoadModule reqtimeout_module modules/mod_reqtimeout.so
LoadModule filter_module modules/mod_filter.so
LoadModule mime_module modules/mod_mime.so
LoadModule log_config_module modules/mod_log_config.so
LoadModule env_module modules/mod_env.so
LoadModule headers_module modules/mod_headers.so
LoadModule setenvif_module modules/mod_setenvif.so
LoadModule version_module modules/mod_version.so

LoadModule unixd_module modules/mod_unixd.so
LoadModule status_module modules/mod_status.so
LoadModule autoindex_module modules/mod_autoindex.so

<IfModule !mpm_prefork_module>
    #LoadModule cgid_module modules/mod_cgid.so
</IfModule>
<IfModule mpm_prefork_module>
    #LoadModule cgi_module modules/mod_cgi.so
</IfModule>

LoadModule dir_module modules/mod_dir.so
LoadModule alias_module modules/mod_alias.so
LoadModule rewrite_module modules/mod_rewrite.so

<IfModule unixd_module>
User daemon
Group daemon

</IfModule>
ServerAdmin you@example.com

<Directory />
    AllowOverride none
    Require all denied
</Directory>

DocumentRoot "/usr/local/apache2/htdocs"
<Directory "/usr/local/apache2/htdocs">
    Options Indexes FollowSymLinks
    AllowOverride None
    Require all granted
    FallbackResource /myproject/index.html
</Directory>

<IfModule dir_module>
    DirectoryIndex index.html
</IfModule>

<Files ".ht*">
    Require all denied
</Files>

ErrorLog /proc/self/fd/2

LogLevel warn

<IfModule log_config_module>
    LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\"" combined
    LogFormat "%h %l %u %t \"%r\" %>s %b" common

    <IfModule logio_module>
      LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\" %I %O" combinedio
    </IfModule>

    CustomLog /proc/self/fd/1 common

</IfModule>

<IfModule alias_module>

    ScriptAlias /cgi-bin/ "/usr/local/apache2/cgi-bin/"

</IfModule>

<IfModule cgid_module>
</IfModule>


<Directory "/usr/local/apache2/cgi-bin">
    AllowOverride None
    Options None
    Require all granted
</Directory>

<IfModule headers_module>
    RequestHeader unset Proxy early
</IfModule>

<IfModule mime_module>
    TypesConfig conf/mime.types

    AddType application/x-compress .Z
    AddType application/x-gzip .gz .tgz

</IfModule>

<IfModule proxy_html_module>
Include conf/extra/proxy-html.conf
</IfModule>

<IfModule ssl_module>
SSLRandomSeed startup builtin
SSLRandomSeed connect builtin
</IfModule>

Answer 4

1. 更改 index.html 文件中的基本标记

   <base href="./">

2. 之后创建一个构建

   ng 构建 --prod

3. 现在您将拥有一个新文件夹 dist，现在部署 dist 文件夹。它应该可以工作。

Answer 5

对于 Apache，要将任何请求重定向到 index.html，您需要根目录中的 .htaccess 文件。 只需在您的 dist 文件夹（与 index.html 相同级别）中创建一个 .htaccess，我假设这是您应用的公共根目录，然后将其粘贴到 .htaccess 文件中：

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

# not rewrite css, js and images
RewriteCond %{REQUEST_URI} !\.(?:css|js|map|jpe?g|gif|png)$ [NC]
RewriteRule ^(.*)$ /index.html?path=$1 [NC,L,QSA]

现在，无论您请求什么路径，Apache 将始终为您的 index.html 文件提供服务，除了对实际现有文件的请求 (RewriteCond %{REQUEST_FILENAME} !-f) 和对 css、js 等的请求 (RewriteCond %{REQUEST_URI} !.(?:css|js|map|jpe?g|gif|png)$) - 需要排除，因为您实际上想要这些。 此外，需要启用 Apache 的 mod_rewrite 扩展才能使其正常工作。大多数情况下，它是启用的。如果没有，请询​​问您的托管服务提供商

Answer 6

更改 index.html 文件中的基本标记

运行：

ng build --prod -bh "http://example.net"

Answer 7

在

之后在 dist 目录中打开你的 index.html

ng build --prod

并将基本元素添加到您的站点 DNS 名称，例如我的本地 apache 服务器 我从

<base href="/">

到

<base href="//localhost/angular2/ng2-cli/dist/">

Answer 8

我已将分发目录创建为公共。我只更改了 apache 的虚拟主机设置。

<VirtualHost *:80>
    ServerAdmin webmaster@localhost
    ServerName frontend.loc
    DocumentRoot /var/www/frontend/public
    <Directory "/var/www/frontend/public/">
        Options FollowSymLinks
        Allow from all
        AllowOverride All
        <IfModule mod_rewrite.c>
                RewriteEngine on
                RewriteCond %{REQUEST_FILENAME} !-d
                RewriteCond %{REQUEST_FILENAME} !-f
                RewriteRule ^(.*)$ index.html
        </IfModule>
    </Directory>
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined

</VirtualHost>

~

Answer 9

根据 Angular 官方文档进行 Angular 部署 (https://angular.io/guide/deployment)

路由应用程序应支持“深层链接”。

我们需要启用 mod_rewrite 模块，有多种方法可以做到这一点。在 ubuntu 机器上，我们可以运行以下命令：

sudo a2enmod rewrite
sudo systemctl restart apache2

我们还需要在配置文件中允许覆盖，以便 .htaccess 文件可以运行：

  <Directory /var/www/>
  Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>

然后在 .htaccess 文件中，复制以下行进行重写：

RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

如果它仍然不起作用，那么最好的解决方案是检查错误日志，在我的情况下，我通过检查日志解决了这个问题，发现没有安装 mod_rewrite 模块，所以我手动安装了 mod_rewrite 并且它有效。