133
105

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-03-14

こちらの記事で紹介されていたクラウド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# を付与してブラウザでアクセスします。
今回の場合、以下のようにします。

アクセスすると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

133
105
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
133
105

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?