Githubアクションを使用してAngularアプリをFirebaseにデプロイする

これらの一連の手順は、GithubアクションをセットアップしてAngularプロジェクトを構築し、プッシュイベントでFirebaseホスティングにデプロイするのに役立ちます。 このチュートリアルを参照して、node.jsアプリケーションをビルドし、firebaseにデプロイすることもできます。

Githubアクションを使用すると、ソフトウェア開発ワークフローをリポジトリ内で自動化、カスタマイズ、および実行できます。 これは、アプリケーションの継続的インテグレーション/継続的デプロイ(CI / CD)ライフサイクルを作成および維持するための最良の方法です。

アプリケーションはすでにGithubリポジトリにプッシュされていると想定しています。 Githubアクションの構成から始めましょう。

ステップ1-Githubアクションを作成する

Githubアカウントにログインし、リポジトリにアクセスします。 リポジトリでをクリックします 行動 タブをクリックし、「自分でワークフローを設定する」リンク。

以下のスクリーンショットを参照してください。

Githubアクションワークフローの作成

ステップ2–ワークフローを作成する

setpワークフローリンクをクリックすると、リポジトリの下にある新しいファイル「.github / Workflows /main.yml」が編集されます。 これには、ワークフローのデフォルト構成が含まれています。

次のような、新しく作成されたファイルが表示されます。

jobs:
  # This workflow contains a single job called "build"
  build:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/[email protected]

      # Runs a single command using the runners shell
      - name: Run a one-line script
        run: echo Hello, world!

      # Runs a set of commands using the runners shell
      - name: Run a multi-line script
        run: |
          echo Add other actions to build,
          echo test, and deploy your project.

ステップ3–ワークフローをカスタマイズする

次に、要件に基づいてワークフロー構成ファイルをカスタマイズします。 このステップでは、理解できるように構成を段階的に説明します。 完全な構成ファイルが次のステップで提供されるため、このステップをスキップすることもできます。

  1. ワークフロー名を定義する –これはオプションの手順ですが、ワークフローに名前を付けることができます。
    name: deploy_to_firebase_hosting
    
  2. ジョブ名をカスタマイズする –すべてのジョブは「jobs:」セクションで定義されています。 まず、defualtジョブ名buildをfirebase-deployに変更します。 これは、適切な名前に変更できます。
    jobs:
      firebase-deploy:
    
  3. トリガーをカスタマイズする –デフォルトのワークフローは、ブランチへのプッシュごとにトリガーされます。 これを特定のブランチに制限する必要がある場合があります。たとえば、メインブランチまたはリリース/ *ブランチへのプッシュでのみワークフロートリガーを有効にします。
    on:
      push:
        branches:
        - main
        - release/*
    
  4. チェックアウトアクションの更新 –デフォルトのワークフローはアクションを使用します/[email protected]、最新バージョンです。 したがって、ここで変更を加える必要はありませんが、これを最新のアクションに変更することはできます/[email protected]
    - uses: actions/[email protected]
    
  5. node.jsビルドトリガーをカスタマイズする –次に、AngularアプリケーションのNode.jsバージョンとビルドコマンドを定義します。 たとえば、Node.js12.xバージョンを使用してこのアプリケーションをビルドしています。
    steps:
    - uses: actions/[email protected]
    - uses: actions/[email protected]
      with:
        node-version: '12.x'
    - run: npm install
    - run: npm run build:prod
    
  6. Firebaseにデプロイする –最後のステップは、アプリケーションをFirebase関数にデプロイすることです。
    steps:
    - uses: actions/[email protected]
    - uses: actions/[email protected]
      with:
      node-version: '12.x'
    - run: npm install
    - run: npm run build:prod
    - uses: w9jds/[email protected]
      with:
        args: deploy --only hosting
      env:
        FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
    

    上記の構成に従って、デプロイはFirebaseホスティングのみに行われます。 args値を「」に変更することもできますdeploy --only function」を使用して、firbase関数をデプロイします。

次に、右側の[コミットの開始]をクリックして、新しいワークフローをコミットします。

ステップ4–Firebaseトークンを設定する

Githubアクションのデプロイジョブには、Firebaseにコードをデプロイするための認証にFIREBASE_TOKENが必要です。 システムでfirebasecliツールを使用してトークンを生成できます。

まず、npmを使用してfirebase-toolsをインストールします。

npm i -g firebase-tools 

次に、を実行します firebase login:ci ターミナルでのコマンド:

firebase login:ci  

これにより、ターミナルにリンクが表示されます。このリンクをWebブラウザーで開き、認証を完了してください。 これにより、CIタスクに使用するトークンが表示されます。

例: firebase deploy --token "$FIREBASE_TOKEN"

このトークンを構成ファイルに保持するのは安全ではないためです。 このトークンをGithubシークレットに追加します。

Githubリポジトリで、[設定>シークレット>新しいリポジトリシークレット

使用する FIREBASE_TOKEN 名前としてシークレットコードを入力します セクション。 次に、[シークレットの追加]ボタンをクリックします。

ステップ5–最終的なワークフロー構成

最終的なワークフロー構成ファイルは、テキストエディターで次のようになります。

ファイル:.github / Workflow / main.yml

name: deploy_to_firebase_hosting

on:
  push:
    branches:
    - master
    - release/*

jobs:
  firebase-deploy:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/[email protected]
    - uses: actions/[email protected]
      with:
        node-version: '12.x'
    - run: npm install
    - run: npm run build:prod
    - uses: w9jds/[email protected]
      with:
        args: deploy --only hosting
      env:
        FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

これで、ワークフロー構成ファイルをリポジトリーにコミットできます。 このワークフローは.github / Workflows /main.ymlに追加されます。 お好みのmain.ymlフィールド名を.yml拡張子で変更できます。

次に、先に進み、Githubリポジトリにいくつかの変更をプッシュします。 これにより、Githubアクションが開始され、ワー​​クフローで定義された手順が実行されます。

Firebase関数に正常にデプロイされたGithubアクション

結論

このチュートリアルでは、Githubアクションを使用してAngularプロジェクトを構築し、Firebaseホスティングにデプロイする方法を学びました。

また、訪問することができます Githubアクション 詳細については、ドキュメントを参照してください。

Hope this helps!

Source link