【Angular6】ngコマンドでdev、stg、prodの3つの環境で設定を切り替えてビルドできるようにしてみる
どうも!大阪オフィスの西村祐二です。
AngularではAngular CLIを使えば簡単にビルドすることができます。
ただ、デフォルトだと、
ng build
または、ng build --prod
で、2つの環境のみ切り替えができる状況です。
しかし、環境はdev、stg、prodと3つあることが多いと思います。
そこで、今回、dev、stg、prodの3つの環境で設定を切り替えてビルドできるようにしてみたいと思います。
環境
- Angular CLI: 6.1.5
- Node: 8.11.3
- OS: darwin x64
- Angular: 6.1.4
テストプロジェクト作成
cliでプロジェクトを作成します。
1 | $ ng new test-build |
stg環境の環境ファイル作成と設定
デフォルトで作成される環境ファイルのenvironment.prod.ts
をprod環境用、environment.ts
をdev環境用とします。
stg環境用のファイルは自分で作成します。
- environment.prod.ts
- prod環境
- environment.ts
- dev環境
- environment.stg.ts(作成)
- stg環境
1 2 | $ cd ./test-build/src/environments $ touch environment.stg.ts |
build時に設定が切り替わっているか、わかりやすいようにファイルを下記のように編集しておきます。
1 2 3 4 | export const environment = { production : true , apiUrl : 'prod環境のurl' } ; |
1 2 3 4 | export const environment = { production : false , apiUrl : 'stg環境のurl' } ; |
1 2 3 4 | export const environment = { production : false , apiUrl : 'dev環境のurl' } ; |
angular.jsonを編集
build時にstg環境の環境ファイルを読み込むように設定を追加します。おまけで、ng serve -c stg
でstg環境の設定を読み込んでサーバ起動するようにも設定しておきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | { "$schema" : "./node_modules/@angular/cli/lib/config/schema.json" , "version" : 1, "newProjectRoot" : "projects" , "projects" : { "test-build" : { "root" : "" , "sourceRoot" : "src" , "projectType" : "application" , "prefix" : "app" , "schematics" : {}, "architect" : { "build" : { "builder" : "@angular-devkit/build-angular:browser" , "options" : { "outputPath" : "dist/test-build" , "index" : "src/index.html" , "main" : "src/main.ts" , "polyfills" : "src/polyfills.ts" , "tsConfig" : "src/tsconfig.app.json" , "assets" : [ "src/favicon.ico" , "src/assets" ], "styles" : [ "src/styles.css" ], "scripts" : [] }, "configurations" : { "production" : { "fileReplacements" : [ { "replace" : "src/environments/environment.ts" , "with" : "src/environments/environment.prod.ts" } ], "optimization" : true , "outputHashing" : "all" , "sourceMap" : false , "extractCss" : true , "namedChunks" : false , "aot" : true , "extractLicenses" : true , "vendorChunk" : false , "buildOptimizer" : true }, "stg" : { "fileReplacements" : [{ "replace" : "src/environments/environment.ts" , "with" : "src/environments/environment.stg.ts" }], "optimization" : true , "outputHashing" : "all" , "sourceMap" : false , "extractCss" : true , "namedChunks" : false , "aot" : true , "extractLicenses" : true , "vendorChunk" : false , "buildOptimizer" : true } } }, "serve" : { "builder" : "@angular-devkit/build-angular:dev-server" , "options" : { "browserTarget" : "test-build:build" }, "configurations" : { "production" : { "browserTarget" : "test-build:build:production" }, "stg" : { "browserTarget" : "test-build:build:stg" } } }, "extract-i18n" : { "builder" : "@angular-devkit/build-angular:extract-i18n" , "options" : { "browserTarget" : "test-build:build" } }, . . . |
動作確認
環境ファイルに書き込んだapiUrl
を表示するように設定します。
1 | { { env } } |
1 2 3 4 5 6 7 8 9 10 11 | import { environment } from './../environments/environment' ; import { Component , enableProdMode } from '@angular/core' ; @Component ( { selector : 'app-root' , templateUrl : './app.component.html' , styleUrls : [ './app.component.css' ] } ) export class AppComponent { title = 'test-build' ; env = environment . apiUrl ; } |
▼dev環境用の環境ファイルを読み込んでビルドしてみる。
1 | $ ng build |
ビルドされたファイルの確認はhttp-serve
をつかえば簡単に確認できます。
1 2 3 4 5 6 |
▼同様にstg環境用の環境ファイルを読み込んでビルドしてみる。
1 | $ ng build -c stg |
▼同様にprod環境用の環境ファイルを読み込んでビルドしてみる。
1 | $ ng build --prod |
さいごに
いかがだったでしょうか。
ngコマンドでdev、stg、prodの3つの環境設定に切り替えてビルドできるようにしてみました。これで環境ごとの自動デプロイの仕組みなど簡単に作れますね。
誰かの参考になれば幸いです。