VSCodeなどのモダンなエディタでブラウザ上で開発できる開発環境 Red Hat OpenShift Dev Spaces を 無料でもらっちゃおう

## はじめに

本記事でご紹介する [Red Hat Openshift Dev Spaces](https://developers.redhat.com/products/openshift-dev-spaces/overview) を利用すると、VSCode などのモダンなエディタを使用したコーディングやテストなどをブラウザ上で行える開発環境を構築できます。

利用を始めるにあたり、現在 **OpenShiftのクラスタ環境をお持ちでない方でも大丈夫**です。公式サイトに設置されているボタンから、**ものの数分で無料で払い出してくれます**。その実行基盤となる ****OpenShiftクラスタ環境****( [Developer Sandbox](https://developers.redhat.com/developer-sandbox) ) **も無料でもらえます**。

ブラウザ上でエディタも起動できますので、PCだけでなく様々なデバイスからいつでもどこでも利用できます。**自分専用の OpenShiftクラスタと、その上で動作する開発環境を、無料で数分でもらえるなんて、本当にお得ですよね。**

この記事を見つけていただいたのも何かの縁、この機会にもらえるものはもらっておくの精神で自分専用のコンテナ基盤と開発環境をクラウド上に持ってみるのはいかがでしょうか？

学習や、趣味の開発、ちょっとしたデモ用途に良さそうですね。そして本記事はアドベントカレンダーとして投稿もしておりますので、冬休みのテーマとして活用してみるのもおすすめです。

公式サイト:

https://developers.redhat.com/products/openshift-dev-spaces/overview

https://developers.redhat.com/developer-sandbox

公式サイトでは、2分でコーディング作業ができる とうたっているようです(`allow anyone with a browser to contribute code in under two minutes.`)。強気ですね。
初見の作業でも、環境払い出しに10分程度の後、コーディング開始まで数分くらいでしたので、手順を把握してしまえば確かに2分でコーディング開始できそうです。

本記事でご紹介する手順を足がかりに、ぜひ爆速で開発環境を構築してみてください。

## 1. 無料の開発環境 OpenShift Dev Spaces 環境を払い出す (所要時間 : 10分)

[Openshift Dev Spaces Overview | Red Hat Developer](https://developers.redhat.com/products/openshift-dev-spaces/overview) を開きます。
Red Hat アカウントをお持ちで無い場合、作成が必要です。
本記事の最後でご紹介している、おまけの関連記事の手順にて、`Red Hat Enterprise Linux`( RHEL )を16台まで無料で使うこともできますので、この機会に是非Red Hat アカウントを作成いただくことをおすすめします。

`Try Red Hat OpenShift Dev Spaces in our free sandbox` をクリックします。
![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21106/608db451-b200-96cb-fd45-bbaf78e3fca0.png)

[Hosted IDE for Developer Sandbox | Red Hat Developer](https://developers.redhat.com/developer-sandbox/ide) のページに遷移します。
まずは 無料のOpenShiftクラスタである Developer Sandbox を払い出す手順のようですね。
`launch your Che Developer Sandbox for Red Hat Openshift` をクリックします。
![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21106/d681fc46-e6d7-0cfb-be00-fbefd8b9f279.png)

`Confirm your account via activation code` と表示されます。  
アクティベーションコードをもらうために `Phone Verification` をクリックします。
![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21106/43cc6897-6c67-742a-808d-5f1885c6ba3b.png)

`Country Code` は日本の場合 `81` です。
携帯電話の番号を先頭1文字を除去して入力( `0aa-bbbb-cccc` なら `aabbbbcccc` )し、`Send Code` をクリックします。

![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21106/1be9cc23-b7c9-f195-8340-d7d1ec3ec91e.png)

ほどなく、携帯電話にアクティベーションコードの通知メッセージが届きますので入力し、`Verify Code` をクリックします。

![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21106/0fb0db92-5063-9f77-0ec5-405230b3d1f0.png)

しばらくすると`You're ready to get started!` と表示されます。
また、`Notice: Your Developer Sandbox for Red Hat OpenShift account is provisioned` というメールも届きます。

`Start using your Che sandbox` をクリックします。
![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21106/dd5530d1-0ef4-c254-c685-401556315b5e.png)

`Log in with OpenShift` をクリックします。
![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21106/29f0e51b-82a7-cd68-83fd-ab630ec571f7.png)

`DevSandbox` をクリックします。
![08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21106/2d495ff1-55f3-d2e6-afb9-adfa00081b76.png)

利用を許可できる場合`Allow selected permissions` をクリックします。
![09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21106/9eb7baf2-1808-5587-ed8d-1a798d66fb5d.png)

`Red Hat OpenShift Dev Spaces`に遷移します。
Java、NodeJS、Python、Go など様々な言語・フレームワークでアプリケーションの開発ができるようになっているようですね。
例としてVSCodeを使用したPythonプログラムの開発手順を次章でご紹介します。
![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21106/9854a849-b3e4-500d-d15f-86de109d077d.png)

本章では、無料の開発環境 `OpenShift Dev Spaces` を払い出す手順をご紹介しました。ここまで10分程度という感じでしょうか、無料かつサクッと準備できるのは本当にお得ですね。

(ご参考) すでにOpenShiftクラスタをお持ちでその環境を使いたい方は、`Red Hat OpenShift Dev Spaces Operator` をインストールし、Operatorの詳細ページから Dev Spaces のインスタンスを作成後、しばらく待つと Dev Spaces の URLが表示され、利用可能となります。

https://access.redhat.com/documentation/en-us/red_hat_openshift_dev_spaces/3.0/html/administration_guide/installing-devspaces#installing-devspaces-on-openshift-using-the-web-console

続いて、開発環境の使用方法をご紹介していきます！

## 2. VSCodeでPythonプログラムをデバッグしてみる (所要時間 : 5分)

さっそく開発環境を使ってみましょう。ブラウザ上で完結します。
例として プログラミング言語として `Python` 、エディタとして `VSCode` を選択してみます。

`Create Workspace` の画面で `Python` の `︙` をクリックするとエディタを選択できます、`VSCode` をクリックしてみます。
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21106/58dd2a70-bbe5-cbb2-5835-4764005f89c9.png)

環境構築の進行状況が表示されます。
![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21106/4cb35c5c-4d16-3711-eeae-468b104639f1.png)

ブラウザ上でVSCodeが立ち上がりました！
![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21106/b69e148c-e7aa-113d-cbfd-dc21184581e8.png)

サンプルコードが始めから置いてありますね、とっても親切です。
VSCodeは開いているファイルの拡張子からおすすめのExtensionをインストールするか右下のダイアログで聞いてくれますのでインストールしておきます。
![16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21106/725abde7-c2c2-8efb-6b63-2ea28717236d.png)

Extensionのインストールが進行しています。
![17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21106/da2b4e92-c8ff-5be1-a940-10617fded635.png)

Extensionのインストールが完了しました。
![18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21106/2d5d8fa2-1952-2b92-02da-484f35a2a814.png)

`F5`ボタンを押下してプログラムを実行できました。
![19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21106/f37a0b4e-54c7-eae0-e14c-d92f9976ed1a.png)

あらかじめブレークポイントを張っておくと、途中で止めることもできます。
変数の値を見るなどデバッグもできそうですね。
![20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21106/1ef87a58-5d67-5550-507b-c3f208a73fe5.png)

なおVSCodeのGit連携機能の呼び出しや、VSCodeの`TERMINAL`からgitコマンドも使用できますので、コードの commit や push もできます。

また、`Create Workspace` 画面の `Git Repo URL` に GitリポジトリのURLを入力することで既存リポジトリを clone して開発することもできます。
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21106/58dd2a70-bbe5-cbb2-5835-4764005f89c9.png)

なお、ワークスペースを作成すると、`RECENT WORKSPACES`の欄に ワークスペースの一覧が表示されますが、同時実行できる数に制限があるようですので( 私が試したときは同時実行できるのは1つのようでした )、使用しないワークスペースは stop しておくと良さそうです。

本章では、プログラミング言語として `Python` 、エディタとして `VSCode` を例に無料の開発環境 `OpenShift Dev Spaces` を利用する手順をご紹介しました。

いつでもどこでも様々なデバイスからブラウザで開いて開発できるのは本当に便利ですね。

## 3. Developer Sandbox にログインする (所要時間 : 3分)

無料のOpenShiftクラスタである `Developer Sandbox` も払い出されていますので、使ってみましょう。
[Developer Sandbox for Red Hat OpenShift | Red Hat Developer](https://developers.redhat.com/developer-sandbox) を開きます。

`Start using your sandbox` をクリックします。
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21106/e79d704f-c51b-ff7d-f450-081b5879d611.png)

OpenShift の Webコンソールに遷移します。
これで 自分専用の OpenShift クラスタを無料で持てることが確認できました！
![12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21106/9ea6dd61-6267-9e05-2aee-acac9a2db642.png)

右上の `>_` ボタンを押すと ブラウザ上でターミナルも使えます。
`開始` をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21106/c328e271-d425-afbf-e313-40ecc4314e04.png)

ターミナルが表示されました。`help`コマンドで使用可能なコマンドの説明を表示できます。
`oc`、`kubectl`、`kustomize`、`helm`などが使用できるみたいです。
`+`ボタンでタブを増やしたり、`↗`ボタンで全画面表示もできます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21106/f5a80dcb-83c9-3c7c-53c0-d251580849f5.png)

`oc` コマンドも使えますね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/21106/438a8021-da27-8431-8a77-c7d7d6f964b6.png)

本章では、無料のOpenShift環境 `Developer Sandbox for Red Hat OpenShift` の利用手順についてご紹介しました。ちょっとした動作確認やデモに活用できそうですね。

なお環境は 30日間有効で、その後は削除されることにご留意ください。事前案内のメール(`Notice: Your Developer Sandbox for Red Hat OpenShift account will be deactivated soon`)も届きます。
削除された後、また新規環境をサクッと作成できるので、感覚的には実質ずっと使えます。

## まとめ

モダンなエディタでコーディングやテストができる開発環境( [Red Hat Openshift Dev Spaces](https://developers.redhat.com/products/openshift-dev-spaces/overview) ) を無料でもらう手順や、VSCode で開発を始める手順をご紹介しました。無料のOpenShift環境( [Developer Sandbox](https://developers.redhat.com/developer-sandbox) ) ももらえるので本当にお得ですね。

趣味の開発や、学習、ちょっとしたデモ用途に向いてそうですね。いつでもどこからでも様々なデバイスで使えるクラウド上の開発環境を是非ゲットしてみてください。

## (おまけ) 関連記事

RHELを16台まで無料で利用できる記事もございますのでこの機会に是非GETしてみてください！

https://qiita.com/loftkun/items/db33f5f36b4cd29426eb