Angular、TravisCI、FirebaseHostingによる継続的デプロイ

Angularを使用すると、モバイル、Web、およびデスクトップにデプロイできるパフォーマンスの高いWebアプリケーションを構築できます。 Firebase Hosting は、CLIツールで簡単に使用できる人気のサービスです。この記事では、TravisCIを使用してこのデプロイを自動化します。

新しいAngularアプリケーション

Angular CLI を使用して新しいAngularプロジェクトを作成し、共通ベースを確立します。

# Install the Angular CLI
$ npm i @angular/cli -g

# Create a new Angular project with the name of your choosing && change directory
$ ng new AngularFirebaseCI

> N
> SCSS

$ cd AngularFirebaseCI

# Open this up in VS Code and Serve
$ code . && ng serve

これで、基本的なAngularプロジェクトを作成できます。 app.component.htmlに移動し、次のテンプレートを作成します。

<section>
  <article>
    <h1>Angular, Travis CI & Firebase Hosting</h1>
    <p>🔥🔥🔥</p>
  </article>
</section>

app.component.scssの内部に、CSSスタイルを追加してもう少し魔法をかけることもできます。

section {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #8a2387;
  background: -webkit-linear-gradient(to right, #f27121, #e94057, #8a2387); 
  background: linear-gradient(
    to right,
    #f27121,
    #e94057,
    #8a2387
  );
}

article {
  text-align: center;
  color: white;
  padding: 40px;
  box-shadow: 1px 1px 200px rgba(0, 0, 0, 0.8);
}

最後に、グローバルstyles.scss内で、デフォルトのhtmlおよびbodyスタイルを使用します。

html,
body {
  padding: 0px;
  margin: 0px;
}

Firebaseホスティング

プロセスの最初のステップは、FirebaseHostingを起動して実行することです。 Firebase Hosting にアクセスして、新しいプロジェクトを作成します。

Firebase ToolsCLI

ターミナルで次のコマンドを実行することにより、firebase-toolsCLIをグローバルにインストールできます。

$ npm install -g firebase-tools

インストール後、次のコマンドを実行してCLIにログインします。

$ firebase login

認証されたので、プロジェクト内でFirebaseを初期化できます。

$ firebase init

> Hosting

? Select a default Firebase project for this directory
your-firebase-id

? What do you want to use as your public directory? 
dist/

? Configure as a single-page app (rewrite all urls to /index.html)?
Yes

甘い。これで、アプリケーションをFirebaseにデプロイする準備が整いました。 AngularCLIを使用して本番用にビルドしましょう。

$ ng build --prod

これにより、すべてのファイルが含まれるdistフォルダーが生成されます。これをFirebaseにデプロイします。

$ firebase deploy

以下のようなメッセージが表示された場合は、すべてうまくいきました。

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/your-app/overview
Hosting URL: https://your-app.firebaseapp.com

TravisCIオートメーション

毎回手動でこれを行う必要があるのは素晴らしいことではありません。もちろん、コマンドは2つだけですが、複数のチームメンバーがいる場合はどうでしょうか。また、展開について考える必要はありません。もっとコードを書きたいです。

まず、 https://travis-ci.com/ にアクセスし、GitHubアカウントでログインします。 Travisにすべてのリポジトリへのアクセスを許可します。

これにより、自動化できるリポジトリのリストが表示されますが、リポジトリが存在しないため、そこにはありません。

新しいリポジトリ

https://github.com/newで新しいGitHubリポジトリを作成します

次に、次のコマンドを使用してこれをGitHubにプッシュできます。

git remote add origin https://github.com/YourUser/YourRepoName.git
git push -u origin master

展開

もうすぐです。次に、自動展開手順を含む.travis.ymlファイルを作成する必要があります。

language: node_js
node_js:
  - "11.0"
branches:
  only:
    - master
before_script:
  - npm install -g @angular/cli
script:
  - npm install
  - npm run build
deploy:
  skip_cleanup: true
  provider: firebase
  token:
    secure: ""

Travis CIの自動化手順は、ymlに組み込まれており、理解しやすい一連の手順を提供します。

何かがおかしい。 tokenは空白です。これは、firebaseCLIを使用して生成する必要があるためです。

$ firebase login:ci

上記の空のtokenの代わりに使用できる長いトークンを取り戻す必要があります。

この.travis.ymlファイルを次のようにGitHubにプッシュします。

$ git add .
$ git commit -m "Added Travis CI automation!"
$ git push

次に、 https://travis-ci.com にアクセスして、ビルドを確認してください。

=== Deploying to 'app-5c310'...
i  deploying hosting
i  hosting[app-5c310]: beginning deploy...
i  hosting[app-5c310]: found 14 files in dist/AngularFirebaseCI
i  hosting: uploading new files [0/14] (0%)
i  hosting: uploading new files [12/14] (85%)
✔  hosting[app-5c310]: file upload complete
i  hosting[app-5c310]: finalizing version...
✔  hosting[app-5c310]: version finalized
i  hosting[app-5c310]: releasing new version...
✔  hosting[app-5c310]: release complete
✔  Deploy complete!

概要

この記事では、Angularを使用してアプリケーションを作成し、FirebaseHostingにデプロイする方法について説明しました。

次に、TravisCIを使用してこのプロセスを自動化する方法を検討しました。 masterブランチが更新されるたびに、このビルドプロセスが実行され、FirebaseHostingに公開されます。