Gitpod は vscode extend Remote-Containers とは違う

Vscode の拡張機能 Remote-Containers を使用した開発環境を作成とGitpodを使用した開発環境の作成を行います。

Remote-Containers について
===========================
VS Code からDockerコンテナを開発環境として使用できるようにします。
これにより、コンテナ上から Visual Studio Codeを利用することができます。

ワークスペースのファイルは、ローカルファイルシステムからマウントされるか、コンテナにコピーされ、異なるコンテナに接続するだけで、開発環境全体をシームレスに切り替えることができます。

- 公式ドキュメントは以下 

https://code.visualstudio.com/docs/remote/containers

- 構成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1597898/d8871714-275e-4ab8-f635-0cc971c50fe1.png)

インストール準備
====

1.ローカルPC に VS code をインストール

https://code.visualstudio.com/

2.インストール後、VScodeの拡張機能から Remote-Containers をインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1597898/645d86f5-0a6e-b5ba-59c0-45f857008bd4.png)

3.Docker-desktop のインストーラをダウンロード

https://www.docker.com/products/docker-desktop/

MicroSoft サンプルコードから試す
====
まずは、以下のサンプルコードを使用して、```Remote-Containers``` で起動したコンテナの vscode を開きます。以下GitHubのサンプルコードをダウンロードしてファイルを展開します。

https://github.com/microsoft/vscode-remote-try-node

VScode を開き、ワークスペースへ展開したサンプルコードを追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1597898/a0188f0f-42d5-5163-38de-aee8199ac4ba.png)

左下にある、```><``` ボタンをクリックし、コマンドパレットから ```Remote in Container``` を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1597898/456f05ff-2ede-71ba-42a7-70fb9762941c.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1597898/c281a71b-c9a0-e921-95f9-57835a8504d5.png)

イメージの```Build```が開始されます。初回は少し時間が掛かります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1597898/8d1c14fc-1a1e-2ace-b244-b8d79b8bfaad.png)

Buildが完了すると、```docker run``` が実行されます。
Docker-Desktop からも起動が確認出来ます。
VScode の ```><``` が ```Dev container``` に切り変わります。
また、ローカル端末が Windows の場合、```Powershell```を使用されているかと思いますので、ターミナルを表示した際に、```bash``` が表示されます。
この状態から ```Remote-Containers``` からの起動したコンテナのvscodeを操作している事が確認出来ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1597898/6297efd7-7e5a-37fa-555e-33454187efd3.png)

Gitpod
=======
VS code を使用した Remote-Containers は、ローカルにBuildしたdockerコンテナに vscode を含んだ開発環境を作成したものとなります。

***これに対して Gitpod は ローカル上のコンテナは動作を行わず、ブラウザから任意のワークスペースに対して開発環境を作成するものとなります。
クラウドIDEと呼ばれ、DaaSとして機能するような開発環境という認識でいます。***

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1597898/556b53a7-6887-ea27-9a51-6131aa9ceb35.png)

私は触るのは初めてなので導入から実施し、メリットを理解していきます。

セットアップ
==========

以下からログイン可能です。
```GitLab``` / ```Github``` / ```BitBuckets``` いずれかのアカウントに連携してログイン出来るようです。

https://gitpod.io/login/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1597898/1387acab-e4c8-2740-eb3c-ab72fd270a25.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1597898/ec16ae97-21cd-075e-7b6e-3ab11dc077de.png)

GitPodのダッシュボードです。
ここから ```WorkSpaces```の管理画面から新規で作成する事が可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1597898/16ac83bc-b004-f902-0d7a-e66553354e57.png)

```WorkSpaces``` を開くと、VScode ライクなIDEが開きます。
```Theia``` をベースとした VScode ライクなコードエディタで、VScode との違いが無いくらい同じ印象でした。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1597898/3fef1ceb-ce2e-4236-be1f-533893807376.png)

なお、一つのWorkSpaces 毎に ```.gitpod.yml``` が存在し、これを ```Dockerfile``` としてBuild 時点で独自な環境を作ることが可能なようです。
以下は ```Python django```フレームワークをテンプレートした ```workspaces``` です。```.gitpod.yml``` には ```pip``` で ```Django``` がインストールされているようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1597898/7eb51b9c-d979-fdb0-0eb9-932a92d90c6e.png)

次に既存の GitHub のリポジトリをgitpodで見てみましょう。
Github のリポジトリURLの先頭に ```gitpod.io/#``` と付けるだけで良いらしいですが、Chrome ユーザーであれば拡張機能をインストールすると、GitHub の画面上に Gitpod が表示されるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1597898/1d66d492-5a01-780d-4376-c17df283ac4a.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1597898/c0275120-8e4e-2ee3-e485-5634d87d46a0.png)

開いてみると、先ほど同様のIDE環境が開き、レポジトリに公開されているソースコードが再現されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1597898/de42c9f9-6329-3a73-1bdf-7e1719770793.png)

Gitpod のダッシュボードを見ると、新しい```Workspaces```が追加されていました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1597898/22762c17-c85f-6a18-6a78-189cc58f352b.png)

***先ほど、Gitpodから作成した```Workspaces```は図の下部にあたり、Docker コンテナから新しい```Workspaces```を立ち上げたものになります。
Github からGitpod を立ち上げた```workspaces```は図の上部に当たり、これは```git clone``` としてコンテナが立ち上がったものかと思われます。(既存のリポジトリとは別環境)***

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1597898/effe8e3b-d32e-3b1e-4e67-b4f3a0f00b78.png)

Pricing
========
ドキュメントに記載があります。
個人で使う分には ```Free``` で***50時間/月***まで使用が可能なようです。
また、```Free```で ***privateのリポジトリが作成可能なため、個人の開発環境としても十分に発揮できそうです。***
無制限で使用出来る ```Professional``` も ***$25/月*** なため、```Visual Studio Codespaces``` などのオンラインツールと比較しても、そこまで高くは無いかと個人的には感じました。

https://www.gitpod.io/pricing

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1597898/d610eb60-f6b0-dc81-84df-7899eed69aa9.png)

Gitpod 使うメリット
========
業務用のローカルPCと開発環境は分離したいと思っていたところにクラウドIDEに出会えたのは非常に良かったです。
使用して間もないですが、本格的にこれから GitPod を使っていこうと思えました。
以下、Gitpod を使うメリットを個人的に挙げてみました。

***- Workspaces の作成に制限が無いため、スクラップ&ビルド的な使い方が可能。
- ローカルPCに過剰なリソースを使用せず、かつローカルにファイルを持たずに開発環境を作成出来る。
- Workspaces を分けて使用出来るため、一つの Workspaces上でプロジェクトが複数に渡るような事も無く、よくあるファイルやディレクトリ、パッケージなどの煩雑化を未然に防げる。
- ブラウザからコーディングするため、調べものが多い人にはクイックな動作を行える。
- GitHub との連携により、既存のリポジトリを直ぐに有用する事が出来る。
- コンテナ(Workspace)のBuildが高速。
- VScode の拡張機能も多く使えるそう。
- 無料枠でも開発環境として十分に使えそう。***

以上となります。