NOT SO BADなブログ

Towards a not so bad world.

クラウド型IDE「Codeanywhere」×「Firebase」で、PC不要のクラウドプログラミングの夢を見る

f:id:o_tomomichi:20171031110614p:plain

普段はMacBookとAtomでコードを書いています。

しかし時々夢を見るわけです。これをタブレットとか、何ならスマホでできないのだろうかと。

というわけでそんな環境を実現するべく、クラウドIDEのCodeanywhereでFirebaseプロジェクトを動かしてみるのをやってみたメモ。

なんでCodeanywhereなのか

PCローカルのアプリでなく、クラウド型のIDEというのがけっこう前から存在しています。

blog.hitorifest.com

ただやはりローカルアプリに比べて動作が遅かったりするため、なかなか使ってる人を見たことはありません。

それは承知したうえで、あえていま試してみようという心意気。

ちなみにこの分野の一番人気は、Amazonに買収されて将来性も明るそうなCloud9。

ですが今回は全体的なサービスのデザインが好みだったCodeanywhereを選びました。一応こちらも大手。

codeanywhere.com

なんでFirebaseなのか

なんで今回Firebaseかというと、いまFirebaseがアツいからです(当社調べ)。

firebase.google.com

弱点だったRealtimeDatabaseの制約も、CloudFirestoreが出たことでかなり改善されました。

qiita.com

というわけでFirebaseまじアツいです。アプリじゃなくてWebの人ももっとFirebase使いましょう。

CodeanywhereでFirebaseをローカル起動する

ここからようやく本題。CodeanywhereでFirebaseのプロジェクトを動かすまでの手順です。

サインアップとかはもう終わってる前提で。

Codeanywhereにプロジェクトをインポート

プロジェクトをインポートするには、Connectionというものを新しくつくります。

インポート先は色々選べるけど、まぁすでにGithubで管理してればそこから持ってくるのが一番楽でしょう。

しばらく待てばエディタ上にプロジェクトのファイルが反映されます。

コンソールで動かしてみる

Codeanywhereではふつうにコンソール画面が使えます。

最初やり方が見つからなかったけど、Connectionsメニューに追加されたプロジェクト名で右クリックして、「SSH Terminal」を選択すればOK。

コンソールが立ち上がったらさっそくfirebaseコマンドを打ってみますが、これはもちろんエラー。

まずfirebase-toolsをインストールする必要があります。

nodeをバージョンアップ

この記事の執筆時点で、Codeanywhereのnodeバージョンは4.4.0。

このままfirebase-toolsをインストールしても動きませんでした。

のでまずはnodeをバージョンアップ。

qiita.com

$ nvm ls-remote

でインストールできるバージョンを確認して、この時点で最新の8.8.1をインストールしました。

$ nvm install 8.8.1

このままだと次回起動時にまた4.4.0に戻ってるので、デフォルトを8.8.1に設定します。

qiita.com

$ nvm alias default 8.8.1

firebase-toolsインストール

これで改めてfirebase-toolsのインストールに挑戦。

$ npm install -g firebase-tools

で入ったらログイン。ローカルじゃないのでオプションを付けます。

$ firebase login --no-localhost

ローカルサーバ起動

それではFirebaseをローカル(Codeanywhere上なので、ローカルじゃないけど)で起動します。

$ firebase serve --project XXXXX

無事起動しました。しかしこの状態で「Run Project」をクリックしても、プロジェクトのディレクトリが見れるだけです。

f:id:o_tomomichi:20171031113622p:plain

ポート指定してアクセス

これはデフォルトで80番ポートを見に行ってるみたいなのですが、Firebaseはデフォルトで5000番ポートを使ってます。

どうしようかと思っていると、ポートを指定してアプリケーションを見ることができるようでした。

f:id:o_tomomichi:20171031113940j:plain

ターミナルを開いたときと同じメニューから、「info」を選択します。

infoタブが開いたら、一番下にポートを指定してアクセスするためのURLが表示されています。

http://port-XX.PROJECT-NAME-USERNAMEcodeanywhereXXXXXX.codeanyapp.com

こんなやつ。port-XXの部分に好きなポート番号を入れてアクセスすればOKです。

hostも指定する

そして再挑戦。しかし、今度なこんな画面になりました。

f:id:o_tomomichi:20171031114437p:plain

firebaseをlocalhostで動かしていたので、コンテナの外から見れないようです。

というわけでfirebaseの起動オプションを変更。

firebase serve --project PROJECT-NAME --host 0.0.0.0

最後にhostオプションをつけて、0.0.0.0で動かします。

これで再度さっきのURLにアクセスしてみると…

見れた!ついにFirebaseをCodeanywhereローカル(?)上で動かせました!

まとめ

これで夢のクラウドプログラミングやーと満足したのですが、よく考えたらタブレットなんて持っていないことに気づきました。

あとCodeanywhereのiPhoneアプリもあるので入れてみましたが、なかなかバグが多くて実用は怖い感じでした。 (そもそもターミナル機能もなさそう)

というわけで、やっぱりプログラミングはMacBookでやることになりそうです。

よく考えたら本当の不満はAtomが遅いことだったので、いまさらながらSublimeTextデビューしてみようと思います。

おしまい。