どうやって開発を続けるか

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

##何に悩むのか
ここで示したのですが
pythonを使ってリアクティブなWebアプリを作りたい【開発編2】

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

##ビルド環境を追加しましょう
frontend/package.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
というファイルがあると思うのですが、これの本番用ファイルを作ります。

frontend/.env.production

frontend/.env.production

ENV = 'production'

# base api
VUE_APP_BASE_API = 'HerokuのURL'

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

Flaskが見るディレクトリの設定を書き換える

Flaskが見ているディレクトリの指定は
backend/init.py
にかかれているのですが、これを書き換えます。(+の行は追加、-の行は削除)

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 に追加して下さい。
ここでやりましたね

.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を叩いて無事に稼働しているかの確認をしましょう。

関連リンク