Skip to content
main
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 

0. 事前準備

  1. IBM Cloudライトアカウント作成 ※3分程度のビデオによるアカウント取得方法はこちらで公開しています。
  2. GitHubアカウント作成(参考URL: GitHubアカウントの作成方法 (2021年版))

免責

本ハンズオンワークショップではOpenShiftのクラスタを利用します。 これは、みなさまのIBM Cloudのライトアカウント(クレジットカード不要)に、IBMが準備した作成済みOpenShiftクラスタを持つ別のアカウントを紐付けた上でOpehShiftを利用します。 ですので、こちらに記載の手順に従ってお試し頂く中では課金は一切発生いたしません。 ですが、従量課金制のIBM Cloudアカウント(PAYGやサブスクリプション)上にOpenShiftのクラスタを作成したり、有償のサービスを作成したりした場合は課金が発生いたします。 万が一、ご自身のIBM Cloudアカウント(PAYGやサブスクリプション)に対してクラスタを作成するなどして課金が発生した場合、IBM及び本ワークショップの講師は責任を負いかねますので、十分ご注意の上実施下さい。

OpenShiftへのいろいろな入力パターン

本ハンズオンワークショップではこの中からSource to Image (S2I) を試します。

ハンズオンワークショップの流れ

  1. OpenShift環境の準備
  2. ソースコードのFork
  3. アプリケーションのDeploy
  4. Webhookの設定
  5. ソースコードの修正及びDeploy(⾃動)

1. OpenShift環境の準備

ワークショップ⽤のIBM Cloud環境にご⾃⾝のIBM Cloud IDを関連付けます。

注意事項

・ブラウザはFirefox, Chromeをご利⽤ください
・本ワークショップ⽤のIBM Cloud環境はセミナー開催時から24時間限定でお使いいただけます

1.1 下記URLにFirefoxブラウザでアクセス

ワークショップの場合 講師よりアクセス先をご案内いたします。下記はサンプルURLとなります。

https://xxxxxx.mybluemix.net/

1.2 ハンズオン環境へSubmit

[Lab Key] 、[Your IBMid]にご⾃⾝のIDを⼊⼒し、チェックボックスにチェックを⼊れて[Submit]をクリックします。

1.3 IBM Cloudダッシュボードの起動

Congratulations! が表⽰されたら、指定したIBMid宛に送られるメールを確認します。
※必要に応じて、IBM Cloud (no-reply@cloud.ibm.com) からのメールを受信できるように、ご使用されているメーラー設定などを行ってください。
メール本文にある[Join now.]のリンクをクリックします。

その後IBM Cloudへアカウントを紐付けるための画面が表示されるので、[アカウントに参加]ボタンをクリックします。

自動でIBM Cloudへログインされます。ログインされない場合は https://cloud.ibm.com へアクセスして手動でログインして下さい。

1.4 アカウントの切り替え

IBM Cloudダッシュボードにログインしたら、右上のアカウント情報の右横の「v」をクリックして、ワークショップ用のアカウントへ切り替えます。
[1840867 – Advowork] のような「数字の羅列 - Advowork」がワークショップ用に準備されたアカウントです。 (数字部分は自動的に割り当てられます)
※このアカウントは1日程度で無効になる一時的なアカウントです。

1.5 OpenShiftクラスタへのアクセス

IBM Cloudダッシュボードの右上のアカウント情報が変更されたことを確認し、[リソースの要約]の[Clusters]をクリックします。

Clustersの下のクラスター名をクリックします。 (クラスター名は⾃動的に割り当てられます)

1.6 OpenShift Webコンソールの起動

[OpenShift Webコンソール]ボタンをクリックします。
※ポップアップが制御されていると動作しませんので解除してください。

新しいウィンドウ(またはタブ)でOpenShiftのコンソールが開けばOKです。アクセスするURLはポート30000番台(⾃動で割り当てられます)を使っているので、社内プロキシなどで制限している場合はポートを開いておいてください。
Webコンソールは、通常以下のようなURLでリダイレクトされます。 https://c100-e.jp-tok.containers.cloud.ibm.com:31379/

これでOpenShiftワークショップの環境準備は完了です。

2. ソースコードのFork

ここからはGitHubへアクセスして自分のリポジトリへサンプルソースコードをForkしていきます。

2.1 GitHubへのサインイン

GitHubにサインイン(Sign in)してください。まだアカウント登録されていない方はこちらからサインアップ(Sign up)してください。

2.2 リポジトリーのFork

ブラウザーでhttps://github.com/osonoi/node-build-config-openshiftを開いてください。
[Fork]ボタンをクリックして、自分のアカウントを選択してください。

2.3 自分のリポジトリーの確認

Forkする際に指定した自分のリポジトリーへ、対象のプロジェクトがForkされたことを確認します。
リポジトリーのパスの最初の部分が自分のGitHubアカウントになっていればOKです。

3. アプリケーションのDeploy

ここからは、先程用意したOpenShiftの環境へ、自分のGitHubリポジトリーにあるアプリケーションをデプロイします。

3.1 OpenShift Projectの作成

OpenShiftのWebコンソールへ戻り、[プロジェクト]ボタンをクリックします。
その後[Projectの作成]ボタンをクリックするとCreate Project画面が開きますので、任意のプロジェクト名を入力し[Create]ボタンをクリックしてください。
なお、Nameにはすべて小文字をお使いください。

3.2 OpenShiftユーザータイプの切り替え

左上のメニューにて、[管理者]から[Developer]に切り替えます。
切り替えたら[ソース:Git]をクリックしてください。

3.3 デプロイするアプリケーションのソースコードを指定

先ほどコピーした、自分のGitHubリポジトリーのURLを[GitリポジトリーURL]に入力します。
下の[詳細のGitオプションの表示]をクリックすると入力エリアが展開するので、[コンテキストディレクトリー]に「/site」と入力してください。

3.4 デプロイするアプリケーションのタイプを選択

言語やタイプの一覧がタイルで表示され、Node.jsが選択されていることを確認します。今回GitHubリポジトリーへForkしたプロジェクトはNode.jsアプリケーションだからです。
選択したら最下段の[作成]ボタンをクリックしてください。(他のオプションはすべてデフォルトで構いません)

3.5 アプリケーションのデプロイ

アプリケーションのデプロイが始まります。1分弱お待ちください。中の丸が青くなったら完成です。丸の中をクリックすると右側にメニューが出てくるので[Routes]の下のURLをクリックするとWebへ公開されたアプリケーションへアクセスできます。

3.6 アプリケーションへのアクセス

デプロイされ、Webへ公開されたアプリケーションへアクセスできました。
実際にこのアプリケーションへログインしてみましょう。ID,Passwordともに「test」と入れてログインしてください。
医療関連のデータを管理するサンプルアプリケーションへログインできたかと思います。

ここまでで、GitHub上のソースコードをダイレクトにOpenShiftへデプロイする方法を学びました。

4. Webhookの設定

ここでは、GitHub上のソースコードが変更された際に、自動的にOpenShiftへデプロイされるようにWebhookをGitHub上へ設定していきたいと思います。

4.1 OpenShiftのWebhook URLの取得

OpenShiftのWebコンソールへアクセスします。左側のメニューから[ビルド]を選択し、右側のワークスペースに表示される[node-build-config-openshift]をクリックします。

下にスクロールして一番右の[Copy URL with Secret]をクリックしてWebhookのURLとSecretをクリップボードにコピーしてください。

4.2 GitHubにWebhookを設定

GitHubの自分のリポジトリーへ戻り、[Settings] -> [Webhooks] -> [Add webhook]を選択します。

先ほどクリップボードにコピーしたURL+secretを[Payload URL]に貼り付けてください。[Control type]は[application/json]を選択してください。

入力後、[Add webhook]を選択します。
以下の図の様に緑のチェックマークが付いたら設定成功です。(チェックマークが表示されない場合はページを再読み込みしてください。)

これでwebhookの設定は完了です。後はソースコードの修正で自動的にアプリケーションがデプロイされます。

5. ソースコードの修正及びDeploy(自動)

最後に、GitHub上のソースコードを修正し、それが自動でOpenShiftへ反映されることを試していきます。

5.1 ソースコードの修正

GitHubの自分のリポジトリ画面から[Site]フォルダーを選択します。

[public]フォルダ配下の[index.html]を選択しペンのアイコンをクリックして編集モードにします。
ここでは、GitHubのGUIから編集を行いますが、ローカルにcloneして編集したファイルをcommit、pushしてもOKです。

変更点をクイックに確認するために、ここでは23行目の英文「Example Health」を日本語の「医療管理」に変更してみます。
変更したらコミットしてください。自分所有のリポジトリーなので、そのまま反映されます。

OpenShiftのWebコンソールへ戻り、左側の[トポロジー]を確認すると、再度デプロイがおこなわれていることが分かります。

再デプロイが完了したらデプロイしたアプリケーションを起動し直してください。(既に表示されている場合はリロードしてください)
アプリケーション内にある見出しが「Example Health」から「医療管理」に変更されたことが確認できました。

お疲れさまでした!これで、OpenShiftのS2Iを使ったハンズオンワークショップは完了です。

その他のアプリケーション

もし、PHPのサンプルアプリケーションで試してみたい方は下記のリポジトリーのソースコードを試してみてください。 https://github.com/osonoi/php-s2i-openshift

About

No description, website, or topics provided.

Resources

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •