はじめに

本記事では、Flaskのリモート開発環境の構築方法とGit・GitHubを用いたバージョン管理について説明します。予備知識がない方でも作業が進められるように作成していますので、とりあえずリモート開発環境を構築してみたいという人は参考にしていただけると幸いです。

目次

前準備
Dockerファイルの作成
リモート開発環境への接続とアプリケーションの実行
参考文献

前準備

Docker Desktopのダウンロード

以下のリンク先
からDockerDesktopをダウンロードして、アカウントを作成してください

こんな感じで画面が表示されれば作業完了です

Gitのダウンロード

以下のリンク先からGitをダウンロードしてください

画像の通りGit Bashが使えるようになっていれば作業完了です

GitHubのアカウント作成

以下のリンク先でアカウントを作成してください

VSCodeのインストール

以下のリンク先でVSCodeをインストールしてください

リポジトリの作成

GitHubで以下の通りリポジトリを作成します(リポジトリを作成できれば問題ないので、以下の設定はご自身の状況に合わせて自由に行ってください)

プロジェクト名：FlaskProject
公開範囲：Private
.gitignore：python

Code→HTTPSを選択してURLをコピー(黒塗りしている部分です)

VSCodeでプロジェクト管理用のフォルダを作成して開く（新しく空のフォルダを作成していただければいいかと思います）

ctrl + shift + @でpowershellを起動して以下のコマンドを実行

git clone リポジトリのURL

FlaskProjectがcloneされていればOKです

Dockerファイルの作成

拡張機能→Remote Developmentをインストール

画像の通りFlaskProject内に.devcontainerフォルダと設定ファイルを作成する

devcontainer.jsonの中身を以下の通り編集

{
	"name": "flask-python3",
    "dockerComposeFile": "../docker-compose.yml",
    "service": "python3", 
	"workspaceFolder": "/app",
    "shutdownAction": "stopCompose",
    "customizations": {
        "vscode": {
          "extensions": [
            "ms-python.python"
          ]
        }
    }
}

docker-compose.ymlを以下の通り編集

version: '3'
services:
  python3:
    build:
      context: .
      dockerfile: Dockerfile
    tty: true
    volumes:
    - app:/app
    ports:
      - '5001:80'

volumes:
  app:

Dockerfileを以下の通り編集

FROM python:3.10

RUN python -m pip install --upgrade pip

RUN pip install --no-cache-dir Flask 

WORKDIR /app

COPY requirements.txt /app/

RUN pip install -r requirements.txt

COPY . /app/

app.pyの内容を以下の通り編集

from flask import Flask
app = Flask(__name__)

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

リモート開発環境への接続とアプリケーションの実行

VSCodeでFlaskProjectフォルダを開く(Flaskフォルダではなく.devcontainerを直下に持つフォルダを開いてください)

画面左下の><ボタンをクリック→コンテナーで再度開くをクリック（実行にはしばらく時間がかかります）

リモート開発環境が立ち上がったらコマンドライン上でflask runコマンドを実行します

以下の通りサンプルアプリが起動すればokです

VSCodeでFlaskProjectを開く→コンテナーで再度開くをクリックしてリモート開発環境を立ち上げた状態でapp.pyを編集して開発を進めましょう

バージョン管理

リモート開発環境を立ち上げた状態で、コマンドラインに以下の通りコマンドを打ち込むことでバージョン管理ができます

ファイルのステージ

コマンドラインで以下のコマンドを実行してステージを行う。

git add ファイル名

基本的には以下のコマンドですべてのファイルをステージするとよいかと思います

git add .

実行例

コミット

以下のコマンドを実行してコミットを行う

git commit -m "コミットメッセージ"

実行例

プッシュ

以下のコマンドを実行してプッシュを行う

git push

実行例

プル

以下のコマンドを実行してプルを行う

git pull

実行例

これによりGitHub上のリポジトリの内容も更新されていることが確認できるかと思います。チームメンバについてもこのリポジトリをクローンすることで全く同じ環境を構築できるようになっていますのでgit clone → コンテナーで再度開くをクリックすることですぐに開発に参加することができます。

モジュールの共有

開発の過程でモジュールをインストールすることがあるかと思います。その際は以下の手順でモジュールの共有を行います。例として今回はpillowをインストールすることになったと仮定して作業を進めます。

pillowをインストールするために以下のコマンドを実行

pip install pillow

実行例

以下のコマンドを実行

pip freeze -> requirements.txt

実行例（現在使用している開発環境を動作させるために必要なモジュール一式がrequirements.txtに書き出されます）

リモート開発環境を起動したタイミングでrequirements.txtの内容を基にモジュール一式がインストールされるため、開発の途中で新しくモジュールをインポートしても必要なタイミングでチームメンバにもモジュールのインストール状況が共有されます（Dockerfileの以下のコードで実現しています）

以上で作業は完了です。

参考文献