環境ごとに応じたAPI接続先指定
goocey opened this issue · comments
概要
APIとフロントエンドのマッピングを行う。
該当ページ
背景と目的
背景
#7 とnginxの設定にてフロントを配置するのは下記の通りなる事になった。
| ブランチ | ドメイン |
|---|---|
| pro | 4ecode.com |
| develop | dev.4ecode.com |
| feature | feature.4ecode.com |
APIのドメインは下記の通りになる事になった。
| ブランチ | ドメイン |
|---|---|
| pro | api.4ecode.com |
| develop | dev.api.4ecode.com |
| feature | feature.api.4ecode.com |
目的
API接続先は常に固定となっているため、環境ごとに接続する
対応は下記の通り
| フロントブランチ | APIブランチ |
|---|---|
| master | master |
| dev | dev |
| feature | dev |
フロント:featureに対してAPI:devとなっているのは、両ブランチ間で同期をとるメリットが少ないためです。
仕様
目的に記載した対応表通りに、CircleCI等を通した時にAPIの向き先が変更されるように。
参考
CircleCIで出力した時点で接続先を決定している状態が望ましい（ページURIをみて、判断するのはよくないと思う）と考える。
実現方法は、
- envrironmentで指定
- circleciで環境変数をセットしていくビルドする。
- .envで指定
- circleciで{env}.envを.envしてコピーしてビルドする。
dotenv、webpack-dotenvにてデプロイを行おうと試みたが、ローカルでは正しく(process.env.API_BASEなどで値取得）できても、CircleCIで消える魔球化する。
そのため、jsonファイル等を読み込みすることで対応を行おうと思う。