S3 Static Website Hosting Route Все пути к Index.html

Я использую S3 для размещения javascript-приложения, которое будет использовать push5stats HTML5. Проблема в том, что пользователь закладок любого из URL-адресов, он ничего не решит. Мне нужна возможность принимать все запросы url и подавать корневой index.html в моем ведомости S3, а не просто выполнять полную переадресацию. Тогда мое приложение javascript смогло проанализировать URL-адрес и выполнить правильную страницу.

Есть ли способ сказать S3 для обслуживания index.html для всех запросов URL вместо того, чтобы делать перенаправления? Это было бы похоже на настройку apache для обработки всех входящих запросов, обслуживая один index.html, как в этом примере: https://stackoverflow.com/a/10647521/1762614 . Мне бы очень хотелось избежать использования веб-сервера только для обработки этих маршрутов. Выполнение всего, начиная с S3, очень привлекательно.

    12 Solutions collect form web for “S3 Static Website Hosting Route Все пути к Index.html”

    Решение Mark не плохо, но есть еще более простое решение. В свойствах вашего ведра в Документе ошибок просто используйте тот же файл, что и индексный документ . Рамочные структуры JavaScript, такие как Backbone, AngularJS и т. Д., Будут работать из коробки таким образом, и обновление страницы будет полностью поддерживаться.

    То, как я смог заставить это работать, выглядит следующим образом:

    В разделе « Редактировать правила перенаправления» консоли S3 для вашего домена добавьте следующие правила:

       404   yourdomainname.com #!/    

    Это приведет к перенаправлению всех путей, которые приведут к тому, что 404 не будут найдены в вашем корневом домене с помощью хешированной версии пути. Таким образом, http://yourdomainname.com/posts будет перенаправляться на http://yourdomainname.com/#!/posts при условии, что в / сообщениях нет файла.

    Однако для использования pushStates HTML5 нам нужно принять этот запрос и вручную установить правильный pushState на основе пути хеширования. Поэтому добавьте это в начало вашего файла index.html:

      

    Это захватывает hash и превращает его в HTML5 pushState. С этого момента вы можете использовать pushStates, чтобы иметь не-hash-пучки в вашем приложении.

    Это очень легко решить без хакеров, с помощью CloudFront.

    • Создайте ведро S3, например: реагируйте
    • Создайте дистрибутивы CloudFront с этими настройками:
      • Корневой объект по умолчанию : index.html
      • Происхождение Доменное имя : домен ведомости S3, например: response.s3.amazonaws.com
    • Перейдите на вкладку « Страницы ошибок », нажмите « Создать пользовательский ответ об ошибке» :
      • Код ошибки HTTP : 403: Запрещено (404: Не найдено, в случае S3 Static Website)
      • Настроить ответ об ошибке : Да
      • Путь к странице ответа : /index.html
      • Код ответа HTTP : 200: OK
      • Нажмите « Создать».

    Существует несколько проблем с подходом S3 / Redirect, упомянутым другими.

    1. mutliple перенаправления происходят по мере того, как пути вашего приложения разрешены. Например: http://www.myapp.com/path/for/test перенаправляется как http://www.myapp.com/#/path/for/test
    2. В строке url появляется мерцание, так как «#» приходит и проходит благодаря действию вашей системы SPA.
    3. На Seo влияет, потому что: «Эй! Его google заставляет его переадресовывать ‘
    4. Поддержка Safari для вашего приложения идет на бросок.

    Решение:

    1. Убедитесь, что для вашего веб-сайта настроен указательный маршрут. В основном это index.html
    2. Удалить правила маршрутизации из S3-конфигураций
    3. Поместите Cloudfront перед вашим ведром S3.
    4. Настройте правила страницы ошибки для вашего экземпляра Cloudfront. В правилах ошибки укажите:
      • Код ошибки Http: 404 (и 403 или другие ошибки по мере необходимости)
      • Ошибка кэширования Минимальный TTL (в секундах): 0
      • Настроить ответ: Да
      • Путь к странице ответа: /index.html
      • Код ответа HTTP: 200

    5. Для потребностей SEO + убедитесь, что ваш index.html не кэширует, выполните следующие действия:

    • Настройте экземпляр EC2 и настройте сервер nginx.
    • Назначьте публичный ip вашему экземпляру EC2.
    • Создайте ELB, который имеет экземпляр EC2, который вы создали как экземпляр
    • Вы должны иметь возможность назначить ELB для вашего DNS.
    • Теперь настройте сервер nginx для выполнения следующих задач: Proxy_pass все запросы на ваш CDN (только для index.html, для передачи других активов непосредственно из вашей облачной сети) и для поиска ботов, redirect трафика, как это предусмотрено службами, такими как Prerender.io

    Я могу помочь более подробно в отношении настройки nginx, просто оставьте заметку. Выучили это с трудом.

    После обновления распределения облачного фронта. Недействительный кеш облачного облака один раз, чтобы быть в нетронутом режиме. Хит URL в браузере, и все должно быть хорошо.

    Это тангенциально, но вот подсказка для тех, кто использует Rackt’s React Router, с историей браузера (HTML5), которые хотят размещать на S3.

    Предположим, что пользователь посещает /foo/bear на вашем статическом веб-сайте, размещенном на S3. Учитывая предыдущее предложение Дэвида , правила перенаправления отправят их в /#/foo/bear . Если ваше приложение построено с использованием истории браузера, это не принесет много пользы. Однако ваше приложение загружается в этот момент, и теперь оно может управлять историей.

    В том числе историю Rackt в нашем проекте (см. Также « Использование пользовательских историй из проекта React Router»), вы можете добавить слушателя, который знает пути истории hashа и, при необходимости, заменить путь, как показано в этом примере:

     import ReactDOM from 'react-dom'; /* Application-specific details. */ const route = {}; import { Router, useRouterHistory } from 'react-router'; import { createHistory } from 'history'; const history = useRouterHistory(createHistory)(); history.listen(function (location) { const path = (/#(\/.*)$/.exec(location.hash) || [])[1]; if (path) history.replace(path); }); ReactDOM.render( , document.body.appendChild(document.createElement('div')) ); 

    Напомним:

    1. Правило перенаправления Дэвида S3 направит /foo/bear на /#/foo/bear .
    2. Ваше приложение загрузится.
    3. Слушатель истории обнаружит нотацию #/foo/bear history.
    4. И замените историю правильным путем.

    Теги тегов будут работать, как и ожидалось, так же как и все другие функции истории браузера. Единственный недостаток, который я заметил, – это межстраничное redirect, которое возникает при первоначальном запросе.

    Это было вдохновлено решением для AngularJS , и я подозреваю, что его можно легко адаптировать к любому приложению.

    Сегодня я столкнулся с той же проблемой, но решение @ Mark-Nutter было неполным для удаления hashbang из моего приложения angularjs.

    На самом деле вам нужно перейти в « Разрешения прав на редактирование» , нажмите « Добавить дополнительные разрешения», а затем добавьте правильный список в свое ведро для всех. С этой конфигурацией AWS S3 теперь сможет вернуть ошибку 404, и тогда правило перенаправления будет правильно проверять регистр.

    Именно так : введите описание изображения здесь

    И затем вы можете перейти в Edit Redirection Rules и добавить это правило:

        404   subdomain.domain.fr #!/    

    Здесь вы можете заменить HostName subdomain.domain.fr своим доменом и KeyPrefix #! / Если вы не используете метод hashbang для цели SEO.

    Конечно, все это будет работать, только если у вас уже установлен html5mode в вашем угловом приложении.

     $locationProvider.html5Mode(true).hashPrefix('!'); 

    Самое простое решение сделать приложение Angular 2+ из Amazon S3 и прямых URL-адресов – указывать index.html как документы индекса, так и ошибки в конфигурации корзины S3.

    введите описание изображения здесь

    Я вижу 4 решения этой проблемы. Первые 3 были уже рассмотрены в ответах, а последний – мой вклад.

    1. Установите документ с ошибкой в ​​index.html.
      Проблема : тело ответа будет правильным, но код статуса будет 404, что повредит SEO.

    2. Установите правила перенаправления.
      Проблема : URL-адрес загрязнен #! и мигает страница при загрузке.

    3. Настройте CloudFront.
      Проблема : все страницы возвратят 404 из источника, поэтому вам нужно выбрать, если вы ничего не будете кэшировать (TTL 0, как было предложено), или если вы будете кэшировать и иметь проблемы при обновлении сайта.

    4. Prerender все страницы.
      Проблема : дополнительная работа с страницами prerender, особенно когда страницы часто меняются. Например, новостной сайт.

    Мое предложение состоит в том, чтобы использовать опцию 4. Если вы заархивируете все страницы, не будет ошибок 404 для ожидаемых страниц. Страница будет загружаться штрафом, и структура примет управление и будет действовать как SPA. Вы также можете установить для документа ошибки общую страницу error.html и правило перенаправления для перенаправления ошибок 404 на страницу 404.html (без hash-функции).

    Что касается 403 Запрещенных ошибок, я не позволяю им вообще возникать. В моем приложении я считаю, что все файлы в вебе хоста являются общедоступными, и я установил это со всеми параметрами с разрешением на чтение . Если на вашем сайте есть страницы, которые являются частными, то позволить пользователю увидеть макет HTML не должен быть проблемой. То, что вам нужно защитить, – это данные, и это делается в бэкэнд.

    Кроме того, если у вас есть личные активы, например, фотографии пользователей, вы можете сохранить их в другом ведре. Поскольку частные активы нуждаются в такой же тщательности, как и данные, их нельзя сравнивать с файлами активов, которые используются для размещения приложения.

    потому что проблема все еще там, хотя я бросаю другое решение. Мое дело было в том, что я хотел бы автоматически разворачивать все запросы на передачу до s3 для тестирования до слияния, делая их доступными в [mydomain] / pull-requests / [pr number] /
    (например, http://www.example.com/pull-requests/822/)

    Насколько я знаю, сценарии с правилами s3 не позволят иметь несколько проектов в одном ведро с использованием маршрутизации html5, поэтому, когда над большинством проголосовавших предложений работает проект в корневой папке, это не для нескольких проектов в собственных подпапках.

    Поэтому я указал свой домен на свой сервер, где следующая конфигурация nginx выполнила задание

     location /pull-requests/ { try_files $uri @get_files; } location @get_files { rewrite ^\/pull-requests\/(.*) /$1 break; proxy_pass http://; proxy_intercept_errors on; recursive_error_pages on; error_page 404 = @get_routes; } location @get_routes { rewrite ^\/(\w+)\/(.+) /$1/ break; proxy_pass http://; proxy_intercept_errors on; recursive_error_pages on; error_page 404 = @not_found; } location @not_found { return 404; } 

    он пытается получить файл, и если он не найден, предполагается, что это маршрут html5 и пытается это сделать. Если у вас есть 404 угловая страница для не найденных маршрутов, вы никогда не получите @not_found и получите угловую 404-страничную страницу вместо найденных файлов, которая может быть исправлена ​​с помощью некоторого правила if в @get_routes или что-то в этом роде.

    Я должен сказать, что я не чувствую себя слишком комфортно в области конфигурации nginx и использую regex, если на то пошло, я получил это, работая с некоторыми проб и ошибок, поэтому, пока это работает, я уверен, что есть место для улучшения и, пожалуйста, поделитесь своими мыслями ,

    Примечание : удалите правила перенаправления s3, если они были в конфигурации S3.

    и btw работает в Safari

    Ищет ту же проблему. В итоге я использовал сочетание предлагаемых решений, описанных выше.

    Во-первых, у меня есть ведро s3 с несколькими папками, каждая папка представляет веб-сайт реакции / сокращения. Я также использую cloudfront для недействительности кеша.

    Поэтому мне пришлось использовать правила маршрутизации для поддержки 404 и перенаправить их в конфигурацию hashа:

        website1/ 404   https my.host.com website1#     website2/ 404   https my.host.com website2#     website3/ 404   https my.host.com website3#    

    В моем js-коде мне нужно было обработать его с помощью baseName config для baseName -router. Прежде всего, убедитесь, что ваши зависимости совместимы, я установил history==4.0.0 которая была несовместима с react-router==3.0.1 .

    Мои зависимости:

    • «история»: «3.2.0»,
    • «реагировать»: «15.4.1»,
    • «реакция-редукция»: «4.4.6»,
    • «реакция-маршрутизатор»: «3.0.1»,
    • «реакция-маршрутизатор-редукс»: «4.0.7»,

    Я создал файл history.js для загрузки истории:

     import {useRouterHistory} from 'react-router'; import createBrowserHistory from 'history/lib/createBrowserHistory'; export const browserHistory = useRouterHistory(createBrowserHistory)({ basename: '/website1/', }); browserHistory.listen((location) => { const path = (/#(.*)$/.exec(location.hash) || [])[1]; if (path) { browserHistory.replace(path); } }); export default browserHistory; 

    Этот кусок кода позволяет обрабатывать 404, отправленные сервером с хешем, и заменять их в истории для загрузки наших маршрутов.

    Теперь вы можете использовать этот файл для настройки вашего магазина и вашего корневого файла.

     import {routerMiddleware} from 'react-router-redux'; import {applyMiddleware, compose} from 'redux'; import rootSaga from '../sagas'; import rootReducer from '../reducers'; import {createInjectSagasStore, sagaMiddleware} from './redux-sagas-injector'; import {browserHistory} from '../history'; export default function configureStore(initialState) { const enhancers = [ applyMiddleware( sagaMiddleware, routerMiddleware(browserHistory), )]; return createInjectSagasStore(rootReducer, rootSaga, initialState, compose(...enhancers)); } 
     import React, {PropTypes} from 'react'; import {Provider} from 'react-redux'; import {Router} from 'react-router'; import {syncHistoryWithStore} from 'react-router-redux'; import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; import getMuiTheme from 'material-ui/styles/getMuiTheme'; import variables from '!!sass-variable-loader!../../../css/variables/variables.prod.scss'; import routesFactory from '../routes'; import {browserHistory} from '../history'; const muiTheme = getMuiTheme({ palette: { primary1Color: variables.baseColor, }, }); const Root = ({store}) => { const history = syncHistoryWithStore(browserHistory, store); const routes = routesFactory(store); return (      ); }; Root.propTypes = { store: PropTypes.shape({}).isRequired, }; export default Root; 

    Надеюсь, поможет. Вы заметите, что в этой конфигурации я использую инжектор редукса и инжектор сага из доморощенного для загрузки javascript асинхронно через маршрутизацию. Не возражайте против этих строк.

    Я сам искал ответ. S3, похоже, поддерживает только переадресацию, вы не можете просто переписать URL-адрес и тихо вернуть другой ресурс. Я рассматриваю возможность использования моего скрипта сборки, чтобы просто сделать копии моего index.html во всех необходимых местах пути. Возможно, это сработает и для вас.

    Это самое элегантное решение, которое я нашел – используйте модуль маршрутизатора приложений с redirectм подстановочных знаков.

    { path: '**', redirectTo: '' }

    Затем, как упоминалось в бесчисленных сообщениях выше, убедитесь, что вы перенаправляете ошибки 404/403 в index.html с статусом 200. Проблема в том, что это приводит к обновлению браузера, загружая базовый href как (href + предыдущий маршрут). Если вы просматривали представление маршрутизатора в

    www.my-app.com/home то обновление покажет

    www.my-app.com/home/home

    Чтобы удалить дублированный маршрут маршрута, используйте модуль APP_BASE_HREF для переназначения базы браузера href так же, как это

    Если вам нужно сохранить первый параметр url, добавьте несколько результатов из раскола '/' .

    Браузер попадает на ваш редирект SPA для www.your-app.com/home/home теперь заменит URL-адрес на www.your-app.com/home и приложение будет вести себя так, как ожидалось, от вашей конфигурации маршрутизации в приложении

    Interesting Posts

    Изменить имя пользователя Win 8

    Разница между Java SE / EE / ME?

    Как мне создать резервные копии своих букмарклетов?

    Сектора жесткого диска по сравнению с треками

    Когда System.gc () делает что-либо

    Самый надежный удаленный рабочий стол / VNC для Windows

    Как синхронизировать контакты Thunderbird с контактами Gmail

    Adblock Plus не блокирует объявления Google. Как включить?

    Как разместить загрузочный ISO на USB-накопителе?

    Как я могу отправить себе электронное письмо, которое становится текстовым файлом на моем жестком диске (или в Dropbox)?

    Предотвращение автоматического открытия Chrome автоматически загруженных файлов PDF и изображений

    Kali Linux не может найти компьютер в сети

    Как я могу получить основную причину высоких вызовов отложенных процедур?

    Выполнение чистой установки версии Upgrade для Windows 8

    Временное блокирование всех входящих и исходящих, за исключением хром в брандмауэре Windows

    Давайте будем гением компьютера.