1. 目的

この記事の目的は、VSCodeのリモートコンテナでFlask環境を構築し、楽に開発を行えるようにすることです。

2. 事前準備

必要な事前準備は以下のようになります。

2-1. VSCodeと拡張機能のインストール

以下のページを参考に、VSCodeと拡張機能をインストールしてください。

必要な拡張機能

Remote - Containers

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を使う場合には必須です。
"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に移動します
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という名前のサービスを作成します
  - サービスは一つのコンテナのようなイメージです
build:
context: .
dockerfile: Dockerfile
- コンテナを作成するためのDockerfileへのパスを指定します
tty: true
- コンテナ側に仮想端末を置くことで、コンテナを正常終了させず、持続させます
volumes:
-app:/app
- appという名前のvolumeに場所/appを与えます
  - volumeはデータを保存しておく場所のようなイメージです
  - ウィンドウを閉じてもデータが保持されます
ports:
-'5001:80'
* ポートを指定します
- 左(5001)はホストのポート
- 右(80)はコンテナのポート
volumes:
app:
- 先ほど指定したvolumeのappを再度指定します
  - volumeに名前をつけるために必要です
    - 名前をつけるとvolumeの管理が楽になります

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の環境構築は終了です！お疲れ様でした！
快適なコーディングの手助けになれば嬉しいです。

参考文献

以下のものを参考にさせていただきました。

読んでいただき、ありがとうございました！