前回、前々回の引き続きでサンプルの空っぽのフロントエンドを動くように実装してみました。

何を作ったのか
使い方
- docker環境で動かす
  - 単体で動かす方法
  - aws-sls-spa-sample-apiを使う方法
- AWS環境で動かす
実装
まとめ

何を作ったのか

こんな見た目のフロントエンドを作りました。*1

今回の記事のコードとgitのタグです。

aws-sls-spa-sample-web：タグv0.0.1
aws-sls-spa-sample-api：タグv0.0.2
aws-sls-spa-sample-terraform：タグv0.0.2

使い方

dockerを使ってローカル環境で実行する方法とAWSで動かす方法があります。

docker環境で動かす

まずリポジトリをcloneします。

$ git clone -b v0.0.1 https://github.com/nihemak/aws-sls-spa-sample-web.git sample-spa-web
$ cd sample-spa-web

そしてdocker環境のビルドを行います。

$ npm run docker-build

単体で動かす方法とaws-sls-spa-sample-apiを使う方法があります。

単体で動かす方法

まず、docker環境でng serveを実行します。

$ npm run docker-up
$ npm run docker-serve

するとブラウザからアクセスできるようになります。

http://localhost:4200/

aws-sls-spa-sample-apiを使う方法

まず、aws-sls-spa-sample-apiをDocker環境で起動します。

前回の「docker環境で動かす」の通りです。ここのgit cloneするタグを今回のタグに変えます。

aws-sls-spa-sample-api：タグv0.0.2

そして、docker-compose.ymlに定義した環境変数API_BASE_URLをaws-sls-spa-sample-apiのURL('http://localhost:3000')に変更します。

$ git diff dockers/docker-compose.yml
   angular:
     build: ./angular
     tty: true
     ports:
       - 4200:4200
     environment:
-      API_BASE_URL: 'mock-server'
+      API_BASE_URL: 'http://localhost:3000'
     volumes:
       - ../:/src/

あとは単体で動かす方法と同じです。

$ npm run docker-up
$ npm run docker-serve

これでブラウザからアクセスできます。

http://localhost:4200/

AWS環境で動かす

前々回の「使い方」の通りです。ここのgit cloneするタグを今回のタグに変えます。タグを変える箇所は前回の「AWS環境で動かす」の通りです。

aws-sls-spa-sample-web：タグv0.0.1
aws-sls-spa-sample-api：タグv0.0.2
aws-sls-spa-sample-terraform：タグv0.0.2

実装

具体的な実装はこちらです。

github.com

マテリアルデザイン

マテリアルデザインはGoogleが提唱しているデザインの考え方です。

material.io

saruwakakun.com

今回は@angular/materialを使いました。ライブラリで用意してあるコンポーネントを組み合わせるだけでマテリアルデザインになります。

Angular Material

そして、@angular/flex-layoutを使ってFlexboxでレイアウトしました。

CSS Flexible Box Layout Module Level 1 （日本語訳）

github.com

対応したコード差分は下記あたりです。

Change to Material Design with @angular/material and @angular/flex-layout by nihemak · Pull Request #11 · nihemak/aws-sls-spa-sample-web · GitHub

Reduxアーキテクチャ

今回は@ngrxを使いました。*2

qiita.com

図解 ngrx from kou matsumoto

www.slideshare.net

対応したコード差分は下記あたりです。

Change to Redux Architecture with NgRx by nihemak · Pull Request #7 · nihemak/aws-sls-spa-sample-web · GitHub

Http Client / モックAPI

今回はフロントエンド単独でも動作できるようにしたかったのでAPIモックのためにin-memory-web-apiを使いました。

Angularチュートリアル - HTTP

neos21.hatenablog.com

そして、通信先のAPIをモックにするかHTTPにするかの切り替えは環境変数のAPI_BASE_URLに'mock-server'を指定するか否かをAppModuleで判断して行うようにしました。

ただ、Angularにはng buildやng serveのタイミングで環境変数から値を取得する標準的な仕組みはありませんでした。そのため、pre_build.shというbashを用意してnpm scriptでng buildやng serveの直前に環境変数からsrc/app/environments/environment.tsを動的に生成するようにしました。*3

対応したコード差分は下記あたりです。

Use HttpClient with angular-in-memory-web-api by nihemak · Pull Request #8 · nihemak/aws-sls-spa-sample-web · GitHub

Move api url to environment variable by nihemak · Pull Request #9 · nihemak/aws-sls-spa-sample-web · GitHub