クラウド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#」を付与するだけです。

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

前提

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

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

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

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

アクセスするとGitpodのページが表示されるので、「LOGIN WITH GITHUB & LAUNCH WORKSPACE」ボタンをクリックします。

初回アクセス時は、GitpodからGitHubアカウントに対してアクセス権を付与するページが表示されます。「Authorize gitpod-io」ボタンをクリックして権限を付与します。

Gitpodを利用するのにユーザー登録が必要になるので、初回はGotpodのCreate Accountページへ遷移します。Terms of Service.の内容を確認して、チェックして、「TO PROCEED, PLEASE ACCEPT THE TERMS OF SERVICE.」ボタンをクリックします。

クラウドIDEの環境構築が始まります。環境はDockerを利用しているみたいです。
・・・となると、Dockerコンテナ on Dockerコンテナは無理そうですねぇ。。。どうしよう。

環境構築が終わると、IDEが表示されました！初回はWelcomeモーダルが表示されます。

当然ながら、Dockerは入っておらず、インストールもできませんでした。

独自の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かコンソールから追加します。

.gitpod.yml

image:
  file: Dockerfile
  context: docker

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

$ git push
remote: Invalid username or password.

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

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」ボタンが用意されているので、そこから権限付与します。



権限付与すると、GitpodのAccess Controlページへ遷移しますが、ここはそのままでIDEへ戻ります。

IDEでGitHubへpush したら、IDEの「File」→「Stop Workspace」で環境をストップします。
ダイアログ表示されるので、「Stop Only」ボタンをクリックします。するとGitpodのダッシュボードにリポジトリ情報が残るので再起動が楽です。「Do it」ボタンをクリックするとダッシュボードから消えるので、再度gitpod.io# を含むGitHubのURLからアクセスします。


ダッシュボードに情報があったら「START」ボタンでIDEを立ち上げます。

.gitpod.yml ファイルを含むリポジトリになったので、ファイルで指定したDockerfile からDockerイメージを作成して環境が立ち上がります。スクリーンショットを撮るタイミングを逃しましたが、Dockerイメージ作成のログが下側に流れます。

IDEが立ち上がったらDockerfile どおりにイメージが作成されているか確認します。

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 ファイルが作成されます。

$ 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

AWS lambdaへデプロイ

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

$ export AWS_ACCESS_KEY_ID=xxxxx
$ export AWS_SECRET_ACCESS_KEY=xxxxx
$ sls deploy

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

$ sls invoke -f hello
{
    "message": "Go Serverless v1.0! Your function executed successfully!"
}

やったぜ。

不要になったら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