pythonを使ってリアクティブなWebアプリを作りたい【開発編5】Herokuの開発環境と本番環境

こちらの続きです。

[pythonを使ってリアクティブなWebアプリを作りたい【開発編4】パスワードの暗号化](https://qiita.com/geeorgey/items/85905a4772903b180fad)

今回は、Flask-Vue.jsの開発で、開発環境と本番環境をどのようにマネージするのかについて書いていきます。

## どうやって開発を続けるか
今回のアプリケーションは、開発をローカル環境で行い、本番環境はHerokuにデプロイする形で行います。
HerokuへのデプロイはGithub経由で行うものとします。

##何に悩むのか
ここで示したのですが
[pythonを使ってリアクティブなWebアプリを作りたい【開発編2】](https://qiita.com/geeorgey/items/961c1d1092ec60bb06bd#%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E7%92%B0%E5%A2%83mac%E3%81%A7frontend%E3%81%AE%E3%83%93%E3%83%AB%E3%83%89%E3%81%AE%E6%BA%96%E5%82%99%E3%82%92%E3%81%99%E3%82%8B)

Herokuにビルドするにあたって、あらかじめdistフォルダに静的ファイルをビルドしています。その際に、環境変数を読み込んでるんですよね。
つまり、ローカル環境で使っているビルドファイルをそのままHerokuにアップしても使えません。
そこで前回はブランチ分けて使ってねという話をしたのですが、これはこれで開発が面倒です。
そこで、何をどうするかという話です。

##ビルド環境を追加しましょう
[frontend/package.json](https://github.com/geeorgey/vue_flask_template/blob/ee4065c771f5f297cc87a7c15316076bd6af9b0e/frontend/package.json#L7)
にビルドコマンドが指定してあるのですが、を少し書き換えます

```json:frontend/package.json
    "build": "cross-env NODE_ENV=development vue-cli-service build --mode development --dest ../dist_dev",
    "build:prod": "cross-env NODE_ENV=production vue-cli-service build --mode production --dest ../dist",
```

こんな形にします。
これまでは、
$ yarn build
すると、ルートディレクトリに distフォルダが作られましたが、これをdist_dev フォルダに変更します。
次に、本番環境用のビルドコマンドを追加します。
$ yarn build:prod
とすると、本番環境用のビルドが走るようになり、distフォルダが作られるようになります。

## 本番環境用のビルド設定ファイルを作る
[frontend/.env.development](https://github.com/geeorgey/vue_flask_template/blob/main/frontend/.env.development)
というファイルがあると思うのですが、これの本番用ファイルを作ります。

[frontend/.env.production](https://github.com/geeorgey/vue_flask_template/blob/main/frontend/.env.production)

```frontend/.env.production
ENV = 'production'

# base api
VUE_APP_BASE_API = 'HerokuのURL'
```

これを作ることで、yarn build:prodしたときにこちらの設定ファイルが読み込まれます。

## Flaskが見るディレクトリの設定を書き換える
Flaskが見ているディレクトリの指定は
[backend/__init__.py](https://github.com/geeorgey/vue_flask_template/blob/ee4065c771f5f297cc87a7c15316076bd6af9b0e/backend/__init__.py#L9)
にかかれているのですが、これを書き換えます。(+の行は追加、-の行は削除)

```python:backend/__init__.py
+ import os
- app = Flask(__name__, static_folder='../dist/static', template_folder='../dist')
+ app = Flask(__name__, static_folder=os.environ["STATIC_FOLDER_PATH"], template_folder=os.environ["TEMPLATE_FOLDER_PATH"])
```
これでフォルダの指定を環境変数から取ってくる形になりました。

## 環境変数を追加します
ローカル環境は.envに追加します。
本番環境はHerokuのSetting>Config Vars に追加して下さい。
[ここでやりましたね](https://qiita.com/geeorgey/items/961c1d1092ec60bb06bd#%E7%92%B0%E5%A2%83%E5%A4%89%E6%95%B0%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B)

```.env
export STATIC_FOLDER_PATH="../dist_dev/static"
export TEMPLATE_FOLDER_PATH="../dist_dev"
```

ファイルの最下部にこちらを追加すればOKです。

## .gitignoreを調整
最後に、本番環境にはローカルように作られた　dist_dev は不要ですのでこれを追加します。

```.gitignore
+ dist_dev
```

## ビルド＆デプロイ
まずはローカル環境でビルドしましょう。
$ cd frontend
$ yarn build

こちらのコマンドで ルートディレクトリに dist_dev が作成されればOKです。
ルートディレクトリに戻ってFlaskを起動しましょう

$ cd ../
$ flask run

これで 
http://localhost:5000/
にアクセスして動いていればOKです。


次に本番環境用のファイルをビルドします

$ cd frontend
$ yarn build:prod

こちらのコマンドでルートディレクトリに dist が作成されていればOK。
今度はGithubにファイルをプッシュしましょう。

$ cd ../
$ git add dist
$ git add backend/__init__.py
$ git add frontend/package.json
$ git add frontend/.env.production
$ git commit -m'本番環境/開発環境の一本化'
$ git push -u origin main

最後にHerokuのURLを叩いて無事に稼働しているかの確認をしましょう。


## 関連リンク
- [pythonを使ってリアクティブなWebアプリをお手軽に1分で作りたい](https://qiita.com/geeorgey/items/ace37bd92841c9d1a378)
- [pythonを使ってリアクティブなWebアプリを作りたい【基礎編】](https://qiita.com/geeorgey/items/3f86b207cd412680b835)
- [pythonを使ってリアクティブなWebアプリを作りたい【開発編】](https://qiita.com/geeorgey/items/ea60afe0c44a5f9db483)
- [pythonを使ってリアクティブなWebアプリを作りたい【開発編2】](https://qiita.com/geeorgey/items/961c1d1092ec60bb06bd)
- [pythonを使ってリアクティブなWebアプリを作りたい【開発編3】](https://qiita.com/geeorgey/items/1f5544b12e7d26a1216c)
- [pythonを使ってリアクティブなWebアプリを作りたい【開発編3-2】](https://qiita.com/geeorgey/items/54b4fb22351a3e941cf6)
- [pythonを使ってリアクティブなWebアプリを作りたい【開発編4】パスワードの暗号化](https://qiita.com/geeorgey/items/85905a4772903b180fad)
- [pythonを使ってリアクティブなWebアプリを作りたい【開発編5】Herokuの開発環境と本番環境](https://qiita.com/geeorgey/items/b080617f5332ab7255c4)←イマココ