Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

mrtc0
March 01, 2017
260

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

mrtc0

March 01, 2017
Tweet

More Decks by mrtc0

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. 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やメモリ使用量, プロセス
    数を制限
    ディスク領域の制限
    特に設けていない(!w)
    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. 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