naritoブログ

このブログはDjangoとBootstrap4で作成されました
ソースコード

DjangoとDockerで、オンライン実行環境を作る

プログラミング関連 Django Docker Python 約235日前
2017年4月19日17:25
DockerとDjangoを使ってみます。
Dockerを使うことで素早く環境をセットアップしたり、同じような環境をみんなで利用したり、といったことが可能です。
今回のようなオンライン実行環境では、プログラム上からサーバーマシンの情報を不正に取得しようとしたり、悪意のあるコードが実行される可能性がありますが、Dockerを使う事でそれらを閉じられた仮想環境内で行うことができます。
このような仮想化はオンライン実行環境では必須となるでしょう。

このように、print等でちゃんと出力されます。


エラーの場合もちゃんと出力されてますね。


サーバ側の環境はCentOS7です。まずDockerを以下のようにインストールし、スタートします。
yum -y install docker
systemctl start docker
systemctl enable docker


https://hub.docker.com/search/?isAutomated=0&isOfficial=0&page=1&pullCount=0&q=python&starCount=0
Docker Hubから、Dockerイメージを取得しましょう、
Pythonと検索するといくつか出てきますが、officialのものが良いです。



こちらのページです。
https://hub.docker.com/_/python/

以下のコマンドで、Python環境が入っているDockerイメージを取得しましょう。
docker pull python:3.6


:3.6の部分ですが、他にも色々と指定できます。今回は3.6で行います。



Run a single Python scriptという項目がありますが、そこのコードを試しておきましょう。
まずカレントディレクトリにて、適当にpythonファイルを作ります。main.pyとしましょう。
vim main.py

# 中身
print('Hello World')


そして、そのまま以下のコマンドです。これでHello World等表示されれば大丈夫です。今度はDjango側でこれを呼び出しましょう。
docker run -it --rm --name my-running-script -v "$PWD":/usr/src/myapp -w /usr/src/myapp python:3.6 python main.py



Python3.6
Django1.11
プロジェクト名は「docker」
アプリケーションは一つで、「app」
です。

docker/settings.py


"""
Django settings for docker project.

Generated by 'django-admin startproject' using Django 1.11.

For more information on this file, see
https://docs.djangoproject.com/en/1.11/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/1.11/ref/settings/
"""

import os

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/1.11/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = '$-5=e-(wfs6^(bs#jxtycj@obca$++*x#$z2sq%wcl$p)m=zq%'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = ['*']


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'docker.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'docker.wsgi.application'


# Database
# https://docs.djangoproject.com/en/1.11/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}


# Password validation
# https://docs.djangoproject.com/en/1.11/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/1.11/topics/i18n/

LANGUAGE_CODE = 'ja'

TIME_ZONE = 'Asia/Tokyo'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.11/howto/static-files/

STATIC_URL = '/static/'


変更部分は下記です。
サーバでDjangoを動かす場合は、ALLOWED_HOSTSを指定しましょう。'*'は全てのホストで動かせます。
困ったらとりあえず'*'でも良いです。
ALLOWED_HOSTS = ['*']
...
...
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app',  # 足した
]
...
...
LANGUAGE_CODE = 'ja'

TIME_ZONE = 'Asia/Tokyo'


docker/urls.py


appのurls.pyを読み込むように。
"""docker URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/1.11/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  url(r'^$', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  url(r'^$', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.conf.urls import url, include
    2. Add a URL to urlpatterns:  url(r'^blog/', include('blog.urls'))
"""
from django.conf.urls import url, include
from django.contrib import admin

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^', include('app.urls', namespace='app')),
]



[filter mdiasi1]app/urls.py[end]
今回ビューは一つだけ
from django.conf.urls import url

from . import views

urlpatterns = [
    url(r'^$', views.Home.as_view(), name='home'),
]



app/forms.py


コードを入力するためのフォームが必要なので定義します。
from django import forms


class EditorForm(forms.Form):
    """エディタ部分となるフォーム."""

    code = forms.CharField(
        widget=forms.Textarea,
    )



app/views.py


import os
import shutil
import subprocess
import tempfile

from django.urls import reverse_lazy
from django.views import generic

from .forms import EditorForm

CMD = (
    'docker run -i --rm --name myscript -v {dir_path}:/usr/src/myapp'
    ' -w /usr/src/myapp python:3.6 python main.py'
)


def start_docker(code):
    """dockerコンテナ内でPythonコードを実行する."""
    # tmpディレクトリを生成し、中にmain.pyを作成。中身は入力されたコード
    temp_dir = tempfile.mkdtemp()
    file_path = os.path.join(temp_dir, 'main.py')
    with open(file_path, 'wb') as file:
        file.write(code.encode('utf-8'))

    # 今作ったtmpディレクトリを、コンテナにマウントするよう設定
    cmd = CMD.format(dir_path=temp_dir)
    ret = subprocess.run(
        cmd, timeout=15, shell=True,
        stdout=subprocess.PIPE, stderr=subprocess.STDOUT)

    # 使い終わったら、tmpディレクトリを削除
    shutil.rmtree(temp_dir)
    return ret.stdout


class Home(generic.FormView):
    """/へのアクセスで呼ばれるトップページのビュー."""

    template_name = 'app/home.html'
    form_class = EditorForm
    success_url = reverse_lazy('app:home')

    def form_valid(self, form):
        """送信ボタンでよびだされる."""
        code = form.cleaned_data['code']
        output = start_docker(code)
        context = self.get_context_data(form=form, output=output)
        return self.render_to_response(context)



メインとなるビューです。
class Home(generic.FormView):
    """/へのアクセスで呼ばれるトップページのビュー."""

    template_name = 'app/home.html'
    form_class = EditorForm
    success_url = reverse_lazy('app:home')


フォームの入力を受け取り、それをstart_docker関数に渡して実行結果を受け取ります。
それらをテンプレ―トに渡します。シンプルです。
    def form_valid(self, form):
        """送信ボタンでよびだされる."""
        code = form.cleaned_data['code']
        output = start_docker(code)
        context = self.get_context_data(form=form, output=output)
        return self.render_to_response(context)


start_docker関数です。
def start_docker(code):
    """dockerコンテナ内でPythonコードを実行する."""


まずですが、一時ディレクトリを作成します一時ディレクトリの作成にはtempfile.mkdtempを使用しています。
temp_dir = tempfile.mkdtemp()



tempfile.mkdtemp(suffix=None, prefix=None, dir=None)
可能な限り安全な方法で一時ディレクトリを作成します。 ディレクトリの生成で競合は発生しません。 ディレクトリを作成したユーザ ID だけが、このディレクトリに対して内容を読み出したり、書き込んだり、検索したりすることができます。

mkdtemp() のユーザは用済みになった時に一時ディレクトリとその中身を削除しなければなりません。

prefix, suffix, dir 引数は mkstemp() 関数のものと同じです。

mkdtemp() は新たに生成されたディレクトリの絶対パス名を返します。

バージョン 3.5 で変更: suffix、prefix、dir は bytes の返り値を得るために bytes で渡すことが出来ます。 それ以前は str のみ許されていました。 適切なデフォルト値を使用するよう、suffix と prefix は None を受け入れ、デフォルトにするようになりました。



tempfile.mkdtemp()は一時ディレクトリを作りつつ、そのパスも返してくれます。
そのパスを使い、一時ディレクトリの中にmain.pyを作ります。
main.pyの中身は、フォームに入力された内容です。
    file_path = os.path.join(temp_dir, 'main.py')
    with open(file_path, 'wb') as file:
        file.write(code.encode('utf-8'))



先にこちらを説明します。これはPythonコード実行用のdockerコマンドになります。
一見タプルに見えますが、これは長い文字を複数行にするための方法の一つです。
CMD = (
    'docker run -i --rm --name myscript -v {dir_path}:/usr/src/myapp'
    ' -w /usr/src/myapp python:3.6 python main.py'
)


以下のような文字列になります。
'docker run -i --rm --name myscript -v {dir_path}:/usr/src/myapp -w /usr/src/myapp python:3.6 python main.py'


最初のほうで試したコマンドと大体同じです。
input device is not a TTY 等と怒られたので、-tオプションは消しました。
docker run -it --rm --name my-running-script -v "$PWD":/usr/src/myapp -w /usr/src/myapp python:3.6 python main.py


そして、以下のようにして{dir_path}部分に一時ディレクトリのパスを埋め込みます。
    # 今作ったtmpディレクトリを、コンテナにマウントするよう設定
    cmd = CMD.format(dir_path=temp_dir)


---rmは、実行後にコンテナを削除するオプションです。
-vは、ホストのディレクトリをコンテナ内のディレクトリにマウントします。"$PWD"はカレントディレクトリです。
-wはワーキングディレクトリです。

最初のほうで試した以下のコマンドでは、カレントディレクトリを/usr/src/myappにマウントしました。
先にvim main.pyをしていたので、/usr/src/myappにはmain.pyがあります。
そのまま/usr/src/myappをワーキングディレクトリにしたので、python main.py で無事に実行できた、ということです。
今回はカレントディレクトリの部分が{dir_path}、main.pyを作ってある一時ディレクトリに変わっただけです。

先ほど作ったコマンドの文字列を、実際に実行しています。
    ret = subprocess.run(
        cmd, timeout=15, shell=True,
        stdout=subprocess.PIPE, stderr=subprocess.STDOUT)



作った一時ディレクトリは、必要なくなったら自分で削除しないといけません。
先ほどのrunの出力(Pythonコードの実行結果)も取り出しておきます。
    # 使い終わったら、tmpディレクトリを削除
    shutil.rmtree(temp_dir)
    return ret.stdout



app/base.html


<!DOCTYPE html>
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
    <title>オンラインPython実行環境</title>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <style>
        html, body, form {
            height: 100%;
        }
        #editor {
            height: 70%;
        }
        #output {
            height: 30%;
        }
        
        #output button {
            height: 10%;
        }
        #output pre {
            height: 90%;
            overflow: scroll;
        }
    </style>
  </head>
  <body>
    {% block content %}{% endblock %}

    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

    <!-- Ace Editor settings -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ext-language_tools.js"></script>
    <script src="https://cloud9ide.github.io/emmet-core/emmet.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ext-emmet.js"></script>
    <script>
        var langTools = ace.require("ace/ext/language_tools");
        var editor = ace.edit("code");
        var textarea = $('textarea[name="code"]').hide();
        editor.getSession().setValue(textarea.val());
        editor.getSession().on('change', function(){
          textarea.val(editor.getSession().getValue());
        });
        editor.$blockScrolling = Infinity;
        editor.setOptions({
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true,
            enableEmmet: true,
        });
        editor.setTheme("ace/theme/monokai");
        editor.getSession().setMode("ace/mode/python");
        editor.setFontSize(20);
    </script>
  </body>
</html>


画面の高さのレイアウトになります。
要はエディター部分が7割
出力表示部分が3割、うちボタン部分が1割、表示部分9割 ということです。
    <style>
        html, body, form {
            height: 100%;
        }
        #editor {
            height: 70%;
        }
        #output {
            height: 30%;
        }
        
        #output button {
            height: 10%;
        }
        #output pre {
            height: 90%;
            overflow: scroll;
        }
    </style>



Aceエディタの設定がこちら。色々とオプションがあるようです。
    <!-- Ace Editor settings -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ext-language_tools.js"></script>
    <script src="https://cloud9ide.github.io/emmet-core/emmet.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ext-emmet.js"></script>
    <script>
        var langTools = ace.require("ace/ext/language_tools");
        var editor = ace.edit("code");
        var textarea = $('textarea[name="code"]').hide();
        editor.getSession().setValue(textarea.val());
        editor.getSession().on('change', function(){
          textarea.val(editor.getSession().getValue());
        });
        editor.$blockScrolling = Infinity;
        editor.setOptions({
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true,
            enableEmmet: true,
        });
        editor.setTheme("ace/theme/monokai");
        editor.getSession().setMode("ace/mode/python");
        editor.setFontSize(20);
    </script>



app/home.html


{% extends "app/base.html" %}

{% block content %}
<form action='' method="POST">
    <!-- コード入力エリア -->
    <div id="editor">
        {{ form.code }}
        <div id="code" class="h-100"></div>
    </div>

    <!-- 出力表示エリア -->
    <div id="output" class="bg-inverse">
        <button type="submit" class="btn btn-warning">実行</button>
        <pre class="text-white">{{ output }}</pre>
         {% csrf_token %}
    </div>   

</form>

{% endblock %}