Развертывание Angular 2 на сервере Apache

я хочу развернуть приложение Angular 2 на сервере Apache. Я читал различные руководства, такие как этой и этой но ни один из них не работает. У меня npm и ng установленных на сервере.

в двух словах, вот что я сделал:

  1. клонированный полный репозиторий проектов на моем сервере.
  2. установленные зависимости с помощью npm install.
  3. используется ng build --prod команда и она создала dist справочник.
  4. изменить apache root to .
  5. включено mod_rewrite, перезапустить apache и добавил, что это .htaccess в своем
7
.htaccess angular apache digital-ocean

7 ответов

создать .htaccess файл в корневой папке и pase это в .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>
5

кажется, я пропустил это в моем . После добавления этого и перезапуска apache, сайт работает нормально.

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

  1. изменить базовый тег в индексе.html файл

    <base href="./">

  2. создайте сборку после этого

    ng build --prod

  3. Теперь у вас будет новая папка dist, разверните папку dist сейчас. Это должно сработать.

2

для Apache, чтобы перенаправить любой запрос на индекс.html, вам нужно .файл htaccess в корне. Просто создайте .htaccess в папке dist (тот же уровень, что и 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= [NC,L,QSA]

теперь, независимо от того, какой путь вы запрашиваете, Apache всегда будет служить вашему индексу.html-файл, за исключением запросов к существующим файлам (RewriteCond %{REQUEST_FILENAME} !- f)и запросы к css, js и т. д. (RewriteCond %{REQUEST_URI} !.(?: css|js|map / jpe?G|gif / png)$) - который необходимо исключить, потому что вы действительно хотите их. Кроме того, для этого необходимо включить расширение mod_rewrite Apache. Чаще всего он включен. Если нет, обратитесь к хостинг-провайдеру

1

1) измените базовый тег в индексе.html файл

<base href="./">

2) Построить Проект:

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

3) добавьте файлы dist в " / usr / local/apache2/htdocs/myproject/"

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>
1

открыть свой индекс.html в каталоге dist после

ng build --prod

и Базовый элемент Chang для вашего DNS-имени сайта, например, для моего локального сервера apache Я изменился с 

<base href="/">

to

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

изменить базовый тег в индексе.html файл

Run:

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