あのチュートリアルやってみたい...。じゃあ、GitLab & Gitpodでブラウザだけで開発してみよう！

はじめに

この記事は、GitLab & Gitpodの組み合わせで、ブラウザのみで、アプリケーションの開発環境を用意してやってみた記録になります。

利用する題材

こちらの記事を題材に、空っぽのリポジトリから少しずつコミットを重ねて、最終的に同じ内容まで完成させています。

• Vue.js チュートリアル for Rails エンジニア(Vue3 version)

こんな方にぜひどうぞ

• GitLabやGitHubにアカウントをお持ちの方
• いろいろなハンズオンを開催したいけれど、もっと「気軽に環境構築できたらいいのにな....」と思っている方¹
• お手元のPCにはあまり色々インストールできないため、なかなか一歩が踏み出せない方
• 既存のRailsアプリケーションの一部をVue.jsで置き換えてみたい方

題材にさせていただいた記事は、Rails6の基本に加え、既存のRailsアプリケーションにどうやったらVue.jsを組み込めるか、といったガイドにもなる、とても良いチュートリアル、ハンズオン向けの記事です。
ぜひこのGitLab & Gitpodにこだわらず、お手元で試せる方は、トライしていただけたらと思います！

※パブリックリポジトリを前提としています。また、フリープラン枠では、月50時間の利用制限がありますので、ご注意ください。²

結果だけ知りたい方向け

途中経過はいいので、最終的にどうやっていったのかを知りたい方は、こちらをご覧ください。

• 空っぽのリポジトリを作成する
• チュートリアルを完走するというissueを作成する
• やることを書き出す
• Gitpod上で開発しながらコミットを重ねていく
  • あわせてメモやキャプチャを貼る

この一連の記録は、実際にわたしのGitLab上のissueとして、以下に書き出しています。

• 「Vue.js チュートリアル for Rails エンジニア」のチュートリアルに沿って進めてみる

こんな感じで1つずつ進めています。

この記事で扱う範囲

いちばんの敷居は、環境作りです。
環境さえ立ち上がれば、あとはお好きなチュートリアルの記事、上記のわたしの記録、もしくはご自身のプロジェクトとして、好きな内容で開発を進めていただけると思います。

このため、この記事では、「リポジトリを作ってからGitpodの環境を用意する」までをスコープにします。

また、Railsアプリケーションに関しては、ブラウザで動作確認をする際に注意点や設定が必要なので、その点について触れておきます。

まずはGitpodについて

Gitpodは、クラウドとPC(デスクトップ) 双方で稼働が可能なIDE / 統合開発環境です。

「このリポジトリ試したいな」「issueにのっとってコードを修正したいな」と思った時に、ちょっと待つだけで、ブラウザを通して、ワークスペースを立ち上げることができます。

ソースコードを修正し、かつ実行もできるように、ターミナルも揃った形で、ブラウザさえあれば自分だけの環境として利用することができます。
よろしければ、下記の記事も合わせてご覧ください！

• プルリクエストの作成にGitpodを使ってみました！³

GitLabに空のリポジトリを作ろう

さて、Gitpodの環境を立ち上げるには、「リポジトリが存在すること」が前提になります。
このため、まずはGitLab上に空でいいのでプロジェクト、リポジトリを作成してください。

以下、全てブラウザのみで操作していきます。

※Gitpodのプランとの兼ね合いで、「public」リポジトリを前提としています。²

リポジトリの作成

細かくは説明しませんが、GitLabにサインアップ / ログインし、どんな名前でも良いので、空のリポジトリを作ります。

設定はpublicとしてください。

リポジトリの初期化 / READMEを作ろう

ここから先も、ブラウザのみで進めます。
実は、GitLabもGitHubも、ソースコードはブラウザ上でも編集できます。

リポジトリを作成した段階では、まだ初期化もされていないので、ブラウザから簡単でいいのでREADMEを作成しましょう。

Add README というボタンを押すと、Web上で編集できる画面に切り替わります。

編集画面には、簡単なメッセージでいいので、なにかを追記してコミットしてみてください。

そうすると、初期化が走り、masterブランチも作成されます。

Gitpodのボタンが出たらクリックしてみよう！

masterブランチを改めて表示すると、右上の方に Gitpod というプルダウンメニューが表示されます。
こちらを、このままGitpodを選んだ状態でクリックします。

そうすると、Gitpodの画面に切り替わります。
初回はアカウント作成を求められます。（GitLabやGitHub連携できます）

アカウントが作成されると、そのあとは黒い画面に切り替わります。
しばらく下記のような画面が表示されます。

この間に、クラウド上に、先ほど作成したリポジトリに紐づいたワークスペースが作成されます。

Gitpodで作業してみよう！

しばらく待つと.....。
VisualStudio Code風のエディタの画面が表示されます。⁴
リポジトリの内容、READMEをそのままcloneしてこのワークスペース上に展開し、エディタで開いた形になります。

下の方にはターミナルの画面が表示されます。
ここで、書いたプログラムを実行することができます。

Webアプリケーションも起動できます！

コマンドラインのプログラムだけでなく、Webアプリケーションも起動できます。
ここでは、まずphpコマンドを使って、簡単にWebサーバを立ち上げて、Webアプリケーションに見立ててみます。

php -S ホスト:ポート でビルトインサーバを起動してみます。

gitpod /workspace/vue-rails-sample-repo $ php -S localhost:3000
[Tue Dec 15 13:18:13 2020] PHP 7.4.3 Development Server (http://localhost:3000) started

....

httpのサービスが起動していることを検知すると、Gitpodがダイアログを出してくれます。プレビューは、ブラウザ内ブラウザとして表示。Open Browserはお手元のブラウザ上に、新しいウィンドウで表示してくれます。

この時、よくみるとブラウザでアクセスしているURLは、httpsになっています。

アプリケーション自体は、ワークスペース内でlocalhostとして起動しているのですが、Gitpod側がサービスを検出して、自動で動的な名前（URL)を通して、https化してアクセスできるようにしてくれています。

同様に、Node.jsやRailsのアプリケーションも、このワークスペース内で起動すれば、Gitpodのプロキシを通してアクセスできますので、本当にブラウザのみで開発ができる、というわけです。

Railsの場合の注意点

このチュートリアルは、Railsアプリケーションで、そのままの手順で作成すると、Rails6になります。

Rails6や、その他のアプリケーションでも、起動した際と別の名前（URL) でアクセスするケースでは、プロキシしたURLからのアクセスを許可する設定を加えないと、接続がブロックされる場合があります。⁵

Rails6の場合は、以下のようなエラー画面になります。

こちらに対しては、config/environments/development.rb に以下のような設定を追加すると、リクエストが許可されるようになります。

# gitpod.ioドメインを許可
# 完全なURLは動的に変わるので、ワイルドカードで指定します
config.hosts << ".gitpod.io"

もしうまくいかなかった時は、試してみてくださいね。

まとめ

以上、「リポジトリを作ってからGitpodの環境を用意する」までを目標に、GitLab & Gitpodの組み合わせを紹介してみました。

すこしでも、一歩を踏み出すきっかけになればいいな、と思います。

併せて、GitLab Advent Calendar 2020 にも参加とさせていただきました。
非常に便利な開発環境やリソースを提供してくださる皆様に、感謝をこめまして。

Stay safe, stay healthy!

1. 小さな勉強会、ハンズオンを開催したいけれど、参加者の環境構築や機材の用意を考えると難しい。そんな課題をお持ちの方にも、きっと役に立つのではと思います。 ↩

2. https://www.gitpod.io/pricing/ 参照。30分間利用がないとサスペンドしてくれるので、ハンズオンや学習目的であれば最初の一歩には十分かと思います。OSS向けや学生向けプランもあります。 ↩ ↩²

3. こちらはGitHub & Gitpodの組み合わせの例で、既存のOSSのリポジトリをフォークしてプルリクエストを作成する手順になります。 ↩

4. VisualStudio Codeではなく、Theirというエディタになります。 ↩

5. Host Authorizationと言います。 ↩