Как обеспечить беспроблемное использование на внешнем интерфейсе при развертывании SPA? - PullRequest
Новая
       15

Как обеспечить беспроблемное использование на внешнем интерфейсе при развертывании SPA?

4 голосов
/ 07 марта 2019

Я ожидаю, что это применимо к любой веб-среде, использующей веб-пакет, который создает ресурсы / блоки, в моем случае это Vue.

Мой рабочий процесс:

  1. Разработка функции
  2. Сборка (npm run build)
  3. Развертывание (eb deploy)
  4. Вернуться к 1.

Построение удаляет все предыдущие фрагменты по мере добавления новых, т.е.

мой-module.1X3DF23.js
мой-другой-module.9DFdw232.js

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

До этого момента я увеличивал номер версии вместе с любыми запросами XHR с сервера. Если приложение заметит изменение, оно перезагрузится само. Но если из кусков приходит 404 ошибки, запросы XHR все равно не будут вызываться.

Начальные мысли:

  1. Если веб-приложение пингует серверную часть с интервалом, скажем, 30 секунд, это приведет к автоматическому обновлению версии.

Есть ли альтернативы?

Ответы [ 3 ]

3 голосов
/ 12 марта 2019

Я бы вообще не удалял предыдущие чанки.Я не знаю, как работает Flexiblebeanstalk, поэтому я покажу вам свою стратегию на старом добром сервере Ubuntu.

В основном, у вас есть эти папки в вашем приложении Vue: 

dist -> Contains the content of the built application with npm run build
node_modules
public
src
...

Что яя создаю новую папку с именем deploy, поскольку одна из проблем с папкой dist заключается в том, что npm run build удаляет содержимое папки dist в начале сборки.

Наличие *В папке 1012 * вы можете хранить все необходимые данные за определенное время.

Поэтому, когда я собираю свой проект, я затем копирую содержимое папки dist в папку deploy, не удаляя предыдущие фрагменты.

Чтобы папка deploy не мешала работе git, я добавляю ее в реестр .gitignore.

Это можно сделать с помощью простой рекурсивной вставки, используя bash: 

cp -R dist/* deploy/

Это заменит вашу страницу index.html в папке развертывания, но не перезапишет ваши предыдущие чанки.

Проблема с этим решением: Ваша папка deploy можетполучить огромный, потому что предыдущие куски никогда не будут удалены.

Решение для этой проблемы: Напишите надежный сценарий, который удаляет фрагменты старше 1 дня (или более) при развертывании приложения.Вы можете основать свой сценарий на дату создания файла.Если вы свободно владеете bash, то иди с ним.Лично я предпочитаю писать этот вид сценария с узлом непосредственно в сценарии deploy.js в корне моего проекта.

0 голосов
/ 19 марта 2019

Если ваше приложение на 100% статично, вы можете использовать AWS S3 bucket. Чтобы обновить приложение, вам просто нужно обновить репо.

aws s3 sync - удалить / источник / судьба

Мы занимаемся этим, и обновление, как и ожидалось, без проблем.

0 голосов
/ 18 марта 2019

Я бы посоветовал вам сделать следующее

Рассмотрим статический URL-ресурс, который вы обслуживаете, следующим образом

abc.com / v1 / module.123.js

Я бы посоветовал вам сохранить

v1

в том же виде между обновлениями вашей сборки.

Webpack сгенерирует новое имя файла следующим образом

build1: module.123.js

build2: module.234.js

всякий раз, когда содержимое файла module.js изменяется между вашими сборками.

Во время ваших обновлений сборки убедитесь, что вы не удаляете

v1

папка на вашем сервере.Вместо полной замены вы можете объединить старую папку и новую папку.При этом вы будете иметь оба

module.123.js

module.234.js

в папке v1 на сервере.Делая это, вы избежите ошибки http 404 в SPA.

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

. Вы можете менять папку V1 каждые 6 месяцев или около того на V2 или что-то еще, что соответствует вашим потребностям для очисткинеиспользуемые файлы.

...