web-dev-qa-db-de.com

Stellen Sie Angular 2 auf Apache Server bereit

Ich möchte eine Angular 2-Anwendung auf einem Apache-Server bereitstellen. Ich habe verschiedene Anleitungen wie this und this gelesen, aber keiner von ihnen funktioniert. Ich habe npm und ng auf dem Server installiert.

Kurz gesagt, was ich getan habe:

  1. Vollständiges Projekt-Repository auf meinem Server geklont.
  2. Installierte Abhängigkeiten mit npm install.
  3. ng build --prod-Befehl verwendet und ein dist-Verzeichnis erstellt.
  4. Apache root in /var/www/html/dist Verzeichnis geändert.
  5. mod_rewrite wurde aktiviert, Apache neu gestartet und dieser .htaccess in mein dist-Verzeichnis eingefügt.

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

Aber nur meine Homepage domain.com funktioniert, andere Seiten wie domain.com/login, domain.com/register usw. geben einen 404-Fehler aus. Sogar domain.com/index.html/login funktioniert nicht.

Die Anwendung funktioniert gut auf meinem lokalen System, auf dem ich sie mit ng serve entwickle. Was vermisse ich?

apache.htaccessangulardigital-ocean
9
Kanav

Es scheint, dass mir dies in meiner /etc/Apache2/sites-enabled/000-default.conf-Datei fehlte. Nach dem Hinzufügen und dem Neustart von Apache läuft die Website einwandfrei.

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

Erstellen Sie eine .htaccess-Datei im Stammordner und fügen Sie diese in .htaccess ein.

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

Für die Umleitung von Anfragen an index.html benötigen Apache eine .htaccess-Datei im Stammverzeichnis . Erstellen Sie einfach einen .htaccess in Ihrem dist-Ordner (dieselbe Ebene wie index.html) Ihre App und fügen Sie diese in die .htaccess-Datei ein:

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]

Unabhängig von dem Pfad, den Sie anfragen, wird Apache Ihre index.html-Datei immer bereitstellen, mit Ausnahme von Anforderungen an vorhandene Dateien (RewriteCond% {REQUEST_FILENAME}! -F) und Anforderungen an css, js usw. (RewriteCond% {REQUEST_URI) }.. (?: css | js | map | jpe? g | gif | png) $) - was unbedingt ausgeschlossen werden musste, weil Sie diese wirklich wollen . Außerdem muss dazu die Mod_rewrite-Erweiterung von Apache aktiviert sein arbeiten. Meistens ist es aktiviert. Wenn nicht, fragen Sie Ihren Hosting-Provider

3
Md Ayub Ali Sarker

1) Ändern Sie das Basis-Tag in der Datei index.html

<base href="./">

2) Projekt erstellen:

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

3) Fügen Sie Ihre dist-Dateien in "/ usr/local/Apache2/htdocs/myproject /" hinzu.

4) Auf Apache Server 2.4 (httpd) In Datei: /usr/local/Apache2/conf/httpd.conf setup "FallbackResource"

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

vollständige Datei "/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 [email protected]

<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>
3
rafambbr

  1. Ändern Sie das Basis-Tag in der Datei index.html 

    <base href="./">

  2. Erstellen Sie danach einen Build

    ng Build --Prod

  3. Jetzt haben Sie einen neuen Ordner dist. Dist Ordner jetzt bereitstellen. Es sollte funktionieren.

2
krunal shah

Ändern Sie das Basis-Tag in der Datei index.html

Lauf: 

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

Öffnen Sie anschließend die index.html im Verzeichnis dist 

ng Build --Prod

und Chang-Basiselement für den DNS-Namen Ihrer Site, beispielsweise für meinen lokalen Apache-Server 

<base href="/">

zu

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