Visual Studio CodeでOpenShiftクラスタを操作する。

#はじめに
IBM CloudのマネージドサービスであるRed Hat OpenShift on IBMCloudにVisual Studio Codeで接続してみました。IBM Developer Dojo の [OpenShift(Minishift)ワークショップ](https://ibm-developer.connpass.com/) に参加すると利用できるマネージドサービスのOpenShift(約３日間の時間制限あり）を参加してお借りしたので、お礼にアウトプットします。

別にOpenShiftクラスタAPIに接続できればいいので、Azureでも、MiniShiftでも接続できますよ。

簡単に概要はVisual Studio Codeに OpenShift Connector Extensions を追加して、依存関係のkubectl、oc client、OpenShift Do (odo)をインストールすれば環境が整います。

IBM Cloudでは事前に OpenShift Webコンソールか Copy Login Commandを実行して
ログインに必要なトークンを入手してくださいね。

<img width="1013" alt="スクリーンショット 2019-12-13 15.45.13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209170/63308c7a-a2be-ce4b-c7a5-a3477190c542.png">

＊ログインに必要なトークン

```console
oc login https://c100-e.jp-tok.containers.cloud.ibm.com:32044 --token=xxxxxxx
```

# 手順

1.それぞれの環境に合わせてVisual Studio Codeを [ダウンロード](https://code.visualstudio.com/download) してインストールします。

2.Visual Studio Codeを起動します。
<img width="1020" alt="vscode-02.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209170/fa8b7404-87f3-a2f6-9999-bbcfa6c67148.png">
3.左下の歯車マークをクリックして、Extentionsをクリックします。
<img width="296" alt="スクリーンショット 2019-12-13 14.26.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209170/6006d451-837b-423a-181b-e891a0510787.png">
4.「openshift」と入力してExtentionsの絞り込みをし、OpenShift Connector を選択し、Installボタンを押してインストールします。
<img width="1130" alt="スクリーンショット 2019-12-13 13.54.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209170/d7589bf5-b5b4-c755-4e24-1160c96f1865.png">
5.インストールが完了したら、Visual Studio Codeを再起動します(Visual Studio Codeを一回閉じて、再度起動)

6.Visual Studio Code起動後、左下のOpenShiftのマークを押して、上の赤丸の→ボタン(Clusterへのログイン)を押します。
<img width="1083" alt="スクリーンショット 2019-12-13 15.04.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209170/e73a04d4-669f-1f29-b143-9ab8561b4543.png">
7.上記のボタンを押すと依存関係がインストールされていない場合は、右下にインストールを促されるので kubectl、OKD client、OpenShift Do (odo)をインストールしてください。
<img width="466" alt="スクリーンショット 2019-12-13 14.35.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209170/c2a197a3-7d87-1d7d-a07d-e788ce7c4b58.png">
<img width="494" alt="スクリーンショット 2019-12-13 14.02.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209170/e773d55e-85f5-1293-9d06-3f2bdac15d46.png">
8.依存関係のインストールが終わると、上の赤丸の→ボタン(Clusterへのログイン)を押します。
<img width="809" alt="スクリーンショット 2019-12-13 14.39.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209170/2a03a896-4f71-b8ab-9b0b-0fc0eb96aff8.png">
9.IBM CloudのマネージドサービスではToken を選択します。
<img width="1017" alt="スクリーンショット 2019-12-13 14.03.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209170/61083764-c03e-81de-4e27-9c8c24308732.png">
10.OpenShift Webコンソールの Copy Login Commandで取得したURLを入力します。
<img width="1022" alt="スクリーンショット 2019-12-13 14.03.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209170/eb9f8580-442e-a03f-6f9b-cb24de72ef9f.png">
11.OpenShift Webコンソールの Copy Login Commandで取得したToken[ --token=xxx の　xxxの部分]を入力します。
<img width="1021" alt="スクリーンショット 2019-12-13 14.04.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209170/65f2ab5a-3d66-7d75-ceab-f6d775ceb8f1.png">
11.ログインが完了すると接続したクラスタツリーにプロジェクトの一覧が表示されます。クラスタ名を右クリックすると「New Project 」、「Open Console Dashboard」とOpenShiftクラスタを操作できるのが想像できますよね。
<img width="498" alt="スクリーンショット 2019-12-13 15.17.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209170/17baf4a0-405c-ece8-a9ec-0a50d185e6f4.png">
12.「Open Console Dashboard」を押すと  OpenShiftのWebコンソールが表示されました。
<img width="964" alt="スクリーンショット 2019-12-13 14.07.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209170/260d1979-f408-c88e-9af6-7bf0d4dd5a76.png">

# まとめ
今回は、ハンズオンの時間内にVisual Studio CodesでOpenShiftを操作する導入部分のみを書きました。Visual Studio Codeを使ってOpenShiftが操作、開発できるのは便利ですね。

この後の使い方は、Red Hat Developer Blogの下記記事が参考になることでしょう
OpenShift Connector: Visual Studio Code extension for Red Hat OpenShift
https://developers.redhat.com/blog/2019/10/31/openshift-connector-visual-studio-code-extension-for-red-hat-openshift/