2019-09-01

Docker に立てた Cloud9 で共同編集する方法

投稿:2019-09-01, 更新:-, Tag:Docker, cloud9

TL;DR

Cloud9 の引数に --collab をつけて実行し、共同編集するブラウザに ID となる Cookie を登録するんだ!

環境

ホストOS: CentOS Linux release 7.6.1810 (Core) ゲストOS: alpine Linux 3.7 Cloud9: 2018/07/26 Github.com コミット分 Docker: 1.13.1, build b2f74b2/1.13.1

動作確認ブラウザ

Windows10

OS ver: 1903 Chrome: 76.0.3809.132(Official Build) (64 ビット) Microsoft Edge: 44.18362.329.0 Internet Explorer: 11.0.140

Android

OS ver: 8.0.0 Chrome: 76.0.3809.132

iOS

ハード: iPad Pro 10.5 inch OS ver: 12.4.1 Chrome: 76.0.3809.123

手順

  1. Cloud9のコンテナを作成
  2. 共同編集するブラウザの数だけコードを用意
  3. 共同編集するそれぞれブラウザから各々のコードを実行

Cloud9 のコンテナを作成

下記 docker-compose.yml の内容を同じファイル名でコピペして、docker-compose コマンドを実行して Cloud9 のコンテナを作成します。 version が古いのは大目に見てください…

version: '2'

services:
    cloud9:
        container_name: c9
        image: sshinya/alpine-cloud9
        volumes:
            - ./workspace:/workspace  # あらかじめ mkdir ./workspace しておく
        ports:
            - "8080:8080"
        entrypoint: >
            /usr/bin/node /c9/server.js 
            -l 0.0.0.0 
            -p 8080
            -w /workspace 
            -a user:password 
            --collab
$ mkdir workspace        # データ保存先のディレクトリをあらかじめ作っておく
$ ls                     # 確認をしているだけ、このコマンドは実行不要
docker-compose.yml  workspace
$ docker-compose up -d   # コンテナの作成
Creating c9 ... done

共同編集するブラウザの数だけ ID を用意

共同編集のための Cookie をブラウザに食わせます。 以下のブックマークレットのid: の値を変えたものを、共同編集する画面分用意しておきます。 共同編集したい各々のブラウザのアドレスバーから実行します。

javascript:(function(){javascript:document.cookie='__c9_uid='+escape(JSON.stringify({id:1}))+';Domain=.com;Max-Age=315360000'})()

共同編集するブラウザからそれぞれの ID を登録

各ブラウザで http://localhost:8080 へアクセスし、Cloud9 を開きます。IDE 画面に切り替わったらアドレスバーより上記ブックマークレットをを実行します。 localhost は適宜接続先 IP アドレスやドメインに読み替えてください。

1度実行すれば、ウィンドウを閉じても効果は続きます。共同編集できなくなったら再度 Cookie を登録するコードをコンソールから実行してください。

参考にした投稿

How to run with multiple users? #241 のコメント 284794640 - c9/core