【Flask + VSCode + Docker + Git・GitHtb】リモート開発環境構築

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



# 目次

1. [前準備](#前準備)
2. [Dockerファイルの作成](#dockerファイルの作成)
2. [リモート開発環境への接続とアプリケーションの実行](#リモート開発環境への接続とアプリケーションの実行)
3. [参考文献](#参考文献)



# 前準備
### Docker Desktopのダウンロード

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

https://docs.docker.com/desktop/install/windows-install/

こんな感じで画面が表示されれば作業完了です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/5d29e417-a325-4ef1-358d-f6f0c0fbab0f.png)


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

https://git-scm.com/download/win

画像の通りGit Bashが使えるようになっていれば作業完了です
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/0b41db4c-e65e-5235-80dc-dc6e92ac5c20.png)

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

https://github.co.jp/

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

https://code.visualstudio.com/download



### リポジトリの作成
GitHubで以下の通りリポジトリを作成します(リポジトリを作成できれば問題ないので、以下の設定はご自身の状況に合わせて自由に行ってください)
- プロジェクト名：FlaskProject
- 公開範囲：Private
- .gitignore：python

Code→HTTPSを選択してURLをコピー(黒塗りしている部分です)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/106f6990-9103-e8e1-c553-b92c2cfdf8fc.png)

VSCodeでプロジェクト管理用のフォルダを作成して開く（新しく空のフォルダを作成していただければいいかと思います）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/cf61c4cb-ac96-69e9-341b-0faaef29a3e3.png)

ctrl + shift + @でpowershellを起動して以下のコマンドを実行
```
git clone リポジトリのURL
```
FlaskProjectがcloneされていればOKです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/1fc0745b-66de-33cb-8be3-0247e34efe7b.png)

### Dockerファイルの作成
拡張機能→Remote Developmentをインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/41bb8b66-dec0-e4eb-e51f-d5dcf276b8ca.png)

画像の通りFlaskProject内に.devcontainerフォルダと設定ファイルを作成する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/9ef38414-766e-f736-77a2-eb91c7c509f1.png)

devcontainer.jsonの中身を以下の通り編集
```json
{
	"name": "flask-python3",
    "dockerComposeFile": "../docker-compose.yml",
    "service": "python3", 
	"workspaceFolder": "/app",
    "shutdownAction": "stopCompose",
    "customizations": {
        "vscode": {
          "extensions": [
            "ms-python.python"
          ]
        }
    }
}

```

docker-compose.ymlを以下の通り編集
```yml
version: '3'
services:
  python3:
    build:
      context: .
      dockerfile: Dockerfile
    tty: true
    volumes:
    - app:/app
    ports:
      - '5001:80'

volumes:
  app:
  
```

Dockerfileを以下の通り編集
```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の内容を以下の通り編集
```py
from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello'
```
# リモート開発環境への接続とアプリケーションの実行
VSCodeでFlaskProjectフォルダを開く(Flaskフォルダではなく.devcontainerを直下に持つフォルダを開いてください)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/1a777080-b2ab-a1ad-92a1-dc476124273d.png)

画面左下の><ボタンをクリック→コンテナーで再度開くをクリック（実行にはしばらく時間がかかります）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/ef8e5319-de12-cd1f-e757-df8d599f5586.png)

リモート開発環境が立ち上がったらコマンドライン上でflask runコマンドを実行します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/1c69317b-5e47-5cda-4870-819b7cfa4184.png)

以下の通りサンプルアプリが起動すればokです
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/46170bc9-9828-e8d6-2f32-625e6dcf545a.png)

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

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

### ファイルのステージ
コマンドラインで以下のコマンドを実行してステージを行う。
```
git add ファイル名
```
基本的には以下のコマンドですべてのファイルをステージするとよいかと思います
```
git add .
```
実行例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/d4373e53-3b0c-af22-76fa-4809269f0a71.png)

### コミット
以下のコマンドを実行してコミットを行う
```
git commit -m "コミットメッセージ"
```
実行例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/552a7cf1-5658-92b5-13fe-b236cf08fe01.png)

### プッシュ
以下のコマンドを実行してプッシュを行う
```
git push
```
実行例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/f6ea3680-89e6-1b1f-1333-d4a471d91a24.png)


### プル
以下のコマンドを実行してプルを行う
```
git pull
```
実行例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/5e01065a-52b2-a1dd-7ec4-37f037fa527b.png)

これによりGitHub上のリポジトリの内容も更新されていることが確認できるかと思います。チームメンバについてもこのリポジトリをクローンすることで全く同じ環境を構築できるようになっていますのでgit clone → コンテナーで再度開くをクリックすることですぐに開発に参加することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/0eb8b209-c8bd-289e-c6e1-77bf1eaedae0.png)

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

pillowをインストールするために以下のコマンドを実行
```
pip install pillow
```
実行例
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/e015898b-dfc4-e365-1796-375eac3f3cf6.png)

以下のコマンドを実行
```
pip freeze -> requirements.txt
```
実行例（現在使用している開発環境を動作させるために必要なモジュール一式がrequirements.txtに書き出されます）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/186529ca-12d1-3f6b-85fa-1da6eee36fe4.png)

リモート開発環境を起動したタイミングでrequirements.txtの内容を基にモジュール一式がインストールされるため、開発の途中で新しくモジュールをインポートしても必要なタイミングでチームメンバにもモジュールのインストール状況が共有されます（Dockerfileの以下のコードで実現しています）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3287818/21774748-34d1-9691-42b9-7781c571686a.png)

以上で作業は完了です。

# 参考文献

https://qiita.com/Yu_Mochi/items/4fb5b87acdb3003e68db