Question

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

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

在我的服务器上克隆完整的项目存储库。
使用npm install安装的依赖项。
使用ng build --prod命令，它创建了一个dist目录。
将apache root更改为/var/www/html/dist目录。
已启用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）将dist文件添加到“ / usr / local / apache2 / htdocs / myproject /”

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

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

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

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

Answer 5

对于Apache，要将任何请求重定向到index.html，您需要在根目录中使用.htaccess文件。只需在你的dist文件夹中创建一个.htaccess（与index.html相同），我认为这是你应用的公共根，并将其粘贴到.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

和Chang基本元素到您的站点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 文档 (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服务器

9 个答案: