Angularの開発をCircleCIとNowでCI/CDする

Angular標準のJasmine & KarmaのテストはGoogleChromeが必要で、NowのCIだとそれができなさそうなのでCircleCIを使用しましたが、Now単体でもできるかもしれません。

Angular をinitする

Angular 日本語ドキュメンテーション
を見てAngularプロジェクトを作成します

npm install -g @angular/cli
ng new your-project-name

テストは

cd your-project-name
npm run test

で確認できると思います。自動のGoogleChromeが立ち上がってテストしてくれればOK。

CircleCIをセットアップする

Automate your Nuxt.js app deployment | CircleCI
CircleCIのBlogでNuxtでCIするサンプルがあるので、参考になると思います(こちらはGitHub Pagesにデプロイしているので少し違いますが)

CIまでやる設定は以下のようになります。.circleci/config.ymlとして作成します。

version: 2.1
jobs:
  build:
    working_directory: ~/repo
    docker:
      - image: circleci/node:10.16.3-browsers
    steps:
      - checkout
      - run:
          name: update-npm
          command: "sudo npm install -g npm@5"
      - restore_cache:
          key: dependency-cache-{{ checksum "package-lock.json" }}
      - run:
          name: install-packages
          command: npm install
      - save_cache:
          key: dependency-cache-{{ checksum "package-lock.json" }}
          paths:
            - ./node_modules
      - run:
          name: test
          command: npm run test

ポイントはimage: circleci/node:10.16.3-browsersです。-browsersを付けるとChrome、Firefox、Java 8、および Geckodriver が含まれたimageで実行することができます。
他にも色々imageが用意されているので、詳しくはドキュメントを参照してください。
Pre-Built CircleCI Docker Images - CircleCI

また、testが終わった後にコンソールに戻ってくれないとCircleCIで続きが実行できないので、 package.jsonのscriptsのtestを以下のように書き換えます。

"scripts": {
    ...
    "test": "ng test --watch=false",
    ...
},

最後に、以下の手順にしたがってRepositoryをCIするようにすれば、以降はpushごとにCIしてくれます。
Getting Started Introduction - CircleCI

Nowにデプロイする

Nowの説明はこの記事などを参考にしてください。
史上最速デプロイ！ nowを使ってみた - 筋肉エンジニアの備忘録

CircleCIからNowにデプロイするにはTOKENが必要になるので、GitHubなどでNowにログイン後、
https://zeit.co/account/tokens
からTOKENを取得して、
環境変数の使い方 - CircleCI
などを参考に、環境変数に設定します。

プロジェクトへのプライベート環境変数の追加は、CircleCI 上のプロジェクトごとの設定ページにある、Environment Variables で行えます。

最近CircleCIのUIがコロコロ変わっているのでどこまで参考になるか分かりませんが、以下のような設定画面です。
Name は ZEIT_TOKEN、 ValueはNowで作成したTOKENの中身を貼り付けましょう。

Nowにデプロイまでする設定は以下のようになります。

version: 2.1
jobs:
  build:
    working_directory: ~/repo
    docker:
      - image: circleci/node:10.16.3-browsers
    steps:
      - checkout
      - run:
          name: update-npm
          command: "sudo npm install -g npm@5"
      - restore_cache:
          key: dependency-cache-{{ checksum "package-lock.json" }}
      - run:
          name: install-packages
          command: npm install
      - save_cache:
          key: dependency-cache-{{ checksum "package-lock.json" }}
          paths:
            - ./node_modules
      - run:
          name: test
          command: npm run test
      # ここから追加
      - run:
          name: install now
          command: sudo npm install -g now
      - run:
          name: deploy
          command: now --name your-project-name --prod --confirm -t ${ZEIT_TOKEN}

--nameはデプロイ先のURLを指定できるので、URLに使用したい文字列を入れても大丈夫です。

正常にデプロイできれば、https://"--nemeで指定した文字列".now.sh のようなURLでAnglarのトップページが表示されていると思います。