Недавно Apache OpenWhisk добавил веб-действия, позволяющие вызывать действия через HTTP-запросы, как описано здесь, здесь и здесь.

Это открывает двери для простого и быстрого бессерверного развертывания веб-приложений, включая ваш интерфейс, серверную часть или и то, и другое. Вы даже можете сделать это бесплатно в Bluemix благодаря щедрому бесплатному уровню.

В этой статье я опишу, как развертывать новые и существующие веб-приложения, разработанные с использованием Ember.js. В последующих статьях я расскажу о некоторых других веб-фреймворках Node.js (Angular, React Starter Kit, Express, Meteor или Gatsby).

Итак, давайте начнем с первой установки Ember CLI (если это еще не сделано)

npm install -g ember-cli

и создайте новое веб-приложение

ember new openwhiskdemo
cd openwhiskdemo

Чтобы сделать это немного интереснее, давайте изменим приложение по умолчанию, чтобы оно использовало загрузку так, как это описано здесь, но для целей этой статьи давайте просто добавим navar.

Отредактируйте /app/templates/application.hbs со следующим содержимым.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed"
      data-toggle="collapse" data-target="#menu-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      {{ link-to 'Home' 'index' class="navbar-brand" }}
    </div>
    <div class="collapse navbar-collapse" id="menu-collapse">
      <ul class="nav navbar-nav">
        <li>{{ link-to 'About' 'about' }}</li>
        <li>{{ link-to 'Contact' 'contact' }}</li>
      </ul>
    </div>
  </div>
</nav>
<div class="container">
  {{outlet}}
</div>

и добавьте Bootstrap, используя CDN в /app/index.html.

<!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
    </script>

Давайте проверим, что все работает так, как ожидалось

ember serve

Следующим шагом является упаковка сгенерированных ресурсов в веб-действие OpenWhisk. Это действие отвечает за правильную маршрутизацию HTTP-запросов к ресурсам Ember: /assets/... обслуживает ресурсы, хранящиеся в каталоге assets, а все остальные запросы должны перенаправляться в /index.html. Полный код этого действия доступен здесь. Давайте добавим надстройку Ember для автоматического копирования этих файлов при создании нашего веб-приложения.

ember g in-repo-addon openwhisk

И скопируйте emberjsrouter.js, wsk-package.js и index.js в openwhiskdemo/lib/openwhisk/

Мы почти готовы создать наше готовое к работе веб-приложение. По умолчанию действия OpenWhisk можно вызывать с помощью URL-адреса, имеющего следующую структуру: https://{APIHOST}/api/v1/web/{QUALIFIED ACTION NAME}.[{EXT}] . Корневой URL-адрес Ember необходимо обновить, чтобы отразить это в config/environment.js:

if (environment === ‘production’) {
  ENV.rootURL = ‘/api/v1//web/[email protected]_dev/default/emberdemo’;
}

default/emberdemo соответствует имени действия emberdemo, развернутому в пакете default. [email protected]_dev — это название моей организации и место в Bluemix, и его необходимо заменить вашим собственным именем. Теперь мы можем создать наше веб-приложение.

ember build --prod --output-path prod

и разверните его на OpenWhisk. Если в вашей системе не установлен wsk, прочтите это или это, если у вас есть учетная запись Bluemix.

cd prod
zip -r ember.zip .
wsk action update emberdemo ember.zip --kind nodejs:6 --web yes

Вот и все! Попробуйте в браузере: https://openwhisk.ng.bluemix.net/api/v1/web/[email protected]_dev/default/emberdemo

Напоследок, что нужно учитывать:

  • OpenWhisk добавляет некоторые ограничения. В частности, максимальная полезная нагрузка составляет 1 МБ. В этом примере уменьшенный файл gzip vendor.js весит 200 КБ, но может легко увеличиваться при добавлении внешних зависимостей. Один из способов смягчить этот рост — обслуживать общие библиотеки из CDN (например, bootstrap) и хранить большие активы в ObjectStore.
  • Ищете полупользовательский домен? Пожалуйста прочтите это".
  • emberjsrouter.js находится в разработке. Пожалуйста, сообщайте об ошибках здесь.