web-dev-qa-db-fra.com

Déployer Angular 2 sur Apache Server

Je souhaite déployer une application Angular 2 sur un serveur Apache. J'ai lu divers guides comme ceci et ceci mais aucun d'entre eux ne fonctionne. J'ai installé npm et ng sur le serveur.

En bref, voici ce que j'ai fait:

  1. Cloner le référentiel de projet complet sur mon serveur.
  2. Dépendances installées à l'aide de npm install.
  3. Utiliser la commande ng build --prod et créer un répertoire dist.
  4. Changé Apache root en répertoire /var/www/html/dist.
  5. Enabled mod_rewrite, redémarré Apache et ajouté ce .htaccess dans mon répertoire 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>

Mais seule ma page d'accueil domain.com fonctionne, d'autres pages telles que domain.com/login, domain.com/register etc. émettent une erreur 404. Même domain.com/index.html/login ne fonctionne pas.

L'application fonctionne correctement sur mon système local où je la développe à l'aide de ng serve. Qu'est-ce que je rate?

apache.htaccessangulardigital-ocean
9
Kanav

Il semble que cela manquait dans mon fichier /etc/Apache2/sites-enabled/000-default.conf. Après avoir ajouté ceci et redémarré Apache, le site Web fonctionne correctement.

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

Créez le fichier .htaccess dans le dossier racine et collez-le dans .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>
8
Sumit Jaiswal

Pour Apache, pour rediriger n'importe quelle demande vers index.html, vous avez besoin d'un fichier .htaccess à la racine . Créez simplement un .htaccess dans votre dossier dist (au même niveau que index.html), je suppose que c'est la racine publique de votre application et collez-la dans le fichier .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]

Maintenant, quel que soit le chemin que vous demandez, Apache servira toujours votre fichier index.html, à l'exception des demandes concernant les fichiers existants (RewriteCond% {REQUEST_FILENAME}! -F) et des demandes concernant css, js, etc. (RewriteCond% {REQUEST_URI }!. (?: css | js | map | jpe? g | gif | png) $) - ce qui devait être exclu, car vous voulez vraiment ceux-ci . De plus, l'extension mod_rewrite d'Apache doit être activée pour cela travailler. Le plus souvent, il est activé. Si non, demandez à votre fournisseur d'hébergement

3
Md Ayub Ali Sarker

1) Changer la balise de base dans le fichier index.html

<base href="./">

2) Projet de construction:

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

3) Ajoutez vos fichiers dist dans "/ usr/local/Apache2/htdocs/myproject /"

4) Sur Apache Server 2.4 (httpd) Dans le fichier: /usr/local/Apache2/conf/httpd.conf, configurez "FallbackResource".

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

fichier complet "/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. Changer la balise de base dans le fichier index.html 

    <base href="./">

  2. Créer une construction après ça

    ng build --prod

  3. Vous allez maintenant avoir un nouveau dossier dist, déployer le dossier dist maintenant. Ça devrait marcher.

2
krunal shah

Changer la balise de base dans le fichier index.html

Courir: 

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

ouvrez votre index.html dans le répertoire dist après 

ng build --prod

et élément de base Chang au nom DNS de votre site, par exemple pour mon serveur Apache local J'ai changé de 

<base href="/">

à

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