Современные приложения на OpenShift, часть 1: веб-приложения всего за две команды

    Мы начинаем серию постов, в которой покажем, как развертывать на Red Hat OpenShift современные веб-приложения, такие как React или Angular, с помощью нового builder-образа S2I (source-to-image).



    Что будет в этой серии постов:

    • Часть 1: как развертывать современные веб-приложения всего за несколько шагов;
    • Часть 2: как применять новый образ S2I вместе с уже имеющимся образом HTTP-сервера, например NGINX, используя цепочку сборки OpenShift для организации продакшн-развертывания;
    • Часть 3: как запустить для своего приложения сервер разработки на платформе OpenShift и синхронизировать его с локальной файловой системой.

    Подготовительные действия


    Прежде всего, нам понадобится установленный OpenShift. Мы будем использовать minishift, который позволяет запускать OpenShift в виртуальной машине на компьютерах Windows, Mac или Linux. Чтобы раздобыть minishift, скачайте Red Hat Container Development Kit (CDK) и выполните эти инструкции по его установке и запуску. Дополнительную информацию можно найти в документации по CDK и в документации на сайте OKD.io.

    После того, как minishift будет запущен, нужно войти в систему и настроить проект, что делается всего в две команды:

    $ oc login
    
    $ oc new-project web-apps
    

    Здесь предполагается, что у вас уже установлены Node.js 8+ и npm 5.2+.

    Если вы открыли эту статью, только чтобы узнать, что это за две такие волшебные команды, переходите к заключительной части. В противном случае идем дальше по тексту!

    Что такое современное веб-приложение?


    Прежде всего, надо определиться, что мы понимаем под «современным веб-приложением» и чем оно отличается от так называемого «чистого» приложения Node.js.

    Для нас современное веб-приложение – это что-то типа React, Angular или Ember, где есть этап сборки, на котором генерируется статический HTML, JavaScript и CSS. На этапе сборки обычно выполняется несколько задач, таких как конкатенация, транспиляция (Babel или Typescript) и минификация файлов. У каждого из основных фреймворков есть свой процесс сборки и конвейер, но к этой категории также относятся и инструменты наподобие Webpack, Grunt и Gulp. И все эти инструменты используют Node.js для запуска процессов сборки.

    Однако для генерируемого (компилируемого) на этом этапе статического контента не обязательно нужен node-процесс, который бы его обслуживал. Да, здесь можно использовать что-то типа serve module, который отлично подходит для разработки, поскольку позволяет быстро посмотреть, как выглядит сайт. Но при продакшн-развертывании обычно рекомендуется применять что-то вроде NGINX или Apache HTTP Server.

    С другой стороны, «чистое» node-приложение будет использовать процесс Node.js для запуска и может представлять из себя что-то вроде приложения Express.js (т.е. сервер REST API) – обычно у него нет этапа сборки (да-да, мы в курсе про Typescript). Development-зависимости обычно не устанавливаются, поскольку нам нужны только те из них, которые используются для запуска приложения.

    Почитать о том, как развертывать «чистое» node-приложение на OpenShift с помощью нашего образа Node.js S2I, можно, например, здесь.

    Развертывание веб-приложения на OpenShift


    Теперь, когда мы обозначили разницу между современным веб-приложением и приложением Node.js, покажем, как, собственно, развернуть наше веб-приложение на OpenShift.

    Здесь мы будем развертывать как приложение React, так современное приложение Angular. Оба этих проекта можно довольно быстро создать с помощью соответствующих CLI- инструментов: create-react-app и angular/cli. Это и будет одна из тех двух команд, что фигурируют в заголовке этой статьи.

    Приложение React


    Если create-react-app уже установлен у вас глобально – отлично. Если нет, то просто запустите соответствующую команду с помощью npx, вот так:

    $ npx create-react-app react-web-app
    

    Примечание: npx – это инструмент для запуска единоразовых команд, который входит в состав npm 5.2+, подробнее см. здесь.

    Эта команда создаст новое приложение React, и вы увидите на экране примерно следующее:



    При условии, что вы находитесь в только что созданном каталоге проекта, можно запустить и вторую команду, чтобы развернуть наше приложение на OpenShift:

    $ npx nodeshift --strictSSL=false --dockerImage=nodeshift/ubi8-s2i-web-app --imageTag=10.x --build.env YARN_ENABLED=true --expose
    

    Теперь консоль OpenShift будет выглядеть примерно так:



    А это веб-консоль после запуска приложения:



    Прежде чем перейдем к приложению Angular, давайте посмотрим, что делает наша последняя команда.

    Она начинается с npx nodeshift – здесь мы с помощью npx запускаем модуль nodeshift, который упрощает развертывание node-приложений на OpenShift.

    Теперь разберем опции, которые передаются nodeshift. Первая из них --strictSSL=false.

    Поскольку у нас minishift, и он использует самоподписанный сертификат, нам надо сообщить это nodeshift, чтобы не было ошибок безопасности (на самом деле мы говорим это спрятанной под капотом библиотеке запросов).

    Далее идет длинная опция --dockerImage=nodeshift/ubi8-s2i-web-app --imageTag=10.x. Она говорит nodeshift использовать новый образ Web App Builder с тегом 10.x.

    Теперь говорим S2I-образу, что хотим использовать yarn: --build.env YARN_ENABLED=true. И наконец, флаг --expose сообщает nodeshift, что нужно создать для нас маршрут OpenShift, чтобы мы могли получить доступный из интернета URL на наше приложение.

    Поскольку это статья из серии «OpenShift по-быстрому», S2I-образ здесь использует serve module для обслуживания сгенерированных статических файлов. В следующем посте мы покажем, как использовать этот же образ S2I вместе с NGINX.

    Приложение Angular


    Теперь создадим приложение Angular. Первым делом надо создать наше новое приложение, используя Angular CLI. Повторимся, но если он не установлен у вас глобально, его можно запустить с помощью npx:

    $ npx @angular/cli new angular-web-app
    

    Эта команда создаст новый проект Angular, а нам, как и в случае с приложением React, затем останется лишь запустить еще одну команду для его развертывания:

    $ npx nodeshift --strictSSL=false --dockerImage=nodeshift/ubi8-s2i-web-app --imageTag=10.x --build.env OUTPUT_DIR=dist/angular-web-app --expose
    

    Подобно кейсу React, веб-консоль OpenShift будет выглядеть примерно так:



    А это, соответственно, веб-консоль, когда вы запускаете приложение:



    Теперь разберем команду развертывания. Она очень похожа на React, но есть важные различия.

    Различия заключаются в флаге build.env: для Angular мы пишем --build.env OUTPUT_DIR=dist/angular-web-app, и здесь есть два момента.

    Первое, мы убрали переменную YARN_ENABLED, поскольку не используем yarn для нашего Angular-проекта.

    Второе, мы добавили переменную OUTPUT_DIR=dist/angular-web-app. Поэтому S2I-образ будет по умолчанию искать ваш скомпилированный код в каталоге build. React использует build по умолчанию, поэтому мы не настраивали этот параметр в предыдущем примере. Но Angular использует для своего скомпилированного вывода другие вещи. Поэтому мы пишем, что параметр ist/<PROJECT_NAME> в нашем случае равен dist/angular-web-app.

    Заключение


    Для тех, кто пропустил разборы примеров выше и перешел сюда прямо из начала статьи, показываем те две команды, с помощью которых выполняется развертывание:

    React:

    $ npx create-react-app react-web-app
    
    $ npx nodeshift --strictSSL=false --dockerImage=nodeshift/ubi8-s2i-web-app --imageTag=10.x --build.env YARN_ENABLED=true --expose
    

    Angular:

    $ npx @angular/cli new angular-web-app
    
    $ npx nodeshift --strictSSL=false --dockerImage=nodeshift/ubi8-s2i-web-app --imageTag=10.x --build.env OUTPUT_DIR=dist/angular-web-app --expose
    

    Дополнительные ресурсы


    Сегодня вы увидели, как быстро и без лишних усилий развернуть современное веб-приложение на OpenShift, используя новый образ S2I Web App Builder. В наших примерах используется community-версия этого образа, однако Red Hat уже выпустила Red Hat Openshift Application Runtime (RHOAR), так что будьте внимательны.

    В следующем посте мы покажем, как применять новый образ S2I вместе с уже имеющимся образом HTTP-сервера, например NGINX, используя цепочку сборки OpenShift для организации продакшн-развертывания.

    Третья часть из этой серии будет посвящена тому, как организовать для приложения рабочий процесс «development workflow» на платформе OpenShift.

    Также рекомендуем загрузить и ознакомиться с бесплатной электронной книгой Deploying to OpenShift.
    Red Hat
    Программные решения с открытым исходным кодом

    Комментарии 0

    Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

    Самое читаемое