クラウドIDE「Gitpod」を試してみたら予想以上に使えそうだった

こちらの記事で紹介されていたクラウドIDE「Gitpod」が便利そうだったのでお試ししてみました。

GitHubが大変身！Web開発向けの万能ツールに変えてくれるサービスをまとめてみた！ - paiza開発日誌
https://paiza.hatenablog.com/entry/2019/03/13/GitHub%E3%81%8C%E5%A4%A7%E5%A4%89%E8%BA%AB%EF%BC%81Web%E9%96%8B%E7%99%BA%E5%90%91%E3%81%91%E3%81%AE%E4%B8%87%E8%83%BD%E3%83%84%E3%83%BC%E3%83%AB%E3%81%AB%E5%A4%89%E3%81%88%E3%81%A6%E3%81%8F%E3%82%8C

>GitHubに置いているリポジトリのソースコードを統合型のクラウドIDEで自由に編集できるサービスが「Gitpod」です。
>TheiaをベースにしたVS Codeライクなコードエディタで、豊富な機能と拡張性を備えておりプログラミングに最適なIDEの一つと言えるでしょう。
>使い方は簡単で、リポジトリのページを開いてURLの先頭に「gitpod.io#」を付与するだけです。

<img width="1195" alt="スクリーンショット 2019-03-14 10.02.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/4769ded5-3e1a-2208-7b85-d90ec565d6e7.png">

Gitpod - Code Now!
https://www.gitpod.io/

>In a blink of an eye from any GitHub project, pull request, or issue to a
ready-configured, fully-featured online IDE and terminal.

下記記事のリポジトリを利用してみます。Dockerで開発環境を用意してAWS Lambdaへデプロイできるようにしたリポジトリです。

DockerでGoの開発環境を作ってServerlessでAWS Lambdaにデプロイしてみた - Qiita
https://qiita.com/kai_kou/items/fc3eab987d7ed2d6f65b

https://github.com/kai-kou/deploy-in-go-lambda-with-sls-on-docker
<img width="1191" alt="スクリーンショット 2019-03-14 10.02.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/24dca1b5-45c6-0c96-2b9e-904fa945915f.png">


## 前提

ブラウザがあればそれで良い。

- GitHubアカウントがある
- AWSアカウントがある
  - AWS Lambdaへデプロイするのに利用します
- ブラウザがある
  - クラウドIDEなのでブラウザ必須


## GitpodへアクセスしてIDEを立ち上げる

GitHubページURLの頭に`gitpod.io#` を付与してブラウザでアクセスします。
今回の場合、以下のようにします。

https://gitpod.io#github.com/kai-kou/deploy-in-go-lambda-with-sls-on-docker

アクセスするとGitpodのページが表示されるので、「LOGIN WITH GITHUB & LAUNCH WORKSPACE」ボタンをクリックします。
<img width="1195" alt="スクリーンショット 2019-03-14 10.02.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/4769ded5-3e1a-2208-7b85-d90ec565d6e7.png">

初回アクセス時は、GitpodからGitHubアカウントに対してアクセス権を付与するページが表示されます。「Authorize gitpod-io」ボタンをクリックして権限を付与します。
<img width="1194" alt="スクリーンショット 2019-03-14 10.02.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/84fdf0dc-a409-9d49-6aac-1390e222f135.png">

Gitpodを利用するのにユーザー登録が必要になるので、初回はGotpodのCreate Accountページへ遷移します。Terms of Service.の内容を確認して、チェックして、「TO PROCEED, PLEASE ACCEPT THE TERMS OF SERVICE.」ボタンをクリックします。
<img width="1195" alt="スクリーンショット 2019-03-14 10.03.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/349e6d83-8eb3-7abe-e511-60e67318064c.png">

クラウドIDEの環境構築が始まります。環境はDockerを利用しているみたいです。
・・・となると、Dockerコンテナ on Dockerコンテナは無理そうですねぇ。。。どうしよう。
<img width="1194" alt="スクリーンショット 2019-03-14 10.03.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/803ea95b-7c13-d34e-072c-eee6bf5c0b20.png">

環境構築が終わると、IDEが表示されました！初回はWelcomeモーダルが表示されます。
<img width="1196" alt="スクリーンショット 2019-03-14 10.04.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/e65a0b83-26e9-08aa-bdb9-98ca04c67152.png">
<img width="1197" alt="スクリーンショット 2019-03-14 10.05.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/4d041513-e1d0-ac53-4d8f-fa1490de4467.png">

当然ながら、Dockerは入っておらず、インストールもできませんでした。
<img width="970" alt="スクリーンショット 2019-03-14 11.21.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/3caeb4a9-4d70-46cd-4e9f-d92122f93d13.png">


## 独自のDockerfileを利用してIDEを立ち上げる

公式ドキュメントを読んでたら、独自のDockerfileを利用する方法について記載がありました。

Docker Image - Gitpod Documentation
https://docs.gitpod.io/42_Config_Docker.html

>If the standard Docker image that is provided by Gitpod does not include all the tools you need for developing your project, you can provide a custom Docker image.
>(Google翻訳) Gitpodによって提供される標準のDockerイメージに、プロジェクトの開発に必要なすべてのツールが含まれていない場合は、カスタムDockerイメージを提供できます。

リポジトリに`.gitpod.yml` が含まれていると、そこからIDE環境を構築してくれるとのことです。せっかくなので、Gitpodからファイルを追加してみます。ファイルの追加方法は特に特別なことはないので、IDEかコンソールから追加します。

```yaml:.gitpod.yml
image:
  file: Dockerfile
  context: docker
```

ファイル追加したらGitHubへ`push` する必要があるので、`commit` して`push` します。
初回は権限がないため、IDEからもコンソールからも`push` できません。

```console
$ git push
remote: Invalid username or password.
```

`Dockerfile` ではGoとServerlessをインストールするようにしています。

```Dockerfile:Dockerfile
FROM golang:latest

ENV SERVERLESS serverless@1.30.1
ENV GOPATH /go
ENV PATH $GOPATH/bin:/root/.yarn/bin:$PATH

RUN apt-get update && \
    apt-get install git
RUN	go get -u github.com/rancher/trash
RUN curl --silent --location https://deb.nodesource.com/setup_6.x | bash - && \
    apt-get install -y nodejs
RUN curl -o- -L https://yarnpkg.com/install.sh | bash
RUN npm install -g $SERVERLESS
```

IDEから`push` して失敗すると、エラーダイアログに「Grant Permissions」ボタンが用意されているので、そこから権限付与します。
<img width="612" alt="スクリーンショット 2019-03-14 10.15.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/c6995d01-eeec-2278-d1c0-b81d5e25ee90.png">
<img width="1006" alt="スクリーンショット 2019-03-14 10.16.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/a85f0669-6f03-49ca-90fd-5272b002df3d.png">
<img width="300" alt="Authorize_application.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/cdbfd8a3-9419-b449-8793-9093492d9497.png"> <img width="307" alt="スクリーンショット 2019-03-14 10.17.58.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/88be2b87-d7fe-b938-d113-e89e4cef342b.png">
権限付与すると、GitpodのAccess Controlページへ遷移しますが、ここはそのままでIDEへ戻ります。
<img width="1182" alt="スクリーンショット 2019-03-14 10.18.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/56327b6f-2d83-341a-19e7-7b80cd58b4e9.png">

IDEでGitHubへ`push` したら、IDEの「File」→「Stop Workspace」で環境をストップします。
ダイアログ表示されるので、「Stop Only」ボタンをクリックします。するとGitpodのダッシュボードにリポジトリ情報が残るので再起動が楽です。「Do it」ボタンをクリックするとダッシュボードから消えるので、再度`gitpod.io#` を含むGitHubのURLからアクセスします。
<img width="742" alt="スクリーンショット 2019-03-14 11.35.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/8e1a24ea-224c-19c9-cae0-1efc6e76c96d.png">
<img width="799" alt="スクリーンショット 2019-03-14 11.35.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/6389f988-198d-b03d-f0bb-dd2444cf40ea.png">
ダッシュボードに情報があったら「START」ボタンでIDEを立ち上げます。
<img width="1169" alt="スクリーンショット 2019-03-14 11.36.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/faaaaba4-8db0-fea2-7402-593b14a8c10a.png">

`.gitpod.yml` ファイルを含むリポジトリになったので、ファイルで指定した`Dockerfile` からDockerイメージを作成して環境が立ち上がります。スクリーンショットを撮るタイミングを逃しましたが、Dockerイメージ作成のログが下側に流れます。
<img width="1191" alt="スクリーンショット 2019-03-14 10.20.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/51355035-7394-4a95-585e-2347d48b2e1c.png">

IDEが立ち上がったら`Dockerfile` どおりにイメージが作成されているか確認します。
<img width="944" alt="スクリーンショット 2019-03-14 11.46.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/7e8b8da1-6674-b740-b09e-5ca8b6b7832a.png">


## GoをビルドしてAWS Lambdaへデプロイする

環境が用意できたのでビルドしてAWS Lambdaへデプロイします。
基本的には記事の手順通りですが、`docker-compose` を利用していないので、一部環境変数を設定する必要があります。

DockerでGoの開発環境を作ってServerlessでAWS Lambdaにデプロイしてみた - Qiita
https://qiita.com/kai_kou/items/fc3eab987d7ed2d6f65b

### Goのビルド

`GOPATH` を環境変数で設定して`go build` でビルドします。`go get` 実行でwarningが表示されますが、とりあえず無視で。ビルドに成功すると`bin/main` ファイルが作成されます。

```console
$ cd hello-go-lambda/
$ export GOPATH=$HOME/go
$ go get
go get: no install location for directory /workspace/deploy-in-go-lambda-with-sls-on-docker/hello-go-lambda outside GOPATH
        For more details see: 'go help gopath'
$ GOOS=linux go build -o bin/main
$ ls bin/
main
```

<img width="943" alt="スクリーンショット 2019-03-14 11.52.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/6299b804-5b75-cf49-41a3-d5e8e6fbd4fd.png">


### AWS lambdaへデプロイ

Serverlessを利用してAWS Lambdaへデプロイします。
`AWS_ACCESS_KEY_ID` と`AWS_SECRET_ACCESS_KEY` を環境変数に設定します。

```console
$ export AWS_ACCESS_KEY_ID=xxxxx
$ export AWS_SECRET_ACCESS_KEY=xxxxx
$ sls deploy
```
<img width="971" alt="スクリーンショット 2019-03-14 12.21.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/6b8094f4-87c8-1da7-0acf-a14687db4416.png">


デプロイできたら実行してみます。

```console
$ sls invoke -f hello
{
    "message": "Go Serverless v1.0! Your function executed successfully!"
}
```
<img width="970" alt="スクリーンショット 2019-03-14 12.22.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/48549/5355d7ce-6422-663c-f715-524553d11102.png">
やったぜ。

不要になったら`sls remove` でリソースを削除しておきます。


## まとめ

「Coder」や「AWS Cloud9」などクラウドIDEはいくつか出てきていますが、GitHubリポジトリからすぐに環境を用意できる「Gitpod」もなかなかに使い勝手が良さそうでした。

## 参考

GitHubが大変身！Web開発向けの万能ツールに変えてくれるサービスをまとめてみた！ - paiza開発日誌
https://paiza.hatenablog.com/entry/2019/03/13/GitHub%E3%81%8C%E5%A4%A7%E5%A4%89%E8%BA%AB%EF%BC%81Web%E9%96%8B%E7%99%BA%E5%90%91%E3%81%91%E3%81%AE%E4%B8%87%E8%83%BD%E3%83%84%E3%83%BC%E3%83%AB%E3%81%AB%E5%A4%89%E3%81%88%E3%81%A6%E3%81%8F%E3%82%8C

Gitpod - Code Now!
https://www.gitpod.io/

DockerでGoの開発環境を作ってServerlessでAWS Lambdaにデプロイしてみた - Qiita
https://qiita.com/kai_kou/items/fc3eab987d7ed2d6f65b

Docker Image - Gitpod Documentation
https://docs.gitpod.io/42_Config_Docker.html

GitHub 対応オンライン IDE「GitPod」の Docker 環境をカスタマイズする - てくなべ (tekunabe)
https://tekunabe.hatenablog.jp/archive/2018/12/30