LoginSignup
5
3

More than 3 years have passed since last update.

@takusonix(拓弥 有馬)

[初心者向け] IBM Cloud で無料のKubernetesを活用してアプリ(Node.JS)を公開する

Last updated at Posted at 2020-11-02

IBM Cloud で無料のKubernetesを活用してアプリ(Node.JS)を公開する

IBM Cloud のアカウント取得

IBM Cloudのアカウントを所持されてない場合は、こちらの記事を参考にアカウントを作成してください。
所要時間数分で、メールアドレス一つで、どなたでも簡単に登録することができます。
『「IBM Cloudをはじめました」無料ではじめられるライト・アカウント登録方法』

Kuernetes Serviceの作成

リソースの作成

IBM Cloudのログイン画面後のダッシュボード画面で、右上のリソース作成を選択します。
image.png

Kuernetes Serviceの選択

リソースの「カタログ検索....」に「kubernetes」を入力します。
image.png

検索結果の一覧から「Kuberenetes Service」を選択します。
image.png

無料プランの選択

プラン選択で標準から、「無料」に変更します。
image.png

クラスタの作成

クラスター名やリソースグループを確認し右下の「作成」ボタンを押します。
（クラスター名の変更や、リソースグループの変更は任意で行ってください。）
image.png

Kuberenetes Serviceがプロビジョニングされるまで少し時間を要します。
image.png

Container Registoryの作成

レジストリーの画面へ遷移

右上の「クラスター」のリンクを選択します。
image.png

左のメニューから「レジストリー」を選択します。
image.png

名前空間(Namespace)の作成

ロケーションを確認し、「名前空間」のタブを選択してください。
（ロケーションの変更は任意で行ってください。）
image.png

右側の「作成」ボタンを選択します。
image.png

名前空間の名前を設定し、「作成」ボタンを選択します。
image.png

正常に作成ができた場合、右上に通知が表示されます。
image.png

Kubernetes Serviceの続き

クラスターの画面に遷移

左側のメニューから「クラスター」を選択します。
image.png

クラスターの作成完了

状態が「正常」になったら作成が完了です。
image.png

レコードを選択すると、Kubernetes Serivceのクラスター画面に戻ります。
これで、Kubernetesが無料で使えるようになりました。
image.png

クラスターへのアクセス

左側のメニューから「アクセス」を選択します。
image.png

クラスターのアクセス情報

赤枠の情報にしたがってクラスターにアクセスすることが可能です。
情報がよく分からなくてもご安心ください。
ツールチェーンの作成により、この情報を意識せずにビルドやデプロイの自動化が可能です。
イメージはJenkinsと似ています。
image.png

ツールチェーンの作成

ツールチェーンの有効化

「ツールチェーンの有効化」を選択します。
image.png

テンプレートの選択

様々なテンプレートが用意されていますが、「Kubernetes アプリの開発」テンプレートを選択します。
自分で、詳細に設定したい場合は「Build your onwツールチェーン」で細かく指定することも可能です。
image.png

リージョンとGitリポジトリの設定

リージョンと、Gitリポジトリーの情報を設定します。
「このリポジトリーをプライベート・リポジトリーにする」を選択すると非公開のリポジトリーが作成されます。
（任意でGitリポジトリーの方法を変更することも可能です。）
設定が終わったら、「作成」ボタンを押します。
image.png

Key Protectの設定

IBM Cloud APIキーの「作成」ボタンを選択します。
image.png

Key Protectの作成

キー情報を設定し、「OK」ボタンを選択します。
（再使用のために秘密ストアに保持、サービス名を設定しました。）
image.png

Delivery Pipelineの設定

IBM Cloud APIキーの項目が自動的に設定されます。
Container Registryの情報に、上記で作成したレジストリーのリージョンと名前空間を設定します。
クラスターの情報も自動的に設定されます。
設定が終わったら、「作成」ボタンを選択します。
image.png

ツールチェーンが構成が始まります。
image.png

サンプルアプリ（Node.JS）をKubernetesにデプロイ

ツールチェーンから「Delivery Pipeline」を選択します。
image.png

ビルドから、Container Imageの作成、KubernetesのDeployがすべて自動で進んでいきます。
image.png

Kubernetes Serviceのアプリにアクセス

すべて成功したら、Check healthを選択してください。
image.png

ログの下の方に「API_URL」が出力されている箇所があるので、URLのリンクを選択します。
image.png

サンプルアプリケーションが表示されます。
image.png

サンプルアプリケーションにAPIの追加

サンプルアプリケーションに「/hello」のAPIを追加する手順です。

ツールチェーンに遷移

Deploy結果Check healthのログのタブに戻り、右上の「ツールチェーン」を選択します。
image.png

エディターの起動

ツールチェーン一覧から、Orion Web IDEを選択します。
image.png

app.jsを開く

app.jsを選択します。
image.png

編集画面が表示されます。
image.png

hello APIの追加

31行目にAPIをコーディングします。


app.get('/hello', function(req, res) {
    res.send("Hello World.");
});

image.png

app.jsの保存

左上のメニューから「ファイル」> 「保存」を選択し、編集結果をファイルに保存します。
image.png

GitにCommit

左側のサブメニューからGitを選択します。
image.png

変更内容を確認し、コミットメッセージを記入して、右上の「コミット」ボタンを選択します。
image.png

masterにPush

赤枠の「プッシュ」を選択し、masterブランチにプッシュします。
image.png

Pushが成功すると、画面下部に通知が表示されます。
image.png

ツールチェーンに戻る

左側のサブメニューからツールチェーンに戻ります。
image.png

Delivery Pipelineの選択

構成一覧から、「Delivery Pipeline」を選択します。
image.png

反映の確認

先ほどと同様に、ビルド・イメージ作成・デプロイの作成が自動的に実行されます。
image.png
すべて成功したら、「Check health」を選択します。
image.png
API_URLのリンクを選択します。
image.png
アプリの表示を確認します。
image.png

APIの確認

URLに「/hello」を入力して追加したhello APIにアクセスします。
image.png

次のステップ

hello APIの修正手順と同様にWEB IDEで開発を続けていくことも可能ですが、
使い慣れた方法で、GitにPushしていくことも可能です。

Gitリポジトリーにアクセス

ツールチェーンより Gitを選択します。
image.png
右側のCloneからソースをCloneすることが可能です。
image.png
ソースをmasterにPushすると、Delivery Pipeが自動で回ってKubernetesにデプロイされます。

その他

途中で、ブラウザを閉じてしまった場合、IBM Cloudにログイン後ダッシュボードからアクセス可能です。

リソース一覧表示

右上の「すべて表示」を選択します。
image.png
image.png

5
3
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
3