事例
2023/11/16
與田 龍人

DockerとVSCodeを活用してUbuntuベースのFlaskアプリ開発環境を構築する方法

この記事では、Flaskアプリ開発に必要なコンポーネントを含んだDockerファイルを作成し、それを基にUbuntuベースのFlask開発環境を構築する方法について説明します。

はじめに

今回の記事では、PythonフレームワークであるFlaskの開発環境をスムーズに立ち上げるために、必要なコンポーネントを含んだDockerファイルを作成し、それを基にUbuntuベースのDockerイメージビルドとコンテナを作成することで素早く環境構築する方法について説明します。

前提条件

Dockerがインストールされていること。


インストールがまだの方はこちらから行えます。自身のPC環境に応じてDocker Desktopをインストールする必要があります。


・VSCodeがインストールされており、Dev Containers 拡張機能がインストールされていること。



ステップ1: Dockerファイルの作成

以下の内容でDockerファイルを作成します。ざっくり説明するとFROMはベースイメージの選択、RUNはそのベースイメージ上で実行するカスタマイズ作業を指定すると覚えておくと良いでしょう。



FROM ubuntu:latest

RUN apt-get update && \
apt-get install -y python3 python3-pip

# Flaskをインストール
RUN pip3 install flask

# Flaskアプリケーションを保存するディレクトリを作成
WORKDIR /app

ステップ2: Dockerイメージの構築

ターミナルに移動し、以下のコマンドでDockerファイルを基にイメージを構築します。



#dockerfileを作ったディレクトリに移動
cd docker.flask

bashCopy code
docker build -t ubuntu-flask-dev .


Dockerファイルで記述した通りにイメージがビルドされれば成功です。



 

ステップ3: Dockerコンテナの作成と起動

構築したイメージからコンテナを作成し、起動します。5000番ポートをホスト公開にします。



docker run -it -p 5000:5000 --name ubuntu-flask-env ubuntu-flask-dev /bin/bash


 

ステップ4: VSCodeでのコンテナアクセス

VSCodeを使用してDockerコンテナにアクセスします。


1.VSCodeを開く: VSCodeを起動し、Dev Containers 拡張機能がインストールされていることを確認します。


2.リモートエクスプローラを開く: VSCodeの左サイドバーにある「リモートエクスプローラ」アイコンをクリックします。


3.コンテナに接続する: 「開発コンテナ」セクションの「ubuntu-flask-env」コンテナを右クリックし、「Attach to Container」を選択します。



これで、VSCodeから直接Dockerコンテナ内のPython開発環境にアクセスできます。



ステップ5: Flaskアプリケーションの作成

コンテナ内で以下のようなコマンドを実行し、app.pyファイルに簡単なアプリを作成します。



echo "from flask import Flask
app = Flask(__name__)

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

if __name__ == '__main__':
app.run(host='0.0.0.0', port=5000)" > app.py



 

ステップ6: Flaskアプリケーションの実行

以下のコマンドでFlaskアプリケーションを実行します。



python3 app.py

ステップ7: Webブラウザでアクセス

ローカルマシンをWebブラウザで http://localhost:5000 にアクセスし、「Hello, World!」が表示されることを確認します。


まとめ

この手順により、Dockerを使用してFlask開発環境をセットアップし、Flaskアプリケーションを作成して実行することができます。VSCodeのDev Containers拡張機能を使用することで、開発環境へのアクセスが容易になり、効率的なWeb開発が行えます。

New call-to-action