将 Angular 2 部署到 Apache 服务器

Question

我想在 Apache 服务器上部署 Angular 2 应用程序。我读过 this and this 等各种指南，但其中 none 有效。我在服务器上安装了 npm 和 ng。

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

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

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

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

Answer 1

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

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

Answer 2

在

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

ng build --prod

并将基本元素更改为您的站点 DNS 名称，例如我的本地 apache 服务器我从

<base href="/">

至

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

Answer 3

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

<base href="./">
之后创建一个构建

ng build --prod
现在您将拥有一个新的文件夹 dist，现在部署 dist 文件夹。应该可以。

Answer 4

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

运行:

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

Answer 5

对于 Apache，要将任何请求重定向到 index.html，您需要在根目录中有一个 .htaccess 文件。只需在您的 dist 文件夹中创建一个 .htaccess（与 index.html 相同级别），我假设这是您应用程序的 public 根目录，并将其粘贴到 .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= [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

在根文件夹中创建 .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 7

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

<base href="./">

2) 构建项目：

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

3) 在 "/usr/local/apache2/htdocs/myproject/"

中添加你的 dist 文件

4) 在 Apache 服务器 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 8

我已将分发目录创建为 public。我只更改了 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 手动并且有效。

将 Angular 2 部署到 Apache 服务器

Deploy Angular 2 to Apache Server

apache

.htaccess

digital-ocean

angular