本格的にアプリケーション開発をする場合、本番環境とそれ以外で設定(APIの接続先等)を買える必要が出てくると思いますが、AngularDartの場合はビルド時の環境変数にて設定情報を切り替える形になります。
手順
大まかな手順は下記になります。
- build.yamlを追加
- dart2js時の設定情報を追加
- AngularDart側で設定情報を読み込む処理の追加
順を追って説明していきたいと思います。
1. build.yamlの追加
Dartではbuild時に様々な処理を差し込める機構が用意されていて、AngularDartでもいろんな部分でこのbuildシステムが使われています。そしてそのbuildの設定をdefault値ではなく、カスタマイズしたりする場合はbuild.yaml
がプロジェクト直下に必要になります。なのでまずはプロジェクト直下にbuild.yaml
という名前でファイルを追加しましょう。
今回の記事の趣旨は設定周りなので、このbuild周りに関してあまり触れませんが、細かく知りたい人は@kyorohiroさんの下記記事が参考になると思います。
2. dart2js時の設定情報を追加
上記で追加したbuild.yaml
ファイルを下記のように修正します。
targets:
$default:
builders:
build_web_compilers|entrypoint:
options:
dart2js_args:
- -DAPI_URL=http://api-host:80/api
なんかいろいろネストされていて面食らうかもしれませんが、とりあえず今は最後の行以外は何も考えずにコピペしてしまってOKです。最後の行の- -DAPI_URL=http://api-host:80/api
が重要です。この部分はリリース用の成果物を生成する場合に使用されるdart2js
というコンパイラ(トランスパイラ)に渡す引数になります。ここでビルド時の環境変数を指定する事が可能です書き方は
-D<flag>=<value>
という書き方になります。なので-DAPI_URL=http://api-host:80/api
という書き方であればAPI_URL
という名前でhttp://api-host:80/api
という値の環境変数を定義するという意味になります。
dart2js_args
には環境変数以外にもいろいろ指定する事が可能です。気になる方はこちらを見てみて下さい。
3. AngularDart側で設定情報を読み込む処理の追加
こちらは簡単です。下記のようにString.fromEnvironment
を使って値を取得しましょう。const
で定数化しておきましょう。
const apiUrl = String.fromEnvironment('API_URL', defaultValue: 'http://localhost/api');
上記の記述の場合、開発時(DDCによるコンパイル)の場合はdefaultValue
で指定した値(http://localhost/api
)が使われ、リリース時(dart2jsによるコンパイル)には上記build.yaml
にて指定したhttp://api-host:80/api
が使われるようになります。
最後に
AngularDartは本家のチュートリアル等は結構充実しているのですが、こういったプロダクション環境に持っていくために必要な情報だったりはあまりまとまっていなので今回書いてみました。ちなみに上記では単に変数として定義していますが、DIを使ってもっとエレガントに設定情報を変える事も可能です。いつかそのあたりも記事に出来ればなと思っています。