Cloud Shellのコードエディタから始まるブラウザIDEの明るい未来！

Cloud Shellとは、Googleが提供するGCP専用のWebコンソールの中で利用できるツールのことです。要は、GCPのWebコンソールが上位にあり、その中でCloud Shellが機能として提供されているというイメージです。

このツールを利用すれば、ユーザはGCPのクラウドリソースをブラウザ上のCUIから直接操作することができます。

そして、昨年10月Cloud Shellはソースコードや設定ファイルをブラウザ上から作成・編集することができる「コードエディタ」をリリースし、先日このエディタ機能がついにβ版に移行しました。

コードエディタのβ版リリースを記念して、今回はコードエディタの使い方を解説します！実際に手を動かしながらこのレポートを読み進め、コードエディタの使い方を覚えていきましょう！！

コードエディタはどんなツール？
コードエディタで作成したGAEアプリをデプロイする
まとめ

コードエディタはどんなツール？

Cloud ShellのコードエディタはブラウザベースのIDEであるEclipse Orionをベースにしているため、ユーザはOrionで利用可能な便利機能(コードアシスト、フォーマット、ナビゲーション等)を利用することができます。

このツールを利用すれば、ブラウザ上で実装したソースコードをGAEやGCE等にブラウザのみを利用して直接デプロイすることができます。ただし、触って見たところ既にデプロイされたソースコードを直接編集することはできないようです。そのため、本記事ではアプリの新規作成からデプロイまでの手順について次章で説明します。

また、コードエディタはCloud Shellの一部のため、同一画面上にコマンドラインと編集画面を並べることができるので、ビルド＆テスト時にコマンドラインを利用する場合でも(下画像の通り)ブラウザでタブ移動する必要はありません。

画像1. Cloud Shell

コードエディタで作成したGAEアプリをデプロイする

それでは、実際にコードエディタを利用してGAEアプリのデプロイまでを行ってみます。

ただし、Cloud Shell及びコードエディタを利用するにはGCPプロジェクトの作成が必要です。GCPプロジェクトを作成したことがない場合はコチラの記事を参考にプロジェクトの作成を行ってください。

コードエディタの起動

まずはCloud Shellのコードエディタを起動するための手順について解説します。以下の手順に従ってコードエディタの起動を行ってください。

(1) Cloudコンソールにアクセスし、任意のプロジェクトを選択します。

– Cloudコンソール
https://cloud.google.com

(2) ヘッダの右側にあるアイコン(画像2の赤枠箇所)をクリックし、Cloud Shellを起動します。

画像3. Cloud Shellの起動

(3) Cloud Shellがブラウザの画面下に表示されるので、コードエディタのアイコン(画像3の赤枠箇所)をクリックします。

画像4. コードエディタの起動

(4) 3のアイコンをクリックし、下画像のようにコードエディタが表示されたら起動は完了です。

画像5. コードエディタ

GAEアプリの作成

次にデプロイするGAEアプリを作成します。以下の手順に従ってコードエディタからアプリの作成を行ってください。

(1) まずはGAEアプリのソースコードを置くためのフォルダを作成します。
メニューのFileから[New]-[Folder]を選択しフォルダの作成を行ないます。フォルダ名は任意の名称で問題ありませんが、本記事では「app」というフォルダを作成します。

画像6. フォルダ作成の操作

(2) 1で作成したフォルダを右クリックし[New]-[File]を選択後、「app.yaml」の名前でファイルを作成します。

画像7. ファイル作成の操作

(3) 2で作成した「app.yaml」はGAEの設定ファイルになります。以下の内容をエディタにコピペしてください(ファイルは自動保存されます)。

app.yaml

コード


runtime: go
api_version: go1.8
handlers:
- url: /.*
  script: _go_app

画像8. app.yaml作成

(4) 次に2と同じ手順から「hello.go」(ソースコードは以下の通りです)というファイルを作成します(※1)。画面上に「hello, world」と出力するだけの単純なプログラムです。

hello.go

コード

package app

import (
   "fmt"
   "net/http"
)

func init() {
   http.HandleFunc("/", handler)
}

func handler(w http.ResponseWriter, r *http.Request) {
   fmt.Fprint(w, "hello, world")
}

※1 前述した通り、Eclipseがサポートする開発補助機能も利用できるので、これらの機能を利用すれば開発効率も向上します。ヘッダメニューの[Tools]-[Show Keyw]から利用可能な機能(ショートカットキーの一覧)を確認することができます(割り当てキーの変更も可能です)。

画像1. ショートカットキー一覧

アプリのデプロイ

最後にGAEアプリのデプロイを行ないます。以下の手順に従ってGAEへのデプロイを行ってください。GAEへのデプロイには、エディター下部のCloud Shellを利用します。Cloud Shellでは、goappやappcfg.pyなどのコマンドを利用することができますが、今回はgcloudを利用してGAEアプリのデプロイを行ってみます。

(1) アプリケーションフォルダ(「GAEアプリの作成」の章で作成したフォルダ)の直下に移動します。

コード

$ cd ~/app

(2) 以下のGAEデプロイ・コマンドを実行します。

コード

$ gcloud app deploy app.yaml

(3) 実行を続けるか確認されるので「Y」と入力しEnterキーを押下してください。

画像8. gcloud app deployの実行

(4) 以下のようにログが出力されればデプロイは成功です。

画像9. デプロイ完了

(5) 以下のURLからブラウザにアクセスします。
http://<GCPプロジェクトID>.appspot.com/

(6) ブラウザから「hello, world」の出力を確認することができればGAEのデプロイは成功です。

画像10. デプロイの確認

まとめ

コードエディタをざっと触ってみましたが、想像していたよりもサクサク動作するエディタだと思いました。もちろん、ブラウザ経由のためインターネット回線に依存しますし、接続が遮断された場合は編集が全くできなくなってしまうという欠点はありますが、インターネットさえ繋がっていれば普段利用しているIDEとは操作性では一見違いがないように思えます(プラグイン等でカスタマイズすることはできません)。

ただ、本記事で記載する予定だったアプリのプレビュー機能がなぜか動作しませんでした(※2)。GAE/GOだと動作しないのか、原因についてはGoogleサポートに確認し進展があった場合は本記事をアップデートする予定です。

※2 別タブでプレビューURLが生成されるのですが、Serverエラーになってしまいます。プレビュー機能は、Cloud Shellのヘッダメニューのプレビューアイコンから実行することができます。

画像11. アプリのプレビュー

Cloud Shellはgitも利用できるので、GitHub上にあるソースコードをcloneした上で編集・デプロイすることも可能ですが、コードエディタ自体にプラグインによるカスタマイズ性がないのと、前述した通りプレビュー機能が動作しない等の課題があり、まだまだ実践で使うには機能不足という面は否めません(環境構築が不必要というのは非常に良いとは思います)。

しかしながら、コードエディタはまだβ版です。今後さらなる拡張が期待できるのではないでしょうか。数年後には誰もがブラウザ上で開発をするのが当たり前の世界になっているのは間違いないと思います。apps-gcpでは引き続きCloud Shell及びコードエディタの動向を追っていく予定です！！

※ GAE、GCPにご興味もしくはご相談のある方は吉積情報、またはクラウドエース(こちら)までお問い合わせください。GAEに限らず、あらゆるGCPサービスのサポートが可能です。