ミヤカワソリューションズ

""

DockerとFlaskで簡単に始める！VSCodeを使ったWebアプリケーション開発入門

—

in

ウェブアプリケーションの開発を始める際、環境設定や依存関係の管理は非常に重要です。しかし、複雑で手間のかかる作業でもあります。そこで、Dockerを使用することで、ホストマシンと分離された一貫性のある開発環境を提供し、依存関係の衝突や環境の違いによる問題を回避することができます。このブログでは、人気の高いフレームワークであるFlaskを使って、Docker環境で簡単にウェブアプリケーションを構築する方法をステップバイステップで解説します。特にVSCode（Visual Studio Code）を利用した開発方法に焦点を当て、初めてDockerを使う方でも分かりやすい内容を目指します。

必要なツールのインストール

まず、以下のツールをインストールします。

  • VSCode: モダンで強力なコードエディタ。多くの拡張機能により、様々な開発環境をサポート。
  • Docker Desktop: コンテナベースの仮想化プラットフォーム。簡単にアプリケーションを分離された環境で実行可能に。

VSCodeには、以下の拡張機能もインストールしておくと便利です。

  • Docker
  • Python

プロジェクトのセットアップ

まず、VSCodeで新しいプロジェクトディレクトリを作成します。

mkdir flask-docker-app
cd flask-docker-app

環境の分離とコンテナ内でのコマンド実行

環境の分離: Dockerを使用することで、ホストマシンと分離された環境でアプリケーションを実行できます。これにより、依存関係の衝突や環境の違いによる問題を回避できます。

コンテナ内でのコマンド実行: Flaskコマンドや他の開発ツールを実行する際には、基本的にコンテナ内で実行します。ホストマシンにインストールされているかどうかに依存せず、一貫した環境で作業できます。

Dockerfileの作成

プロジェクトディレクトリ内にDockerfileを作成し、以下の内容を追加します。

FROM python:3.12-slim
WORKDIR /app
COPY requirements.txt requirements.txt
RUN pip install -r requirements.txt
COPY . .
CMD ["flask", "run", "--host=0.0.0.0"]

このDockerfileでは、コンテナ内にPythonとFlaskの依存関係をインストールしています。これにより、ローカルマシンではなくコンテナ内でFlaskが実行されます。

docker-compose.ymlの作成

次に、docker-compose.ymlファイルを作成し、以下の内容を追加します。

version: '3.8'
services:
  web:
    build: .
    ports:
      - "5000:5000"
    volumes:
      - .:/app
    environment:
      FLASK_ENV: development
      FLASK_APP: app.py

Flaskアプリケーションの作成

requirements.txtファイルを作成し、Flaskの依存関係を追加します。

Flask==2.3.2

次に、app.pyファイルを作成し、シンプルなFlaskアプリケーションを記述します。

from flask import Flask

app = Flask(__name__)

@app.route('/')
def hello_flask():
    return 'Hello, Flask!'

@app.route('/hello')
def hello_world():
    return 'Hello, World!'

if __name__ == '__main__':
    app.run(debug=True)

このステップで作成したrequirements.txtとapp.pyは、Dockerfileで指定した通り、コンテナ内にコピーされます。これにより、Flaskの依存関係がコンテナ内にインストールされ、Flaskアプリケーションがコンテナ内で実行されるようになります。

ボリュームマウント

ローカルのプロジェクトディレクトリをコンテナにマウントすることで、コードの変更を即座にコンテナに反映させることができます。これにより、開発サイクルがスムーズになります。docker-compose.ymlで以下の設定を確認してください。

volumes:
  - .:/app

ログとデバッグ

コンテナのログを確認することで、エラーやデバッグ情報を簡単に取得できます。以下のコマンドを使用します。

  • docker logs コマンド
docker logs <container_id_or_name>

  • docker-compose logs コマンド
docker-compose logs

Dockerコンテナ内でFlaskコマンドを実行

VSCodeのターミナルを使用して、以下のコマンドを実行します。

  • Dockerコンテナをビルドして起動します。
docker-compose up -d
  • 実行中のコンテナを確認します。
docker ps

ここで、実行中のコンテナのIDまたは名前を確認します。

  • 対象のコンテナに接続します。
docker exec -it <container_id_or_name> /bin/bash

このコマンドを実行すると、指定したコンテナの内部にシェルが開きます。これにより、まるでSSHでリモートサーバーに接続するかのように、コンテナ内の環境にアクセスできます。

  • コンテナ内でFlaskコマンドを実行します。
flask routes

これで、FlaskアプリケーションがDockerコンテナ内で正常に動作していることを確認できます。

— 表示例 —

PS C:\Users\name\projects\> docker exec -it 385c43332f91 /bin/bash
root@385c43332f91:/apps/minimalapp# ls
init.py app.py
root@385c43332f91:/apps/minimalapp# flask routes
Endpoint        Methods Rule
--------------- ------- -----------------------
hello_flask     GET     /
hello_world     GET     /hello
static          GET     /static/

まとめ

このブログでは、VSCodeを使用してDocker上でFlaskアプリケーションをセットアップする方法について詳しく説明しました。Dockerを使用することで、開発環境を一貫して管理でき、依存関係の問題を回避することができます。FlaskとDockerの基本を理解し、さらに応用していくための第一歩として、ぜひ試してみてください。

Dockerは、Flaskだけでなく、他のWebアプリケーションフレームワーク（例：Django、Rails）を使用する際にも非常に有用です。今回のガイドを通じて、Dockerの基礎を学び、効率的な開発環境を手に入れてください。次回は、さらに進んだDockerの使い方や、Flaskアプリケーションのデプロイ方法についても触れていきたいと思います。お楽しみに！

以上で、DockerとFlaskを使った簡単なWebアプリケーション開発の基本的な流れを紹介しました。今後の開発プロジェクトに役立てていただければ幸いです。Happy Coding!

コメント

コメントを残す