AngularアプリをTravis CIからGitHub Pagesへデプロイする

# はじめに
Angularでアプリ作ってると公開したくなりますよね？

GitHub Pagesはブランチさえ作れば簡単に公開できるので、とても便利なサービスです。

ただ、毎回手動でデプロイするのは手間がかかるので、Travis CIでテスト通すついでにデプロイまでやってしまいましょう！

# 準備するもの
- GitHubアカウント
- Node.jsのインストール
- Angular CLIのインストール

# 手順

## 1. 新規リポジトリを作成
ここでは仮に、`test-app`という名前でリポジトリを作成します。
一番下の**「Initialize this ...」**にはチェックを入れておいてください。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/106886/35e52990-940f-20cb-9d22-ed96365418f0.png)

## 2. GitHub APIトークンの生成
GitHubの「[Personal Access Token](https://github.com/settings/tokens)」からトークンを生成します。

Token descriptionを入力したら、**「repo」**にチェックを入れ、

![image.png](https://qiita-image-store.s3.amazonaws.com/0/106886/cf831e03-d564-a8aa-307d-13197a444323.png)

**「Generate token」**を押すと、
![image.png](https://qiita-image-store.s3.amazonaws.com/0/106886/20cd24aa-4ab8-ca39-df18-513e824b84df.png)

APIトークンが生成されます（画像は一例です）。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/106886/0e7f019c-e559-f2f6-4794-42313e7689b9.png)

APIトークンは後で使うので、ここでコピーしておいてください。


## 3. Travis CIの設定

Travis CIの「[Accounts](https://travis-ci.org/profile/)」から対象となるリポジトリを選択します。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/106886/84ee41a1-de7b-f959-b11e-9197797cf280.png)

画像のようにチェックを入れたら、歯車ボタンを押して次の「APIトークンの設定」へ進みましょう。

## 4. APIトークンの設定

ここでは仮に、**GITHUB_TOKEN**という名前で先程生成したAPIトークンを設定します（画像は一例です）。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/106886/09f2cdd4-da97-86e5-90f1-01d86f3815bc.png)

**「Add」**を押すと登録されます。

## 5. リポジトリをクローン

GitHub Desktopを利用するか`git clone`を実行してリポジトリをクローンしましょう。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/106886/2420d05d-3562-6407-8a13-86ba42d0345c.png)

## 6. Angular CLIで新規アプリを作る

```
$ ng new test-app
```

作成後、先程クローンしたリポジトリへ`test-app`内のファイルを全部コピーしましょう。

<img src="https://qiita-image-store.s3.amazonaws.com/0/106886/b1e3c245-f67a-58e6-b72c-26ee1932d7c4.png" width="200px">

## 7. karma.conf.jsの修正
Travis CIでのユニットテストは、Chromeのヘッドレスモードで実行する必要があるので、設定を変更します。

```js:karma.conf.js
    browsers: ['ChromeHeadless'],
```

## 8. protractor.conf.jsの修正
E2EテストもChromeのヘッドレスモードで実行するのでオプションを追加します。

```js:protractor.conf.js
  capabilities: {
    'browserName': 'chrome',
    chromeOptions: {
      args: ['--headless']
    }
  },
```

## 9. .travis.ymlの追加
設定ファイルを追加しましょう。

下記の例では、
- Node.jsのVer.6以降の利用
- キャッシュ有効化
- Chromeのインストール
- Angular CLIのインストール
- ユニットテストの実行
- E2Eテストの実行
- アプリのプロダクションビルド実行
- GItHub Pagesへデプロイ

のスクリプトを記述しています。

```yaml:.travis.yml

sudo: false

language: node_js

node_js:
  - "6"
  - "7"
  - node

dist: trusty

cache:
  directories:
    - node_modules

addons:
  apt:
    sources:
      - google-chrome
    packages:
      - google-chrome-stable

before_install:
  - npm install -g @angular/cli

script:
  - ng test --single-run
  - ng e2e
  - ng build --prod --base-href="https://puku0x.github.io/test-app/"

deploy:
  provider: pages
  skip_cleanup: true
  github_token: $GITHUB_TOKEN
  local_dir: dist
  on:
    branch: master
```

ビルドスクリプト中の`--base-href`には、
**https://<ユーザ名>.github.io/<リポジトリ名>/**
を設定しましょう。

## 10. ページにアクセス
デプロイ先にアクセスして、ページが表示されれば完了です。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/106886/d93153ee-0dc4-dbe2-fa4e-dcd601eb3fd8.png)


# 終わりに
比較的簡単な設定で、アプリをテストしてデプロイまでできました。

開発周りのツールやサービスはますます便利になっていますね！

もっと簡単にできるよ！という場合はコメントまでどうぞ！

# 参考URL
https://caveofcode.com/2017/05/publish-an-angular-app-to-github-pages/
https://github.com/puku0x/test-app