OSC 2016 Hiroshima LT "オンラインコンパイラAmadeusの開発"

Transcript

1. オンラインコンパイラ
   「Amadeus」の開発
   OSC 前夜祭
   @mrtc0
   

   View Slide

2. > whoami
   もりたこ(@mrtc0)
   広島工業大学 B3
   #seccamp'15,16
   #ctf4b NW/Forensics
   WebApp Pentenster
   (好きな||嫌いな)脆弱性: DOM Based XSS
   2
   

   View Slide

3. Amadeusとは？
   3
   

   View Slide

4. Aiming to the most accessible development
   environment for university students
   学生のための開発環境(オンラインコンパイラ)
   4
   

   View Slide

5. 牧瀬紅莉栖とは関係ないです
   5
   

   View Slide

6. > 背景
   プログラミング初学者がどこで躓くのか
   テスト(試験)だけではわからない
   コーディングの様子を監視したい
   環境構築に時間を取らせたくない
   VisualStudio, MSYS, Cygwin...
   オンラインコンパイルつくるか！!
   6
   

   View Slide

7. > 構成
   バックエンド
   Django REST Framework, NodeJS
   フロントエンド
   VueJS, ReactJS, Electron
   コンテナ
   LXD
   7
   

   View Slide

8. View Slide

9. > 特徴
   多言語
   C(gcc,clang), Java, Scala, Python, Ruby...
   RESTful API
   補完可能なエディタ
   AceEditorをfork
   入力を1文字ずつロギング
   Online Judge機能
   9
   

   View Slide

10. > 特徴
    ユーザーのリアルタイム監視
    コピペの検知, 正解までのdiffなど
    変数トレーサー
    GDBのPythonAPIを利用
    Terminal
    gottyをfork
    etc
    チャットなど
    10
    

    View Slide

11. > DEMO
    11
    

    View Slide

12. > コンテナ
    ユーザーのコードを安全に実行
    コード実行環境を隔離/仮想化
    コンテナ技術の利用
    cgroupsやNamespaceによるホストとの分離
    ホスト側/他コンテナに影響を及ぼさない
    できるだけ速く,オーバーヘッドが小さいもの
    12
    

    View Slide

13. > どのコンテナ使うか問題
    Docker? FreeBSD Jail? LXC?
    Dockerはオーバーヘッドが大きい印象があった
    速度, スケーラビリティでLXDを採用
    LXCをより柔軟に扱うための機構
    (OpenStackプラグインもあるので遊びたい...
    13
    

    View Slide

14. > Security
    各種リソース制限
    LXC cgroupsでCPUやメモリ使用量, プロセス
    数を制限
    ディスク領域の制限
    特に設けていない(！ｗ）
    LXDはZFS, btrfsでのみ制限可能
    Quotaで制限をかけるか検討中
    14
    

    View Slide

15. > Restful API
    Django REST Frameworkで実装
    $.ajax({
    'type': 'POST',
    'url': '/api/compiler/',
    'data' : {
    'post_code': '#include \nint main()...',
    'stdin': '1 2 3',
    'language': 'c-gcc',
    ...
    },
    'dataType' : 'json',
    ...
    15
    

    View Slide

16. > ユーザーの監視
    担当講師が1人ずつ見て回るのは大変
    全員のコーディング状況を把握
    チャットによるアドバイス
    Server Sent EventとWebSocket
    16
    

    View Slide

17. > DjangoでWebSocket
    しんどい
    Nginx + uwsgiで苦戦
    NodeJS(Express)で実装することに
    DjangoのセッションをNodeJSから利用する
    Redisにセッション情報を保存
    NginxのリバースプロキシでCookieのSOP制限
    回避
    17
    

    View Slide

18. View Slide

19. > その他
    無限ループ対策
    SIGALRMをPythonから叩く
    @timeout(5)
    def execute_code():
    # コンテナでコードを実行する関数
    ...
    except TimeoutError:
    container.execute('kill -9 a.out')
    ...
    19
    

    View Slide

20. > 作ってみて/運用してみて
    型...
    UI構成が難しい
    ここが一番しんどかった
    どこに何のボタンを配置すればいいか
    DB, モデル設計大事...
    「SQLアンチパターン」をもっと早く読んでお
    くべきだった...
    20
    

    View Slide

21. > 作ってみて/運用してみて
    学習から試験まで使える上に全てのログが取れる
    ので重点的に教える箇所が分かる
    ユーザー(学生)から好評
    やはりこれが一番うれしかった
    21
    

    View Slide

22. > 今後の展望
    取得したデータの分析
    対応言語などの拡張
    教師の自動化とプログラムの評価
    できればOSS化していきたい
    22
    

    View Slide