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

手順

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

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

hidao’s blog

IT系とか読書ログとか。