Развернуть Angular 2 на сервере Apache

Question

Развернуть Angular 2 на сервере Apache

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

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

Клонированный полный репозиторий проекта на моем сервере.
Установленные зависимости с помощью npm install,
Используемый ng build --prod команда, и это создало dist каталог.
Изменено apache корень /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, Что мне не хватает?

29

angular apache .htaccess digital-ocean

Источник

user3134082 27 мар '17 в 04:39

9 ответов

Решение

Создайте .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>

24

Источник

user5899936 23 мар '18 в 17:10

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>

8

Источник

user3490098 16 июл '18 в 14:38

Изменить базовый тег в файле index.html
<base href="./">
Создайте сборку после этого
ng build --prod
Теперь у вас будет новая папка dist, сейчас разверните папку dist. Он должен работать.

5

Источник

user363503 07 июл '17 в 06:17

Для Apache, чтобы перенаправить любой запрос в index.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=$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 должно быть включено, чтобы это работало. Чаще всего это включено. Если нет, спросите у своего хостинг-провайдера

5

Источник

user6016149 16 фев '18 в 20:51

Изменить базовый тег в файле index.html

Бежать:

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

3

Источник

user6361739 07 фев '18 в 16:37

Согласно официальной документации 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 вручную, и он сработал.

1

Источник

user7051774 11 фев '21 в 14:46

Я создал общедоступный каталог распространения. Я изменил только настройку виртуального хоста 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>

~

1

Источник

user1307250 13 май '20 в 21:57

Откройте ваш index.html в каталоге dist после

ng build --prod

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

<base href="/">

в

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

1

Источник

user2593751 26 июн '17 в 03:06

Другие вопросы по тегам angular apache .htaccess digital-ocean

user3134082 27 мар '17 в 04:49 2017-03-27 04:49 · Accepted Answer · 2017-03-27 04:49

Похоже, я пропустил это в моем /etc/apache2/sites-enabled/000-default.conf файл. После добавления этого и перезапуска apacheСайт работает нормально.

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

18

Источник

user3134082 27 мар '17 в 04:49