LoginSignup
2
1

More than 5 years have passed since last update.

AngularDartで開発環境と本番環境の設定を変えよう

Last updated at Posted at 2019-05-09

 本格的にアプリケーション開発をする場合、本番環境とそれ以外で設定(APIの接続先等)を買える必要が出てくると思いますが、AngularDartの場合はビルド時の環境変数にて設定情報を切り替える形になります。

手順

 大まかな手順は下記になります。

  1. build.yamlを追加
  2. dart2js時の設定情報を追加
  3. 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を使ってもっとエレガントに設定情報を変える事も可能です。いつかそのあたりも記事に出来ればなと思っています。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1