Эластичный бобовый стебель: удалите URL-адреса hashbang из SPA - PullRequest
Новая
       6

Эластичный бобовый стебель: удалите URL-адреса hashbang из SPA

0 голосов
/ 06 сентября 2018

У меня есть приложение AngularJS, размещенное с использованием Elastic Beanstalk, и я хотел бы удалить хэш-банг (#!) Из URL-адресов, но у меня возникают проблемы с использованием файлов конфигурации для внесения необходимых изменений в сервер Apache.

Я включил html5mode в своем угловом приложении, и в настоящее время у меня есть следующий файл конфигурации в моем каталоге .ebextensions 

files:
  "/etc/httpd/conf.d/wsgirewrite.conf":
    mode: "000644"
    owner: root
    group: root
    content: |
        RewriteEngine On  
        RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]  
        RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d  
        RewriteRule ^ - [L]

        RewriteRule ^ /index.html

Все отлично работает без хеш-бенгов, пока я не перезагружу страницу и не получу 404, указывающее, что правила перезаписи не работают.

Если возможно, я бы хотел избежать любых решений, включающих ssh, копирование и изменение одной из конфигураций по умолчанию, поскольку это, вероятно, сделает обслуживание кошмаром, если AWS изменит какие-либо настройки по умолчанию

1 Ответ

0 голосов
/ 09 сентября 2018

Hashbang - это запасной механизм для старых браузеров, где HTML5 не поддерживается. Проверьте иллюстрацию:

Hashbang fallback

То, что вы можете искать, это как настроить "красивые URL" в AngularJS. Помимо включения режима HTML5 (который, по-видимому, вы уже сделали: $locationProvider.html5Mode(true)), вам необходимо настроить тег <base href="/"> внутри вашего <head>, указав базовый URL / цель для всех относительных URL в документе.

Примечание. Служба $ location автоматически переключится на метод hashbang для браузеров, которые не поддерживают API истории HTML5.

По документации Angular, без #, URL выглядит намного лучше, но он также требует переписывания на стороне сервера. Это httpd.conf пример, который они имеют для Apache server: 

<VirtualHost *:80>
    ServerName my-app

    DocumentRoot /path/to/app

    <Directory /path/to/app>
        RewriteEngine on

        # Don't rewrite files or directories
        RewriteCond %{REQUEST_FILENAME} -f [OR]
        RewriteCond %{REQUEST_FILENAME} -d
        RewriteRule ^ - [L]

        # Rewrite everything else to index.html to allow html5 state links
        RewriteRule ^ index.html [L]
    </Directory>
</VirtualHost>

Поскольку вы работаете с Beanstalk , вам необходимо настроить httpd.conf с помощью ebextensions . Для Apache доступны два варианта:

  • К переопределить Конфигурация Apache Elastic Beanstalk по умолчанию полностью, включите конфигурацию в ваш исходный комплект по адресу .ebextensions/httpd/conf/httpd.conf.
  • До расширение конфигурация Apache Elastic Beanstalk по умолчанию, добавьте файлы конфигурации .conf в папку с именем .ebextensions/httpd/conf.d в вашем исходном пакете приложения (например, .ebextensions/httpd/conf.d/port5000.conf).

Я бы порекомендовал вариант расширения.

Ссылки

https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

https://docs.aws.amazon.com/elasticbeanstalk/latest/dg/java-tomcat-proxy.html

https://docs.aws.amazon.com/pt_br/elasticbeanstalk/latest/dg/ebextensions.html

...