# はじめに

これは Interface 誌の Visual Studio Code 記事に向けたプログラムです。
Remote Development 拡張機能 (Remote-Containers) を用いて、サーバ・プログラムを開発する内容となっています。
また Web フロントエンドとバックエンドを１つの開発コンテナで作れるように構成しています。

## 必要なもの

- Visual Studio Code
  - Remode Development の拡張が必要
- Docker Desktop for Windows

## 開発手順

1. 本フォルダを Visual Studio Code で開き、"Reopen in container" でコンテナ内で開くようにします
    - コマンドパレットから、"Reopn in container" を実行してもよいです
    - 初回は各種セットアップが実行されるため多少時間が掛かります
2. バックエンド開発には "backend" のフォルダで作業します
    - モジュールの管理には poetry を使用しています
3. フロントエンド開発には "frontend" のフォルダで作業します
    - 開発サーバを起動するためには `npm run serve` をターミナルで実行してください
4. フロントエンドの開発内容をバックエンドに配置するためにはビルドを行います
    - `npm run build` で、ビルドした結果は backend/dist 以下に配置されます

## 実行について

- サーバの実行には、デバッグビューから構成「Python: Flask」を選んで実行してください。
  - 起動すると、ブラウザから http://localhost:8080/ にアクセスが出来るようになります。
- Web フロントエンドの開発を行う場合は次ので準で行います。
  - まず Python: Flask サーバの実行を行っておきます。
  - VS Code で開いているターミナルで、 "frontend" フォルダに切り替えて、コマンド `npm run serve` を実行して Web 開発用のサーバを起動します。
  - デバッグビューから構成「Launch Chrome (Vue)」を選んで実行してください。
  - 実行すると、Chrome ブラウザが起動し http://localhost:8082/ のページが開かれます。

## 使用しているオープンソース

- Backend
    - Flask
    - SQL Alchemy
    - poetry
- Frontend
    - Vue.js (https://github.com/vuejs/vue)
    - Chart.js (https://www.chartjs.org/)
    - Element UI (https://element.eleme.io/)

## Tips など

### データベースを初期化したい

データベースの内容を永続化するために、 backend/db/dbdata をマウントしています。
データベースを初期化したい場合にはコンテナを停止後に、このフォルダを削除してください。

### Pylance に関するもの

Pylance で解析ソースがプロジェクト直下となってしまうようで、
settings.json の以下の設定により解析対象を指示するようにしています。

```json
"python.analysis.extraPaths": [
  "./backend"
]
```

### Vue.js に関するもの

Vetur で解析ソースがプロジェクト直下となってしまうようで、
vetur.config.js の以下の設定により解析対象を指示するようにしています。

```js
module.exports = {
  projects: [
    './frontend/'
  ]
}
```
