[Open source, Openshift, Виртуализация, Разработка под Linux] Современные приложения на OpenShift, часть 1: веб-приложения всего за две команды
Автор
Сообщение
news_bot ®
Стаж: 6 лет 9 месяцев
Сообщений: 27286
Мы начинаем серию постов, в которой покажем, как развертывать на 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.
===========
Источник:
habr.com
===========
Похожие новости:
- [Open source, Децентрализованные сети, Информационная безопасность, Криптография, Сетевые технологии] Почему я использую Matrix вместо Telegram
- [Angular, CSS, HTML, Работа с векторной графикой] Нативный способ покрасить SVG-иконки
- [ReactJS, Лайфхаки для гиков, Облачные сервисы, Программирование] 10 инструментов для повышения продуктивности React-девелоперов в 2020 году (перевод)
- [ReactJS] Работа со строкой запроса в React
- [Angular, Разработка веб-сайтов] Ленивая подгрузка переводов с Angular
- [Git, IT-компании, Open source] Microsoft выпустила утилиту ProcMon (Process Monitor) для Linux
- [Dart, Flutter, Разработка мобильных приложений] Сервис на языке Dart: введение, инфраструктура бэкэнд
- [Angular, ReactJS, VueJS] Angular vs React vs Vue 2020
- [JavaScript, ReactJS, Разработка веб-сайтов] Debouncing с помощью React Hooks: хук для функций
- [OpenStreetMap, Геоинформационные сервисы, Интервью, Работа с 3D-графикой, Разработка игр] Роман Шувалов: «Мне пришла в голову идея — сделать трехмерный рендер карты OpenStreetMap»
Теги для поиска: #_open_source, #_openshift, #_virtualizatsija (Виртуализация), #_razrabotka_pod_linux (Разработка под Linux), #_red_hat, #_open_source, #_openshift, #_react, #_angular, #_nginx, #_ember, #_nodeshift, #_minishift, #_blog_kompanii_red_hat (
Блог компании Red Hat
), #_open_source, #_openshift, #_virtualizatsija (
Виртуализация
), #_razrabotka_pod_linux (
Разработка под Linux
)
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 13:26
Часовой пояс: UTC + 5
| Автор | Сообщение |
|---|---|
|
news_bot ®
Стаж: 6 лет 9 месяцев |
|
|
Мы начинаем серию постов, в которой покажем, как развертывать на Red Hat OpenShift современные веб-приложения, такие как React или Angular, с помощью нового builder-образа S2I (source-to-image).  Что будет в этой серии постов:
Подготовительные действия Прежде всего, нам понадобится установленный 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. =========== Источник: habr.com =========== Похожие новости:
Блог компании Red Hat ), #_open_source, #_openshift, #_virtualizatsija ( Виртуализация ), #_razrabotka_pod_linux ( Разработка под Linux ) |
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 13:26
Часовой пояс: UTC + 5