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

投稿日: 2022-04-20 2022-10-12
タグ: Angular

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>

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

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: ""

TravisCI自動化ステップが組み込まれています yml 理解しやすい一連の指示を提供します。

何かがおかしい。 The 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に公開されます。

getdocs

13036