ちょっと前にこちらの記事で試したとおり、現在iPadからcloud9を使うことはできません。
そのうちAWSかappleが解決してくれるかもしれませんが、現状でもiPadから使うことができるVS onlineを試してみることにしました。 アカウントのセットアップとかは、こちらの公式ドキュメントの通りにやれば数ステップで簡単にできます。*1
この手順だと、Azureのインスタンスを立ちあげてそこにブラウザからアクセスする形で使うわけですが、このアクセス先のインスタンスを普段cloud9で使っているAWSのインスタンスにしてしまおうというのが今回の記事の目的です。
VS codeのインストール
cloud9でも同じように既存のインスタンスにアクセスすることができますが、その時のアクセス先インスタンスは
- sshでアクセスできること
- python2.7がインストールされていること
- node.js 0.6.16以降がインストールされていること
という条件になってました。一方、VS onlineの場合はVS codeを導入してVS online用のextensionをセットアップする必要があるようです。
といっても、パッケージ化されてるのでコマンドラインからこんな感じで楽々とインストールできます。
$ sudo snap install --classic code code 78a4c914 from Visual Studio Code (vscode✓) installed
X サーバのインストール
さっそくVS codeを起動・・・と言いたいのですが、VS codeをインストールしたマシンはディスプレイもなければキーボードやマウスも繋がってません(たぶん)。手元で使っているPC(以下、ローカルPC)からリモートマシンのVS codeを操作するために、ローカルPCにXサーバをインストールしてX11転送が使えるようにします。
Xサーバのソフトはmacの場合は、XQuartzを、windowsならVcXsrvあたりをインストールしてください。
www.xquartz.org sourceforge.net
インストールが完了したら、xlogoとかを起動してみて、正常にXサーバがインストールできていることを確認しましょう。
ssh接続の設定&X11 転送の確認
続いて、AWSのwebコンソールでインスタンスに対してssh接続ができるように設定します。
EC2コンソールの左ペインから、"セキュリティーグループ"を選んでcloud9で使われているセキュリティグループを選んでください。
Edit inbound rulesボタンを押すとずらーっとルールが書かれた画面に遷移するのでMy IPからのssh接続を許可します。
あとは手元のPCの公開鍵を、cloud9のterminalから~/.authorized_keysに追記すればsshでアクセスできるようになります。
ターミナルを開いて-Yオプションをつけてcloud9用のインスタンスにsshでログインし、xeyesを起動します。*2
> ssh -Y ubuntu@cloud9のマシンのIPアドレス $ xeyes
無事にかわいい目玉が画面に表示されたら、Xまわりの作業は終了です。*3
これでようやく、インストールしたVS codeを起動することができます。
VS online用extensionのインストール
続けて同じコンソールで
$ code
と入力してしばらく待つとそのうちVS codeの画面が手元のPCで表示されます。
次はこちらの手順に沿って、VS onlineで設定をしていきます。
まずサイドバーのextensionボタンを押して 'Visual Studio Online' を検索し、表示されたextensionをインストールします。 最初、検索ウィンドウに 'VS online' って入力して該当するextensionが出てこなかったもんで、小一時間悩んでましたが手順を良く読むと確かに、
search for 'Visual Studio Online'
書かれてますorz
インストールしたら、まずはAzureにログインしろ話はそれからだ(意訳)って言われるので、Singinボタンを押してみます。
Xの別窓が立ち上がるんですが、私の環境の場合途中で止まってしまって、10秒も待っても返事が無いけど別の方法でサインインするけ?と聞かれてました。
再実行すれば行けそうな気もするけど、そもそもこの状態から再実行するボタンが無いのでとりあえず "Use Device Code" ボタンを押してみます。するとここへアクセスしてコードを入力しろというような表示とともに、9文字のアルファベットとか数字とかの文字列が表示されます。
駄目元で手元のPCのブラウザでこのURLにアクセスして、表示された文字列を入力&MSアカウントでサインインしてみたのですが、やっぱりAzure accountにsign inしてねっていう通知が出てきます。
ここでsign inボタンをクリックすると、google chromeがXで立ち上がろうとするのですがしばらく待ってもこんな画面のままでchromeのUIすら表示されません。
単に時間がかかっているだけかと思ってたのですが、google chromeがデフォルトでhardware accelarationを有効にしているせいで転送先のXサーバ(要は手元のPCにインストールされているXQuartz)で描画できないのが原因じゃないかとのことです。
firefoxなら大丈夫説が書かれてたので、google-chromeをアンインストールしてfirefoxを入れてみます。
> sudo apt-get remove google-chrome > sudo apt-get install firefox
続けて、firefoxを起動して設定メニューからデフォルトブラウザに設定します。
これが
こうなればOK
その後、VS Codeの画面に戻って、remote explorerサイドバーからVS ONLINEの項目の下にある"Sign in to view environments"をクリックします。
firefoxが立ち上がって1分くらい待っているとMSアカウントの認証画面が表示されるのでログインします。
認証まではうまく行くんですが、残念ながらVS codeに帰ることができません・・・orz
その後、色々とぐぐっていたところこちらのQiita記事に解決方法が書かれてました。
VNCで接続しているかX11で接続しているかの違いはありますが、たぶん同じ原因だろうということで同じ手順を試してみました。
開発者ツールのnetworkタブを開いた状態で同じように認証すると、さきほどの"The address wasn't understood"と書かれた画面に遷移したところで、302が返ってきているのが見えます。response headerの中のlocationにvscode://・・・というめっちゃ長いURLが見えるのでこれをコピーして、terminalから次のコマンドを実行します。
> xdg-open 'vscode://ms-vsonline.vsonline/signin?code=(以下省略)'
その後、VS Codeの画面を見るとextensionがこのURIを開くのを許可しますか?というダイアログが表示されるので、Openをクリックすれば認証は完了です。
この後、ドキュメントによると VS Online: Register Local Environment というコマンドを実行するようにと言われているんですが、コマンドパレットから実行しても何も反応しませんでしたorz
そもそも register とか入れてみても候補に出ない状態です。
さてどうしたもんかな〜
*1:実は、以前iPadからセットアップした時にはsafariからアクセスしたらログインしても何も表示されないという現象があって1、2時間はまってたんですが、ブラウザを変えたりMSアカウントを切り替えたりしているうちになんか解決してしまいました。この顛末を記事としてシェアした方が役に立ちそうなんですが、ろくに記録もとらずに試行錯誤してたら使えるようになってたので、結局原因不明のままです :p
*2:たぶん何かパッケージを追加でインストールしないと駄目だと思いますが、この辺の設定をしたのはずいぶん昔なので記憶があやふやです・・・orz
*3:Xquartzの場合はインストール後に一回ログアウトか再起動をしないと駄目だったかもしれません。VcXsrvの人は・・・頑張って:p
