Slide 1
Slide 1 text
#PyConK #PyConK_A
プログラミング＆実行
できるWEBアプリを手作り
PyCon Kyushu 2024 KAGOSHIMA
うーたん
Slide 2
Slide 2 text
#PyConK #PyConK_A
自己紹介
2
Slide 3
Slide 3 text
#PyConK #PyConK_A
自己紹介
● うーたん
○ X：@uutan1108
● 株式会社ゆめみ
○ 新卒２年目
○ サーバーサイドエンジニア
● 趣味
○ アニメを観ること
● お仕事
○ サーバーサイド Kotlin
3
Slide 4
Slide 4 text
#PyConK #PyConK_A
栃木から来ました！鹿児島初上陸です！
4
Slide 5
Slide 5 text
#PyConK #PyConK_A
#PyConKyushu をつけて
鹿児島の食べ物、観光地を教えてください！
5
Slide 6
Slide 6 text
#PyConK #PyConK_A
「プログラミング＆実行できるWEBアプリを手作り」
していきます！
6
Slide 7
Slide 7 text
#PyConK #PyConK_A
「プログラミング＆実行できるWEBアプリ」
とは
7
Slide 8
Slide 8 text
#PyConK #PyConK_A
paiza.io のようなWEBアプリケーション
1. ブラウザ上のエディタに
コードを入力
2. 指定された言語をサーバー
で実行
3. 結果をブラウザに表示
するアプリケーション
8
https://paiza.io
Slide 9
Slide 9 text
#PyConK #PyConK_A
ざっくり構成図
9
Slide 10
Slide 10 text
#PyConK #PyConK_A
ざっくり構成図
10
https://paiza.io
あらゆる言語を実行する
複雑そうなバックエンド
Slide 11
Slide 11 text
#PyConK #PyConK_A
多分こんな感じ
11
Slide 12
Slide 12 text
#PyConK #PyConK_A
ざっくり構成図
12
https://paiza.io
あらゆる言語を実行する
複雑そうなバックエンド
バックエンドが難しそう
なので作ってみる！
Slide 13
Slide 13 text
#PyConK #PyConK_A
目標
13
Slide 14
Slide 14 text
#PyConK #PyConK_A
目標
14
Python でバックエンドを書いて Ruby, Rust のコードの
実行結果をフロントエンドで表示する
※ Ruby, Rust なのは動的型付けと静的型付けの両方動くように作りたかったため
Slide 15
Slide 15 text
#PyConK #PyConK_A
試作品１号
15
Slide 16
Slide 16 text
#PyConK #PyConK_A
16
言語を指定
コードを入力
標準入力を入力
実行結果を出力
Slide 17
Slide 17 text
#PyConK #PyConK_A
実装方針
17
Slide 18
Slide 18 text
#PyConK #PyConK_A
1つのコンテナに Python, Ruby, Rust の
実行環境を作る
18
Slide 19
Slide 19 text
#PyConK #PyConK_A
コンテナとは
19
Slide 20
Slide 20 text
#PyConK #PyConK_A
コンテナとは
コンピューター上に作成された
仮想環境。
コンテナを用いると１つのコン
ピュータ上に複数の仮想環境を
作成することができる。
20
コンテナーを使用してアプリケーションを構築、共有、実行する
https://www.docker.com/ja-jp/resources/what-container/
Slide 21
Slide 21 text
#PyConK #PyConK_A
1つのコンテナに Python, Ruby, Rust の実行環境を作る
21
Slide 22
Slide 22 text
#PyConK #PyConK_A
1つのコンテナに Python, Ruby, Rust の実行環境を作る
22
１つのコンテナにPython, Ruby, Rust
の実行環境がある
Slide 23
Slide 23 text
#PyConK #PyConK_A
試作品１号
1. FastAPI でフロントエンドからコードを受け取る
2. 受け取ったコードをファイルに書き込む
3. FastAPI から ファイルを実行する Shell を実行
4. Ruby, Rust がファイルを実行する
5. Shell の実行結果をフロントエンドに返す
23
※ FastAPI は Python の Web フレームワーク
Slide 24
Slide 24 text
#PyConK #PyConK_A
作ってみる
24
Slide 25
Slide 25 text
#PyConK #PyConK_A
FastAPI でフロントエンドからコードを受け取る
25
Slide 26
Slide 26 text
#PyConK #PyConK_A
受け取ったコードをファイルに書き込む
26
Slide 27
Slide 27 text
#PyConK #PyConK_A
FastAPI から ファイルを実行する Shell を実行
27
Slide 28
Slide 28 text
#PyConK #PyConK_A
FastAPI から ファイルを実行する Shell を実行
28
Slide 29
Slide 29 text
#PyConK #PyConK_A
Python から Shell を実行する
# dateコマンドを実行して文字列として結果を得る
import subprocess
from subprocess import PIPE
proc = subprocess.run("ruby main.rb", shell=True, stdout=PIPE, stderr=PIPE,
text=True)
date = proc.stdout
print(data)
# Hello World!
29
Slide 30
Slide 30 text
#PyConK #PyConK_A
Shell の実行結果をフロントエンドに返す
30
Slide 31
Slide 31 text
#PyConK #PyConK_A
できた
31
Slide 32
Slide 32 text
#PyConK #PyConK_A
Ruby は動作した
32
$ ruby main.rb < input.txt
Python から実行したコマンド
Slide 33
Slide 33 text
#PyConK #PyConK_A
Rust も動作した
33
$ rustc main.rs && ./main < input.txt
Python から実行したコマンド
Slide 34
Slide 34 text
#PyConK #PyConK_A
エラー時も表示される
34
} の忘れ
Slide 35
Slide 35 text
#PyConK #PyConK_A
補足
● input.txt にはフロントエンドから受け取った標準入力の
値を書き込んでいる
● input.txt を実行コマンドにリダイレクトさせている
35
Slide 36
Slide 36 text
#PyConK #PyConK_A
何とかできたが、
36
Slide 37
Slide 37 text
#PyConK #PyConK_A
万能な Docker コンテナが出来上がった
37
※ 後から言語を追加した結果の Dockerfile
Slide 38
Slide 38 text
#PyConK #PyConK_A
Dockerfile とは
38
Slide 39
Slide 39 text
#PyConK #PyConK_A
Dockerfile とは
39
Docker初心者がDockerfile,Image,Containerの関係を感覚的に理解する
https://cpptake.com/archives/491
Slide 40
Slide 40 text
#PyConK #PyConK_A
Dockerfile とは
40
Docker初心者がDockerfile,Image,Containerの関係を感覚的に理解する
https://cpptake.com/archives/491
Dockerfile が大きくなるとイメージも
大きくなる
Slide 41
Slide 41 text
#PyConK #PyConK_A
Dockerfile とは
41
Docker初心者がDockerfile,Image,Containerの関係を感覚的に理解する
https://cpptake.com/archives/491
Dockerfile が大きくなるとコンテナも
大きくなる
Slide 42
Slide 42 text
#PyConK #PyConK_A
万能な Docker コンテナが出来上がった
42
※ 後から言語を追加した結果の Dockerfile
Slide 43
Slide 43 text
#PyConK #PyConK_A
イメージもコンテナも大きくて多機能
43
※ 後から言語を追加した結果の Dockerfile
Slide 44
Slide 44 text
#PyConK #PyConK_A
イメージもコンテナも大きくて多機能だが...
44
Slide 45
Slide 45 text
#PyConK #PyConK_A
「Dockerfile を書くベストプラクティス」
を無視していた
45
Slide 46
Slide 46 text
#PyConK #PyConK_A
「不要なパッケージのインストール禁止」
ができていない
46
Slide 47
Slide 47 text
#PyConK #PyConK_A
「不要なパッケージのインストール禁止」ができていない
余分な、又は、あったほうが良いだろうという程度の必須は
ないパッケージのインストールを避けてください。例えば、
データベースのイメージであれば、テキストエディタは不要
です。
余分な又は不要なパッケージのインストールを避ければ、イ
メージの複雑さ、依存関係、ファイルサイズ、構築時間をそ
れぞれ減らせます。
47
Dockerfile を書くベストプラクティス
https://docs.docker.jp/develop/develop-images/dockerfile_best-practices.html
Slide 48
Slide 48 text
#PyConK #PyConK_A
● イメージのビルドが長すぎる
● 少し変更したらビルド失敗
● イメージが大きい
48
※ 後から言語を追加した結果の Dockerfile
Slide 49
Slide 49 text
#PyConK #PyConK_A
「アプリケーションを切り離す」
もできていない
49
Slide 50
Slide 50 text
#PyConK #PyConK_A
「アプリケーションを切り離す」もできていない
各コンテナはただ１つだけの用途を持つべきです。アプリ
ケーションを複数のコンテナに切り離すことで、水平スケー
ルやコンテナの再利用がより簡単になります。
コンテナを綺麗（クリーン）に保ち、可能であればモジュー
ル化します。コンテナがお互いに依存する場合は、 Docker
コンテナ・ネットワーク を使い、それぞれのコンテナを通信
可能にします。
50
Dockerfile を書くベストプラクティス
https://docs.docker.jp/develop/develop-images/dockerfile_best-practices.html
Slide 51
Slide 51 text
#PyConK #PyConK_A
● １コンテナの複数の機能
● コンテナ間通信なし
● 再利用可能なコンテナなし
51
※ 後から言語を追加した結果の Dockerfile
Slide 52
Slide 52 text
#PyConK #PyConK_A
試作品２号
52
Slide 53
Slide 53 text
#PyConK #PyConK_A
ブラウザの画面に変化なし
バックエンドを改善する
53
Slide 54
Slide 54 text
#PyConK #PyConK_A
実装方針
54
Slide 55
Slide 55 text
#PyConK #PyConK_A
「Dockerfile を書くベストプラクティス」を意識して
言語ごとにコンテナを分けて実行環境を作る
55
Slide 56
Slide 56 text
#PyConK #PyConK_A
言語ごとにコンテナを分けて実行環境を作る
56
Slide 57
Slide 57 text
#PyConK #PyConK_A
言語ごとにコンテナを分けて実行環境を作る
57
別なコンテナにPython, Ruby, Rust
の実行環境がある
Slide 58
Slide 58 text
#PyConK #PyConK_A
複数のコンテナを管理するために
Docker Compose を使う
58
Slide 59
Slide 59 text
#PyConK #PyConK_A
Docker Compose とは
59
【入門】Docker Composeとは？インストールと使い方
https://www.kagoya.jp/howto/cloud/container/dockercompose/
Slide 60
Slide 60 text
#PyConK #PyConK_A
Docker Compose とは
Docker Compose によって、複数の
コンテナを1度に操作できるように
なる。
あらかじめ compose.yaml 上に複数
の Docker コンテナを起動させる定
義をする。
60
【入門】Docker Composeとは？インストールと使い方
https://www.kagoya.jp/howto/cloud/container/dockercompose/
Slide 61
Slide 61 text
#PyConK #PyConK_A
試作品２号
1. FastAPI でフロントエンドからコードを受け取る
2. 受け取ったコードをファイルに書き込む
3. FastAPI から ファイルを実行する Shell を実行
4. Ruby, Rust がファイルを実行する
5. Shell の実行結果をフロントエンドに返す
61
Slide 62
Slide 62 text
#PyConK #PyConK_A
実装方針は変わらないが、
Python, Ruby, Rust のそれぞれのコンテナ間で
ファイルの共有しなければならない
62
Slide 63
Slide 63 text
#PyConK #PyConK_A
通常、別コンテナ内のファイルにアクセスできない
63
Slide 64
Slide 64 text
#PyConK #PyConK_A
別コンテナのファイルにアクセスするために
64
Slide 65
Slide 65 text
#PyConK #PyConK_A
データ・ボリューム
65
Slide 66
Slide 66 text
#PyConK #PyConK_A
データ・ボリュームとは
データの保持や共有のために、複数の便利な機能を提供します。
66
コンテナでデータを管理する
https://docs.docker.jp/engine/userguide/dockervolumes.html
Slide 67
Slide 67 text
#PyConK #PyConK_A
データ・ボリュームとは[図解]
67
複数のコンテナからアクセス
可能なディレクトリ
Slide 68
Slide 68 text
#PyConK #PyConK_A
68
services:
web:
build: ./server
container_name: playground-web
volumes:
- ./server/app:/app
- /var/run/docker.sock:/var/run/docker.sock
ports:
- 80:8000
ruby:
build: ./docker/ruby
container_name: playground-ruby
volumes:
- ./server/app/share:/user/share
tty: true
compose.yaml
Slide 69
Slide 69 text
#PyConK #PyConK_A
69
services:
web:
build: ./server
container_name: playground-web
volumes:
- ./server/app:/app
- /var/run/docker.sock:/var/run/docker.sock
ports:
- 80:8000
ruby:
build: ./docker/ruby
container_name: playground-ruby
volumes:
- ./server/app/share:/user/share
tty: true
compose.yaml
コンテナ間でボリュームを
共有している
Slide 70
Slide 70 text
#PyConK #PyConK_A
もう一つ考えなければならない
70
Slide 71
Slide 71 text
#PyConK #PyConK_A
Python のコンテナからRuby, Rust の
コンテナに命令しなければならない
71
Slide 72
Slide 72 text
#PyConK #PyConK_A
通常、別コンテナに対してコマンドは実行できない
72
Slide 73
Slide 73 text
#PyConK #PyConK_A
別コンテナに対してコマンドを実行するために
73
Slide 74
Slide 74 text
#PyConK #PyConK_A
Docker outside of Docker
74
Slide 75
Slide 75 text
#PyConK #PyConK_A
Docker outside of Docker とは
コンテナ内からホストマシンのコンテナを操作する方法
75
Slide 76
Slide 76 text
#PyConK #PyConK_A
Docker outside of Docker とは[図解]
76
Docker ソケットをホスト OS とコンテナで
共有することでホスト OS を介して命令可能
Slide 77
Slide 77 text
#PyConK #PyConK_A
Docker ソケットを共有しているコンテナ
version: "3"
services:
web:
build: ./server
volumes:
- ./server/app:/app
- /var/run/docker.sock:/var/run/docker.sock
ports:
- 80:8000
77
compose.yaml
Slide 78
Slide 78 text
#PyConK #PyConK_A
Docker ソケットを共有しているコンテナ
version: "3"
services:
web:
build: ./server
volumes:
- ./server/app:/app
- /var/run/docker.sock:/var/run/docker.sock
ports:
- 80:8000
78
compose.yaml
volumes に Docker ソケットを
共有していることを書く
Slide 79
Slide 79 text
#PyConK #PyConK_A
Docker outside of Docker の実用例
79
Slide 80
Slide 80 text
#PyConK #PyConK_A
別コンテナに Selenium を分ける
● Python のコンテナから
Selenium を切り出して
テストすることができる
● コンテナを分けることで
コンテナの起動の時間を
短縮
80
自動テストの実行環境を Dockerでお気軽引っ越し
https://techblog.zozo.com/entry/testauto_env_rebuild
Slide 81
Slide 81 text
#PyConK #PyConK_A
これで、
コンテナ間でファイルを共有、
コンテナから別コンテナに命令が可能に
81
Slide 82
Slide 82 text
#PyConK #PyConK_A
Docker outside of Docker 、データ・ボリューム使えば
言語ごとにコンテナを分けて実行環境を作れる
82
Slide 83
Slide 83 text
#PyConK #PyConK_A
作ってみる
83
Slide 84
Slide 84 text
#PyConK #PyConK_A
FastAPI でフロントエンドからコードを受け取る
84
Slide 85
Slide 85 text
#PyConK #PyConK_A
受け取ったコードをファイルに書き込む
85
Slide 86
Slide 86 text
#PyConK #PyConK_A
FastAPI から ファイルを実行する Shell を実行
86
Slide 87
Slide 87 text
#PyConK #PyConK_A
FastAPI から ファイルを実行する Shell を実行
87
Slide 88
Slide 88 text
#PyConK #PyConK_A
Shell の実行結果をフロントエンドに返す
88
Slide 89
Slide 89 text
#PyConK #PyConK_A
できた
89
Slide 90
Slide 90 text
#PyConK #PyConK_A
言語ごとにコンテナを分けて作れた
● コンテナを役割で分割できた
● それぞれのコンテナのイメージが
小さくなった
● １つのコンテナが停止しても全て
が停止しなくなった
90
Dockerfile
Slide 91
Slide 91 text
#PyConK #PyConK_A
Python の話がなかったので Python の話を
91
Slide 92
Slide 92 text
#PyConK #PyConK_A
Docker SDK for Python
92
Slide 93
Slide 93 text
#PyConK #PyConK_A
Docker SDK for Python
Docker Engine API用のPythonライブラリです。コンテナの
実行、コンテナの管理、Swarmsの管理など、dockerコマン
ドでできることは何でもPythonアプリの中でできるように
なります。
A Python library for the Docker Engine API. It lets you do anything the docker
command does, but from within Python apps – run containers, manage
containers, manage Swarms, etc.
93
Docker SDK for Python
https://docker-py.readthedocs.io/en/stable/
Slide 94
Slide 94 text
#PyConK #PyConK_A
このライブラリで
コンテナからコンテナに命令をしています
94
Slide 95
Slide 95 text
#PyConK #PyConK_A
95
Docker SDK for Python で操作
Slide 96
Slide 96 text
#PyConK #PyConK_A
Docker SDK for Python の使い方
96
Slide 97
Slide 97 text
#PyConK #PyConK_A
97
import docker
def run_code(code, language):
client = docker.from_env()
result = client.containers.get(f"playground-{language}").exec_run(cmd=get_cmd(language))
output = result.output.decode('utf-8')
exit_code = result.exit_code
return {
"result": output,
"exit_code": exit_code
}
def get_cmd(language):
if language == "ruby":
return ["sh", "-c", "ruby main.rb"]
elif language == "rust":
return ["sh", "-c", "rustc main.rs && ./main"]
※ Docker SDK for Python に関係がないコードは省略
Python アプリのコード
Slide 98
Slide 98 text
#PyConK #PyConK_A
98
import docker
def run_code(code, language):
client = docker.from_env()
result = client.containers.get(f"playground-{language}").exec_run(cmd=get_cmd(language))
output = result.output.decode('utf-8')
exit_code = result.exit_code
return {
"result": output,
"exit_code": exit_code
}
def get_cmd(language):
if language == "ruby":
return ["sh", "-c", "ruby main.rb"]
elif language == "rust":
return ["sh", "-c", "rustc main.rs && ./main"]
※ Docker SDK for Python に関係がないコードは省略
インポート
Slide 99
Slide 99 text
#PyConK #PyConK_A
99
import docker
def run_code(code, language):
client = docker.from_env()
result = client.containers.get(f"playground-{language}").exec_run(cmd=get_cmd(language))
output = result.output.decode('utf-8')
exit_code = result.exit_code
return {
"result": output,
"exit_code": exit_code
}
def get_cmd(language):
if language == "ruby":
return ["sh", "-c", "ruby main.rb"]
elif language == "rust":
return ["sh", "-c", "rustc main.rs && ./main"]
※ Docker SDK for Python に関係がないコードは省略
クライアントをインスタンス化
DockerソケットをホストOSと
共有しているので他のコンテナを操作可能
Slide 100
Slide 100 text
#PyConK #PyConK_A
100
import docker
def run_code(code, language):
client = docker.from_env()
result = client.containers.get(f"playground-{language}").exec_run(cmd=get_cmd(language))
output = result.output.decode('utf-8')
exit_code = result.exit_code
return {
"result": output,
"exit_code": exit_code
}
def get_cmd(language):
if language == "ruby":
return ["sh", "-c", "ruby main.rb"]
elif language == "rust":
return ["sh", "-c", "rustc main.rs && ./main"]
※ Docker SDK for Python に関係がないコードは省略
コンテナ名を指定してコンテナを取得
フロントエンドからの入力で動的に
language 変数が変化
Slide 101
Slide 101 text
#PyConK #PyConK_A
101
言語を指定
language 変数
Slide 102
Slide 102 text
#PyConK #PyConK_A
102
language 変数で指定するコンテナを
変える
Slide 103
Slide 103 text
#PyConK #PyConK_A
103
import docker
def run_code(code, language):
client = docker.from_env()
result = client.containers.get(f"playground-{language}").exec_run(cmd=get_cmd(language))
output = result.output.decode('utf-8')
exit_code = result.exit_code
return {
"result": output,
"exit_code": exit_code
}
def get_cmd(language):
if language == "ruby":
return ["sh", "-c", "ruby main.rb"]
elif language == "rust":
return ["sh", "-c", "rustc main.rs && ./main"]
※ Docker SDK for Python に関係がないコードは省略
language 変数を元に実行する
コマンドを変化させる
Slide 104
Slide 104 text
#PyConK #PyConK_A
104
import docker
def run_code(code, language):
client = docker.from_env()
result = client.containers.get(f"playground-{language}").exec_run(cmd=get_cmd(language))
output = result.output.decode('utf-8')
exit_code = result.exit_code
return {
"result": output,
"exit_code": exit_code
}
def get_cmd(language):
if language == "ruby":
return ["sh", "-c", "ruby main.rb"]
elif language == "rust":
return ["sh", "-c", "rustc main.rs && ./main"]
※ Docker SDK for Python に関係がないコードは省略
指定されたコンテナに対して
コマンドを実行
Slide 105
Slide 105 text
#PyConK #PyConK_A
105
import docker
def run_code(code, language):
client = docker.from_env()
result = client.containers.get(f"playground-{language}").exec_run(cmd=get_cmd(language))
output = result.output.decode('utf-8')
exit_code = result.exit_code
return {
"result": output,
"exit_code": exit_code
}
def get_cmd(language):
if language == "ruby":
return ["sh", "-c", "ruby main.rb"]
elif language == "rust":
return ["sh", "-c", "rustc main.rs && ./main"]
※ Docker SDK for Python に関係がないコードは省略
コマンドの実行結果を取得
Slide 106
Slide 106 text
#PyConK #PyConK_A
106
import docker
def run_code(code, language):
client = docker.from_env()
result = client.containers.get(f"playground-{language}").exec_run(cmd=get_cmd(language))
output = result.output.decode('utf-8')
exit_code = result.exit_code
return {
"result": output,
"exit_code": exit_code
}
def get_cmd(language):
if language == "ruby":
return ["sh", "-c", "ruby main.rb"]
elif language == "rust":
return ["sh", "-c", "rustc main.rs && ./main"]
※ Docker SDK for Python に関係がないコードは省略
フロントエンドに実行結果と
Exit コードを返す
Slide 107
Slide 107 text
#PyConK #PyConK_A
ブラウザに結果が表示
107
実行結果が表示される
Slide 108
Slide 108 text
#PyConK #PyConK_A
ブラウザに結果が表示
108
} の忘れ
実行結果が表示される
Exit コードが 0 以外の場合は赤文字
Slide 109
Slide 109 text
#PyConK #PyConK_A
まとめ
109
Slide 110
Slide 110 text
#PyConK #PyConK_A
試作品２号を作るハンズオンは本にあります！
110
Slide 111
Slide 111 text
#PyConK #PyConK_A
コードの詳細などは本に書きました！買ってください！
111
月刊I/O 3月号、4月号に
「プログラミング&
実行できるWEBアプリを手作り」
掲載されたので読んでね
Slide 112
Slide 112 text
#PyConK #PyConK_A
ソースコード
https://github.com/OHMORIYUSUKE/io-book-playground
112
Slide 113
Slide 113 text
#PyConK #PyConK_A
宣伝
113
Slide 114
Slide 114 text
#PyConK #PyConK_A
ゆめみ大技林 '24
技術書典で頒布している技術同人誌に
寄稿したので読んでください！ダウン
ロードできます！
「読むとLTがしたくてたまらなくなる
マニュアル」で書きました！
114
Slide 115
Slide 115 text
#PyConK #PyConK_A
115
Slide 116
Slide 116 text
#PyConK #PyConK_A
116
Slide 117
Slide 117 text
#PyConK #PyConK_A
117
Slide 118
Slide 118 text
#PyConK #PyConK_A
118
エンジニア募集中です
ご清聴ありがとうございました