Now Loading...

スタッフブログ

戻る

当社ブログは社員での持ち回りで掲載しております。
ビジネスだけではなく、社内イベント、プライベートなことを書いておりますので予めご承知おきください。

WSL2 + VSCode + Docker で Flask を動かそう!

最近、開発環境を WSL2 + VSCode + Docker に移行しました!
ということでノウハウを書こうかと思ったのですが。。。
Qiita とかを見ると既にたくさんの記事があがってまして、二番煎じ感しかないです、、、が!
リンク集という気持ちで WSL2 で Python の Flask を docker を使って動かすところまでまとめていきたいと思います!

もろもろのインストール

Link: WSL2 + VSCode + Docker 開発環境

上記の記事を参考に

  • WSL2
  • VSCode
  • VSCode の拡張機能(Remote – WSL)
  • Docker Desktop

をインストールします。

VSCode のインストール済み拡張機能のインストール

詳しい説明は省きますが、ホスト環境と WSL 環境は別管理となっています。
このため VSCode で WSL に接続した際に、事前にインストールしている拡張機能がインストールされていません。
自分も最初は「え!?拡張機能は全部入れ直し!?」と思いましたが、安心してください。
ちゃんと引き継ぎ機能がついてます。

下記の図のアイコンをクリックしましょう。
そうすればホスト側の拡張機能が WSL 環境側にインストールされます。

Windows ターミナルのインストール

Windows ターミナルはなくてもいいのですが。。
WSL を起動した際のデフォルトのターミナルにはタブ機能がありません。

ですが Windows ターミナルというアプリを使うとタブ機能が使えます。
なので「tmux わからん!タブほしい!」という方は Windows ターミナルをインストールしましょう。

インストールは公式サイトをご参照ください。
Link: Windows ターミナルをインストールしてセットアップする

また、Windows ターミナルですが、起動時のデフォルトがコマンドプロンプトになっています。
デフォルトを WSL に変更できますので、 WSL をよく使うという方は変更しておくとよいでしょう。

WSL2 のメモリ設定

Link: WSL2によるホストのメモリ枯渇を防ぐための暫定対処

便利な WSL2 ですが、上記の記事の通りにかなりのメモリ喰い虫だったりします。
なんでも、デフォルトでメモリの 80% を使うように設定されているそうで。。
自分の環境では、ブラウザの動作がカクつくレベルになり、作業に支障がでていましたので次の通り設定しています。

  • 搭載メモリ: 8GB
  • 設定メモリ: 3GB(swap 0)

1GB や 2GB を試したところでは、さすがに WSL が動かなかったので 3GB にしています。
それでもたまにフリーズしますが。。(シクシク)

Flask を動かす!

さて、ここからは実際に WSL2 の環境で Flask を docker を使って動かしてみましょう!
とはいえ、ゼロから準備するのはツラミがありますので、下記のサンプルを使っていきたいと思います。

Link: docker / awesome-compose / nginx-flask-mysql

次のような感じでホームディレクトリ配下に作業ディレクトリを作り、リポジトリを clone します。
(※本記事では git の使い方については言及しません)
(※ WSL2 + VSCode + Docker 開発環境 のサイトにも記載されていますが、ホームディレクトリ配下(/home/username)で作業しましょう!)

cd /home/username
mkdir workspaces
cd workspaces
git clone git@github.com:docker/awesome-compose.git

次に対象のディレクトリへ移動して docker を起動します。

cd awesome-compose/nginx-flask-mysql
docker-compose up -d

起動できたらブラウザから http://localhost にアクセスしてみましょう。
次のようにメッセージが表示されたら成功です!

では次に VSCode を使って処理を追加してみましょう。
nginx-flask-mysql のディレクトリで code . と実行すると VSCode が起動するはずです。
この方法で VSCode を起動した場合、 WSL 側に接続済みとなっているためそのままコードを書くことができます。
さすがマイクロソフト謹製エディタ!

では backend/hello.py の下の方に次の処理を追加しましょう。

        response = response  + '<div>   Hello  ' + c + '</div>'
    return response

# ここから追加
@server.route('/now')
def now():
    import datetime as dt
    return dt.datetime.utcnow().isoformat()
# ここまで追加

if __name__ == '__main__':
    server.run()

追加したら docker のコンテナをリビルドして再起動します。
(※本記事ではコンテナについて言及しません)

docker-compose stop
docker-compose build
docker-compose up -d

起動できたらブラウザから http://localhost/now にアクセスしてみましょう。
(日本であれば)現在時刻から -9 時間の時刻が表示されれば成功です!
そして更新ボタンを押すたびに時刻も更新されていくはずです。
(※なお -9 時間は UTC 時刻を表示しているため)

まとめ

ホスト側から WSL 内のファイルを操作することも可能ではありますが、遅かったりファイルが壊れたりする話を聞きますので、あまり気持ちのよいものではないと感じています。
ですが VSCode を使うと WSL 内に安心安全効率的にアクセスでき、また docker まで扱えますのでとても良いですね!

ぜひ皆さまも試しください!

延長戦

え?いちいち docker をビルドするのがめんどくさい?
わかります!
ということで、 Flask の debug モードを有効化、そして WSL 内のファイルをコンテナにバインドして docker ビルドしなくてもよいようにしてみましょう。

まずは backend/Dockerfile を修正して Flask の debug モードを有効化します。

ENV FLASK_APP hello.py
# ここから追加
ENV FLASK_DEBUG True
# ここまで追加
CMD flask run --host=0.0.0.0

次に docker-compose.yaml を修正して WSL 内のファイルをコンテナにバインドします。

    networks:
      - backnet
      - frontnet
# ここから追加
    volumes:
      - ./backend:/code/
# ここまで追加
  proxy:
    build: proxy

追加したら docker のコンテナをリビルドして再起動します。

docker-compose stop
docker-compose build
docker-compose up -d

そして backend/hello.py に次のような処理を追加して、ブラウザから http://localhost/str にアクセスしてみましょう。

@server.route('/now')
def now():
    import datetime as dt
    return dt.datetime.utcnow().isoformat()

# ここから追加
@server.route('/str')
def str():
    return "あいうえお"
# ここまで追加

if __name__ == '__main__':
    server.run()

あいうえお が表示されたでしょうか?では追加した処理の あいうえお の部分を好きな言葉に書き換えて再度アクセスしてみましょう。
docker のコンテナを再構築しなくても動作が変わりましたね!

お疲れさまでした!

延長戦2

え?docker の後片付けはどうすればよいか、と?

全てを破棄したい場合には滅びの呪文を唱えましょう。
※注意※ この呪文は内容を理解したうえで、最終的な実行の判断はご自身でなさるようお願いいたします。

Link: 《滅びの呪文》Docker Composeで作ったコンテナ、イメージ、ボリューム、ネットワークを一括完全消去する便利コマンド

よしけー

その他の記事

記事一覧

BitStar流

Contact Us

ご不明な点や、気になったことなど、
お気軽にお問い合わせください。

お問い合わせ

Recruit

新卒採用、中途採用、エンジニア採用、
デザイナー採用を行っています。

採用情報