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-tools
CLIをグローバルにインストールできます。
$ 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
は空白です。 これは、firebase
CLIを使用して生成する必要があるためです。
$ 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に公開されます。