どこにでもいるSEの備忘録

たぶん動くと思うからリリースしようぜ

【自由研究】Vue.js+Flask+Dockerで普通のWebアプリケーションを作る(その3:Dockerコンテナでマイクロサービスっぽくする)

f:id:nogawanogawa:20190320190051p:plain
 

前回はこんな感じのことをやってました。

nogawanogawa.hatenablog.com

今回はDockerなんかを使ってバックエンドAPIを作る準備をします。

アーキテクチャのトレンド

前にもどこかで記事書いた気がするんですが、最近のWebアプリケーションは結構な処理をクライアントサイドに押し付ける設計が拡大しています。 その代表例とも言えるものがSPA(Single Page Application)で、描画(レンダリング)処理は基本的にクライアントサイドで行い、サーバーサイドはWeb APIだけを提供して、通信のコストを削減しています。

f:id:nogawanogawa:20190811165453j:plain:w600

また、機能の拡張・修正のしやすさから、マイクロサービスが流行ってたりもします。

nogawanogawa.hatenablog.com

そんなわけで、サーバーサイドはWeb APIを介した通信を使用する構成にするのが流行りになっています。

コンテナ

マイクロサービスをやろうとすると、多数のサーバーが必要になり、必然的に仮想環境をもりもり使っていくことになるかと思います。 システムのポータビリティという観点では、軽量かつ汎用的に使える仮想環境であるDockerは非常に優れていると言えます。

そんな時代の流れもあって、上期にもDocker・Kubernetesなどのコンテナ周りを結構力を入れて勉強してました。

nogawanogawa.hatenablog.com

作ってみる

次かその次くらいににVueでaxiosをいじったら、そこでフロントエンドとバックエンドが連携するようになります。 今回は画面はあまり変化しませんが、そのへんご了承ください。

とりあえず、今回はマイクロサービスと言っても超簡単なレベルで作ってみたいと思います。 イメージとしてはこんな感じですかね。

f:id:nogawanogawa:20190811170516j:plain:w600

3層構造で言うところの、アプリケーション層にFlask、DB層にMySQLを使ってみます。 この辺はあんま変化球はまだ投げないでおきます。 今回のテーマはあくまでDockerなんで、サーバーロジックについてはサラッと行きたいと思います。

Docker

上の図から、作らないといけないコンテナはFlaskとMySQLの2つでした。 というわけで、この2つのコンテナを作ることを考えます。

これ読んでる方はDocker周りのお作法は私なんかよりずっと詳しいと思いますが、一応補足しときます。 Dockerではコンテナを作る際には、コンテナの雛形であるDocker Imageを作る必要があります。 そして、そのDocker Imageを使ってコンテナを生成することになります。

MySQL

まず簡単なのはMySQLのコンテナで、公式で提供されているDocker Imageがあります。 なのでそれを使えば、docker-composeだけでいけます。ワンパンすよ。ワンパンワンパン!!

いろいろ書いてありますが、

  • ユーザー名:user
  • パスワード:password
  • ポート番号:3306

のとこを、いい感じに書き直していただければよろしいかと思います。←語彙力

過去の記事も合わせてご参照ください。

nogawanogawa.hatenablog.com

そんでもって、MySQLの挙動を確認してみます。 まずはテーブルを作ってみます。テーブル定義はこんな感じです。

gist.github.com

サンプルデータはこんな感じに作ってみます。

中身を確認してみるとこんな感じでした。

+----+--------+-----------+---------+
| ID | TITLE  | CATEGORY  | CONTENT |
+----+--------+-----------+---------+
|  1 | curry  | food      | good    |
|  2 | poteto | vegitable | good    |
|  3 | onion  | vegitable | good    |
|  4 | poak   | meat      | good    |
+----+--------+-----------+---------+

Flask

次に、Flask用のコンテナですが、こちらは色々カスタマイズしたいのでDockerfileを自前でDocker Imageを作成します。 書いてみるとこんな感じですね。

最後に、合わせたやつのdocker-composeも書いときます。

Flaskでサーバー立てる

今年は99%サーバーサイドの開発はPythonを使っているような気がします。 超絶簡単にサーバーを立てれるFlaskは非常に重宝しています。

コードはこんな感じにしました。

できたもの

今回はバックエンドのAPIを作っただけなんで、URLベタ書きで動作確認します。

docker-compose up

サービスを起動したら下記にアクセスします。

http://localhost:5000

するとDBの中身が返ってきていることがわかります。

{"results":[{"category":"food","content":"good","index":1,"title":"curry"},{"category":"vegitable","content":"good","index":2,"title":"poteto"},{"category":"vegitable","content":"good","index":3,"title":"onion"},{"category":"meat","content":"good","index":4,"title":"poak"}]}

感想

しゅごい(小並感)