GitHub
クラウドIDE
Gitpod

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


スクリーンショット 2019-03-14 10.02.41.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

スクリーンショット 2019-03-14 10.02.22.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」ボタンをクリックします。

スクリーンショット 2019-03-14 10.02.41.png

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

スクリーンショット 2019-03-14 10.02.56.png

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

スクリーンショット 2019-03-14 10.03.13.png

クラウドIDEの環境構築が始まります。環境はDockerを利用しているみたいです。

・・・となると、Dockerコンテナ on Dockerコンテナは無理そうですねぇ。。。どうしよう。

スクリーンショット 2019-03-14 10.03.28.png

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

スクリーンショット 2019-03-14 10.04.48.png

スクリーンショット 2019-03-14 10.05.40.png

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

スクリーンショット 2019-03-14 11.21.13.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かコンソールから追加します。


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

スクリーンショット 2019-03-14 10.15.57.png

スクリーンショット 2019-03-14 10.16.13.png

Authorize_application.png スクリーンショット 2019-03-14 10.17.58.png

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

スクリーンショット 2019-03-14 10.18.14.png

IDEでGitHubへpush したら、IDEの「File」→「Stop Workspace」で環境をストップします。

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

スクリーンショット 2019-03-14 11.35.21.png

スクリーンショット 2019-03-14 11.35.33.png

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

スクリーンショット 2019-03-14 11.36.41.png

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

スクリーンショット 2019-03-14 10.20.52.png

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

スクリーンショット 2019-03-14 11.46.29.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 ファイルが作成されます。

$ 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

スクリーンショット 2019-03-14 11.52.04.png


AWS lambdaへデプロイ

Serverlessを利用してAWS Lambdaへデプロイします。

AWS_ACCESS_KEY_IDAWS_SECRET_ACCESS_KEY を環境変数に設定します。

$ export AWS_ACCESS_KEY_ID=xxxxx

$ export AWS_SECRET_ACCESS_KEY=xxxxx
$ sls deploy

スクリーンショット 2019-03-14 12.21.32.png

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

$ sls invoke -f hello

{
"message": "Go Serverless v1.0! Your function executed successfully!"
}

スクリーンショット 2019-03-14 12.22.29.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