OpenShiftを使用した最新のアプリ、パート1:たった2つのコマンドでWebアプリ

新しいS2I(ソースからイメージ)ビルダーイメージを使用して、ReactやAngularなどの最新のWebアプリRed HatOpenShiftにデプロイする方法を紹介する一連の投稿を開始します







この一連の投稿の内容:



  • 1: - ;
  • 2: S2I HTTP-, NGINX, OpenShift -;
  • 3: OpenShift .




まず、OpenShiftをインストールする必要があります。ミニシフトを使用します。これにより、Windows、Mac、またはLinuxコンピューターの仮想マシンでOpenShiftを実行できます。ミニシフトを手に入れるには、Red Hat Container Development Kit(CDK)ダウンロードし、の手順に従ってインストールして実行します。詳細については、CDKのドキュメントおよびOKD.ioサイトのドキュメントを参照してください



minishiftを起動したら、ログインしてプロジェクトを構成する必要があります。これは、次の2つのコマンドで実行できます。



$ oc login

$ oc new-project web-apps


これは、Node.js8以降とnpm5.2以降がすでにインストールされていることを前提としています。



このような2つの魔法のコマンドが何であるかを知るためだけにこの記事を開いた場合は、最後の部分にスキップしてください。それ以外の場合は、テキストに沿ってさらに進んでください!



最新のWebアプリケーションとは何ですか?



まず、「最新のWebアプリケーション」の意味と、いわゆる「純粋な」Node.jsアプリケーションとの違いを判断する必要があります。



私たちにとって、最新のWebアプリケーションは、静的HTML、JavaScript、およびCSSを生成するビルドステップを備えたReact、Angular、Emberのようなものです。ビルドフェーズでは、通常、連結、トランスピレーション(BabelまたはTypescript)、ファイルの最小化など、いくつかのタスクが実行されます。主要なフレームワークにはそれぞれ独自のビルドプロセスとパイプラインがありますが、Webpack、Grunt、Gulpなどのツールもこのカテゴリに分類されます。そして、これらのツールはすべてNode.jsを使用してビルドプロセスを実行します。



ただし、この段階で生成(コンパイル)された静的コンテンツは、それを提供するために必ずしもノードプロセスを必要としません。はい、ここserveモジュールのようなものを使用できます。これは、サイトがどのように見えるかをすばやく確認できるため、開発に最適です。ただし、実稼働環境では、通常、NGINXやApache HTTPServerなどを使用することをお勧めします。



一方、「純粋な」ノードアプリケーションは、Node.jsプロセスを使用して起動し、Express.jsアプリケーション(つまり、REST APIサーバー)のようなものにすることができます。通常、ビルドステップはありません(はい)。はい、Typescriptを認識しています)。開発の依存関係は、アプリケーションの実行に使用される依存関係のみが必要なため、通常はインストールされません。



たとえば、Node.js S2Iイメージを使用して、OpenShiftに「純粋な」ノードアプリケーションをデプロイする方法については、こちらをご覧ください



OpenShiftへのWebアプリケーションのデプロイ



最新のWebアプリとNode.jsアプリの違いについて概説したので、WebアプリをOpenShiftに実際にデプロイする方法を示しましょう。



ここでは、Reactアプリと最新のAngularアプリの両方をデプロイします。これらのプロジェクトは両方とも、適切なCLIツールであるcreate-react-appとを使用してかなり迅速に作成できます。角度/ cli。これは、この記事のタイトルに表示される2つのコマンドの1つになります。



Reactアプリ



create-react-appがすでにグローバルにインストールされている場合は、すばらしいです。そうでない場合は、次のようにnpxを使用して適切なコマンドを実行します。



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


注:npxは、npm 5.2+に含まれている1回限りのコマンドランナーです。詳細については、こちらを参照してください



このコマンドは新しいReactアプリを作成し、画面に次のようなものが表示されます。







新しく作成されたプロジェクトディレクトリにいると仮定すると、2番目のコマンドを実行してアプリケーションをOpenShiftにデプロイできます。



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


これで、OpenShiftコンソールは次のようになります。







そして、これはアプリケーションを起動した後のWebコンソールです。







Angularアプリに移る前に、最後のコマンドが何をするかを見てみましょう。



npx nodeshiftから始まります。ここでは、npxを使用しnodeshiftモジュールを実行します。これにより、ノードアプリケーションをOpenShiftに簡単にデプロイできます。



次に、nodeshiftに渡されるオプションを分析してみましょう。 1つ目は--strictSSL = falseです。



ミニシフトがあり、自己署名証明書を使用しているため、セキュリティエラーが発生しないように、ノードシフトにこれを通知する必要があります(実際、これは内部に隠されたリクエストライブラリに通知します)。



次に、長いオプション--dockerImage = nodeshift / ubi8-s2i-web-app --imageTag = 10.xがあります。彼女は、新しい使用するnodeshift伝えWebアプリケーションビルダの画像を10.xのタグで。



ここで、Yarnを使用することをS2Iイメージに伝えます。-build.envYARN_ENABLED= true。最後に、-exposeフラグは、アプリケーションへのWebアクセス可能なURLを取得できるように、nodeshiftにOpenShiftルートを作成するように指示します。



これはOpenShiftFast Trackシリーズの記事であるため、ここでのS2Iイメージは、生成された静的ファイルを提供するためにserveモジュール使用します。次の投稿では、これと同じS2IイメージをNGINXで使用する方法を示します。



Angularアプリ



それでは、Angularアプリを作成しましょう。最初のステップは、AngularCLIを使用して新しいアプリケーションを作成することです。繰り返しますが、グローバルにインストールしていない場合は、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の場合と同様に、OpenShiftWebコンソールは次のようになります。







そして、これはそれぞれ、アプリケーションを起動したときのWebコンソールです。







それでは、デプロイメントコマンドを見てみましょう。Reactと非常に似ていますが、重要な違いがあります。



違いはbuild.envフラグにあります。Angularの場合は--build.envOUTPUT_DIR = dist / angle-web-appと記述し、ここには2つのポイントがあります。



まず、Angularプロジェクトでyarnを使用していないため、YARN_ENABLED変数を削除しました。



次に、OUTPUT_DIR = dist / angular-web-app変数を追加しました。したがって、S2Iイメージは、デフォルトでビルドディレクトリでコンパイルされたコードを検索します。Reactはデフォルトでビルドを使用するため、前の例ではこのパラメーターを構成しませんでした。しかし、Angularはコンパイルされた出力に他のものを使用します。したがって、この場合のist / <PROJECT_NAME>パラメーターはdist / angular-web-appと等しいと記述します。



結論



上記の例の解析をスキップして、記事の最初からここに移動した人のために、展開が実行される2つのコマンドを示します



。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


角度:



$ 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


追加リソース



今日は、新しいS2I Web App Builderイメージを使用して、OpenShiftに最新のWebアプリケーションをすばやく簡単にデプロイする方法を説明しました。この例では、このイメージのコミュニティバージョンを使用していますが、RedHatはすでにRedHat Openshift Application Runtime(RHOAR)をリリースしているため、注意してください。



次の投稿では、OpenShiftビルドチェーンを使用して本番環境の展開を整理し、NGINXなどの既存のHTTPサーバーイメージとともに新しいS2Iイメージを使用する方法を示します。



このシリーズの第3部では、OpenShiftプラットフォームでアプリケーションの開発ワークフローを編成する方法に焦点を当てます。



また、無料の電子書籍「OpenShiftへの展開」をダウンロードして確認することをお勧めします



All Articles