1. 目的
この記事の目的は、VSCodeのリモートコンテナでFlask環境を構築し、楽に開発を行えるようにすることです。
2. 事前準備
必要な事前準備は以下のようになります。
2-1. VSCodeと拡張機能のインストール
以下のページを参考に、VSCodeと拡張機能をインストールしてください。
必要な拡張機能
2-2. Docker Desktopのインストール
以下のページを参考にDocker Desktopをインストールしてください。
3. ディレクトリとファイルの作成
以下では、VSCodeのリモートコンテナでFlask環境を構築するために必要なディレクトリ、ファイルを作成します。
私のGitHubで、今回作成するファイルを公開しています。もしよろしければ参考にしてください。
cloneで複製していただいても大丈夫です。
$ git clone https://github.com/Mochi-Moch1/vscode-remote-container-flask.git
3-1. ディレクトリの作成
以下のようなディレクトリ構造を作成していきます。
親となるディレクトリ(vscode-remote-container-flask)は好きな場所に作っていただいて大丈夫です。
vscode-remote-container-flask
┝ .devcontainer
│ └ devcontainer.json
┝ Dockerfile
┝ docker-compose.yml
┝ app.py
3-2. devcontainer.json ファイルの作成
.devcontainer の中に以下のようなファイルを作成します。
{
"name": "flask-python3",
"dockerComposeFile": "../docker-compose.yml",
"service": "python3",
"workspaceFolder": "/app",
"shutdownAction": "stopCompose",
"extensions": ["ms-python.python"]
}
各項目を説明します。
-
"name": "flask-python3"- 今回作るコンテナの名前です。
-
"dockerComposeFile": "../docker-compose.yml"- 参照するDocker Composeファイルへのパスを示します。パスは
devcontainer.jsonからの相対パスで与えます。 - Docker Composeを使う場合には必須です。
- 参照するDocker Composeファイルへのパスを示します。パスは
-
"service": "python3"-
devcontainer.jsonで扱うDocker Compose内のサービスを与えます。 - 基本は1つの
devcontainer.jsonで一つのサービスを扱います。 - Docker Composeを使う場合には必須です。
-
-
"workspaceFolder": "/app"- リモートコンテナに接続したときにデフォルトで開く、ファイルのパスを与えます。
-
"shutdownAction": "stopCompose"- リモートコンテナのウィンドウを閉じた時の処理を与えます。
-
stopComposeでは、composeごと停止します。
-
"extensions": ["ms-python.python"]- リモートコンテナ内でダウンロードしたいVSCodeの拡張機能を与えます。
- ローカルコンピュータのVSCodeの拡張機能には、影響を与えません。
3-3. Dockerfileの作成
以下に今回作成するコンテナのDockerfileを示します。
FROM python:3.10
RUN python -m pip install --upgrade pip
RUN pip install --no-cache-dir Flask
WORKDIR /app
COPY ./app.py /app
各項目を説明します。
-
FROM python:3.10- コンテナの元となるimageを指定します
-
RUN python -m pip install --upgrade pip- pipのインストールとアップデートを行います
-
RUN pip install --no-cache-dir Flask- Flaskのインストールを行います
-
WORKDIR /app- Dockerfileが扱う作業ディレクトリを
/appに移動します
- Dockerfileが扱う作業ディレクトリを
-
COPY ./app.py /app-
app.pyをコンテナ内の/appの下にコピーします。
-
3-4. app.pyの作成
次にflaskのアプリケーションを実行するファイルを作成します。
from flask import Flask
app = Flask(__name__)
@app.route('/')
def hello_world():
return 'Hello, Remote Flask!'
内容は、'Hello, Remote Flask!'と表示するものです。
3-5. docker-compose.ymlの作成
version: '3'
services:
python3:
build:
context: .
dockerfile: Dockerfile
tty: true
volumes:
- app:/app
ports:
- '5001:80'
volumes:
app:
各項目を説明します。
-
version: '3'- Compose fileのバージョンを与えます
-
services:
python3:- python3という名前のサービスを作成します
- サービスは一つのコンテナのようなイメージです
- python3という名前のサービスを作成します
-
build:
context: .
dockerfile: Dockerfile- コンテナを作成するためのDockerfileへのパスを指定します
-
tty: true- コンテナ側に仮想端末を置くことで、コンテナを正常終了させず、持続させます
-
volumes:
-app:/app- appという名前のvolumeに場所
/appを与えます- volumeはデータを保存しておく場所のようなイメージです
- ウィンドウを閉じてもデータが保持されます
- appという名前のvolumeに場所
-
ports:
-'5001:80'
* ポートを指定します- 左(5001)はホストのポート
- 右(80)はコンテナのポート
-
volumes:
app:- 先ほど指定したvolumeのappを再度指定します
- volumeに名前をつけるために必要です
- 名前をつけるとvolumeの管理が楽になります
- volumeに名前をつけるために必要です
- 先ほど指定したvolumeのappを再度指定します
4. リモート環境を組み立てる
いよいよVSCodeリモートコンテナを利用して、環境を立ち上げていきます！
4-1. フォルダをコンテナで開ける
-
VSCodeで先ほど作成したフォルダ
vscode-remote-container-flaskを開いてください。 -
左下の緑の部分をクリックしてください
-
Open Folder in Container をクリックしてください
-
Openでフォルダ
vscode-remote-container-flaskを開いてください
エラーが出た場合
-
ポートに関するエラーが出た場合は、一度作成されたリモートコンテナを削除し、docker-compose.yml内のポート番号(5001)を5002などに変更してください。
-
修正してうまくいかない場合などは、F1キーを押して
Remote Containers : Rebuild and Reopen in Containerを試してみてください。
4-2. アプリを実行と結果の確認
app.pyの内容を実行するため、以下のコマンドをVSCodeリモートコンテナ内のターミナルに入力してください。
python3 -m flask run -p 80 -h 0.0.0.0
実行結果を確認するため、
-
* Running on http://127.0.0.1:80のhttp://127.0.0.1:80をcommand または ctrlを押しながらクリックしてください
または
- ブラウザで
localhost:5001と検索してください。- 5001の部分は、docker-compose.ymlのポート番号（左側）に対応した数字を入れてください。
成功していれば、以下のような画面になります。
以上でFlaskの環境構築は終了です！お疲れ様でした！
快適なコーディングの手助けになれば嬉しいです。
参考文献
以下のものを参考にさせていただきました。