Next.js、firebase、github actions、microCMSを使用して自動デプロイするまで

# 概要
Next.js(TypeScript)とFirebase Hosting,Github Actions,microCMSを使って自動デプロイをできるようにする。
# 使用技術
- Next.js 13.1.0
- React 18.2.0
- TypeScript 4.9.4
- ESLint 8.30.0
# 全体の流れ
1. Next.jsでプロジェクトを作成
1. firebaseの設定
1. microCMSの導入
1. firebase hosting,github actions,microCMSをつなげる
# Next.jsでプロジェクトを作成
まずは、Next.jsのプロジェクトを作ります。今回は`` example-app ``というプロジェクト名は、なんでも大丈夫です。
```zsh:ターミナル
% yarn create next-app example-app

#以下の文が出たら成功
Success! Created example-app at /***/example-app

#作成したプロジェクトに移動
% cd example-app
```

次に静的HTMLのエクスポートを可能にするために、buildスクリプトに`` next export ``を追加します。
```diff_json:./package.json
"scripts": {
  "dev": "next dev",
- "build": "next build",
+ "build": "next build && next export",
  "start": "next start",
  "lint": "next lint"
}
```

ローカルサーバーで静的ファイルをホスティングし動作確認できるように、devDependenciesにserveというパッケージをインストールします。
```zsh:ターミナル
% yarn add -D serve
```
build & serveを実行するため、serveスクリプトを追加します。
```diff_json:./package.json
"scripts": {
  "dev": "next dev",
  "build": "next build && next export",
+ "export": "yarn build && serve ./out",
  "start": "next start",
  "lint": "next lint"
}
```
画像最適化をさせないために`` next.config.js ``に追記します。
```diff_javascript:./next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
+  images: {
+   unoptimized: true,
+ },
}

module.exports = nextConfig
```
ここまで来たら、githubにpushをしておいて下さい。
# Firebaseプロジェクトの作成
以下からFirebaseに移動して下さい。
アカウントを持ってない場合は作って下さい。
https://console.firebase.google.com/
![スクリーンショット 2022-12-26 5.56.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/75e4835e-a864-1bea-9d84-e7fb583a4d61.png)
上の画面が出たら、`` プロジェクトを追加 ``を押します。
![スクリーンショット 2022-12-26 6.02.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/61d6e037-6f85-006f-9a43-095fa968f609.png)
プロジェクト名はなんでも大丈夫です。
今回は`` example-app ``にします。
続行をクリックします。
![スクリーンショット 2022-12-26 6.03.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/5b79fcbb-aa91-430b-2d3a-386588539448.png)
プロジェクト作成をクリックします。
![スクリーンショット 2022-12-26 6.04.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/d966fb14-a143-9712-0020-46633db81f6c.png)
続行をクリックします。
![スクリーンショット 2022-12-26 6.04.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/1ff72b9b-dfc6-9934-5fdd-b0a426ae95d3.png)
上の画像の赤円の中にある`` ウェブ ``をクリック
![スクリーンショット 2022-12-26 7.21.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/37bcc5c0-1a63-c976-5301-b22cdf59ab13.png)
アプリのニックネームをexample-appにして、このアプリのFirebase Hostingも設定します。にチェックを入れて、アプリを登録します。
![スクリーンショット 2022-12-26 7.22.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/a313f92c-22b1-20d7-3e21-69245ae6bd09.png)
上の画像のように、`` npm install firebase ``をするんですが、今回は`` yarn ``を使うことにします。もちろん`` npm ``でも大丈夫です。
```zsh:ターミナル
% yarn add firebase
# npm install firebase でも可
```
![スクリーンショット 2022-12-26 7.23.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/55e22f21-149c-eea7-42ba-2bcc83b8c8f0.png)
今回も`` yarn ``を使っていきます。
```zsh:ターミナル
% yarn add firebase-tools
# npm install -g firebase-tools でも可
```
![スクリーンショット 2022-12-26 7.24.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/92e7129d-758e-2cd7-38df-045fac5527aa.png)
まずはFirebaseにログインしていきます。
ログインをしようとすると質問されるのでyesで答えます。
```zsh:ターミナル
% yarn firebase login 
i  Firebase optionally collects CLI and Emulator Suite usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.

? Allow Firebase to collect CLI and Emulator Suite usage and error reporting information? (Y/n) Yes
```
すると、Googleのアカウント選択のサイトに遷移します。
お使いのアカウントを選択して、リクエストを許可して下さい。
![スクリーンショット 2022-12-27 7.20.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/63e5496f-f2c5-08e7-85b6-721c81c1127e.png)
![スクリーンショット 2022-12-27 7.21.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/3af2fef9-9576-7b0a-0ba9-976a06d7edf3.png)
画面に以下の画像が表示されれば成功です。
![スクリーンショット 2022-12-27 7.22.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/3ed558dd-1bb2-04ce-3b09-e8d99134e831.png)
次にFirebaseプロジェクトの初期設定をしていきます。
```zsh:ターミナル
% yarn firebase init


     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########


```
`` yarn firebase init ``をすると、でっかいFIREBASEが出てきて、たくさん質問に答えていきます。

```zsh:ターミナル

? Which Firebase features do you want to set up for this directory? Press Space to select features, then 
Enter to confirm your choices. 

A. Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: 

#自分で作ったfirebaseのディレクトリを選ぶ
A. example-app-debd1 (example-app)

i  Using project example-app-debd1 (example-app)

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? 
A. out

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

? Set up automatic builds and deploys with GitHub? 
A. Yes

✔  Wrote out/404.html
✔  Wrote out/index.html

i  Detected a .git folder at /Users/example-app
i  Authorizing with GitHub to upload your service account to a GitHub repository's secrets store.

Visit this URL on this device to log in:
https://github.com/login/oauth/authorize?client_id=89cf50f02ac6aaed3484&state=591509360&redirect_uri=http%3A%2F%2Flocalhost%3A9005&scope=read%3Auser%20repo%20public_repo

Waiting for authentication...

✔  Success! Logged into GitHub as user_name

? For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository) 
#GitHubのuser_name/作ったリポジトリ名
A. user_name/example-app

✔  Created service account github-action-582462022 with Firebase Hosting admin permissions.
✔  Uploaded service account JSON to GitHub as secret FIREBASE_SERVICE_ACCOUNT_EXAMPLE_APP_DEBD1.

? Set up the workflow to run a build script before every deploy? 
A. Yes

? What script should be run before every deploy? 
A. yarn install && yarn build

✔  Created workflow file /Users/example-app/.github/workflows/firebase-hosting-pull-request.yml
? Set up automatic deployment to your site's live channel when a PR is merged?
A. Yes

? What is the name of the GitHub branch associated with your site's live channel?
A. main

✔  Created workflow file /Users/example-app/.github/workflows/firebase-hosting-merge.yml

i  Action required: Visit this URL to revoke authorization for the Firebase CLI GitHub OAuth App:
https://github.com/settings/connections/applications/89cf50f02ac6aaed3484
i  Action required: Push any new workflow file(s) to your repo

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

```
ここでローカル側でデプロイのためのビルドフォルダを作成します。
```zsh:ターミナル
% npm run build
```
ここで、一旦`` git push ``をしておいて下さい。
そしたら、デプロイをしていきます。
```zsh:ターミナル
% yarn firebase deploy

=== Deploying to 'example-app-debd1'...

i  deploying hosting
i  hosting[example-app-debd1]: beginning deploy...
i  hosting[example-app-debd1]: found 24 files in out
✔  hosting[example-app-debd1]: file upload complete
i  hosting[example-app-debd1]: finalizing version...
✔  hosting[example-app-debd1]: version finalized
i  hosting[example-app-debd1]: releasing new version...
✔  hosting[example-app-debd1]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/example-app-debd1/overview
Hosting URL: https://example-app-debd1.web.app
```
デプロイに成功したら、`` https://example-app-debd1.web.app ``にアクセスしてみましょう。
![スクリーンショット 2022-12-27 9.28.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/c982e463-fb8c-e6ed-8683-9d8fe25677f4.png)
今回は上の画面になったら成功です！
# microCMSの導入
まずはサービスを作成します。
今回はサービス名を`` example ``、サービスIDを`` example123 ``にしました。
サービス名、サービスIDが決定したら、サービスを作成するをクリックして下さい。
サービスを作成したら、サービスにアクセスするをクリックして下さい。
![スクリーンショット 2022-12-28 3.56.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/ad852a00-1fac-6aa6-59e1-3f0d501d4258.png)
![スクリーンショット 2022-12-28 3.56.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/c14a535c-4c0f-093e-f775-4247dc7c2e68.png)
そうすると、以下のような画面になります。左上には、さっき決めたサービス名とサービスIDが書かれています。
そして、APIを作成の`` 自分で決める ``をクリックして下さい。
![スクリーンショット 2022-12-28 3.57.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/e3bae34d-f400-8610-6f05-33c2aa2de848.png)
API名とエンドポイントを決めて下さい。
決めたら、次へをクリックして下さい。
![スクリーンショット 2022-12-28 4.12.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/a495faf8-0777-d1ce-f1d7-063643f29af6.png)
リスト形式をクリックします。
![スクリーンショット 2022-12-28 4.12.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/a9664608-b685-9ad1-a3c7-a9dee4f000b2.png)
今回は以下のように定義して作成をクリックします。
![スクリーンショット 2022-12-28 4.14.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/64bfc800-8d2e-dfda-a0e8-0df99f42a619.png)
そうすると、以下のような画面に遷移して、左側のコンテンツ（API）にイグサンプルが追加されます。
![スクリーンショット 2022-12-28 4.14.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/34dc5fd7-a6f9-b253-d54a-f6dd601ffd53.png)
それでは、コンテンツを追加していきます。
追加をクリックすると、先ほど決めたタイトルと本文が出てきます。
適当にタイトル、本文を決めて公開をクリックして下さい。
![スクリーンショット 2022-12-28 4.30.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/561ea996-db91-b6da-7c2e-d6a908133659.png)
今回は2つ追加しました。
![スクリーンショット 2022-12-28 4.33.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/f00a958a-859c-ab52-9ead-c129d882b401.png)
次に、API周りの準備をしていきます。
まず、上の画像の右上にあるAPIプレビューをクリックすると下のような画面が出てきます。
赤く隠れている部分にAPIキーがあります。これをコピーしましょう。
![スクリーンショット 2022-12-28 8.53.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/11270734-f46f-6404-2fb6-3c8c03f4f53e.png)
APIを保護するenvファイルを作ります。
```zsh:ターミナル
% touch .env.development.local
```
ファイルを作ったら、APIを書き込みます。
`` ********* ``のところに、先ほどコピーをしたAPIをペーストして下さい。
```./.env.development.local
API_KEY=*********
```
公式から出ているmicrocms-js-sdkをインストールします。
そして`` libs ``フォルダと、その直下に`` client.js ``ファイルを作り、ここでSDKの初期化をします。
```zsh:ターミナル
#microcms-js-sdkをインストール
% npm install --save microcms-js-sdk

#libsフォルダとclient.jsファイルの作成
% mkdir libs
% touch libs/client.js
```
```javascript:./libs/client.js
import { createClient } from 'microcms-js-sdk';

export const client = createClient({
  serviceDomain: 'example123',
  apiKey: process.env.API_KEY,
});
```
`` example123 ``はサービスIDです。

ここまできたら、ブログを表示させていきます。
まず、typesフォルダを作って、その直下にexampleファイルを作ってtypeの定義をしていきます。
```zsh:ターミナル
% mkdir types
% touch types/example.ts
```
```typescript:./types/example.ts
export type Example = {
  id: string;
  title: string;
  body: string;
}
```
今度は`` index.tsx ``を編集していきます。
```tsx:./pages/index.tsx
import Link from "next/link";
import {
  GetStaticPaths,
  GetStaticProps,
  InferGetStaticPropsType,
  NextPage,
} from "next";
import { client } from "../libs/client";
import type {Example} from "../types/example";

type Props = {
  example: Example[]
}

const Home: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({
  example,
}: Props) => {
  return (
    <div>
      <ul>
        {example.map((example) => (
          <li key={example.id}>
            <Link href={`/example/${example.id}`}>
              {example.title}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}


export const getStaticProps = async () => {
  const data = await client.get({ endpoint: "example" });

  return {
    props: {
      example: data.contents,
    },
  };
};


export default Home;

```
ここまで来たら、一旦ローカル環境で成功しているかを確かめましょう。
microCMSで作ったタイトルが`` http://localhost:3000 ``に表示されていたら成功です。
```zsh:ターミナル
% npm run dev
```
![スクリーンショット 2022-12-28 9.20.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/43674f87-a8e2-b2e2-0696-1583881e3097.png)
次は一つ一つの詳細画面（クッリクした後の画面）を作っていきます。
`` pages ``フォルダの中に`` example ``フォルダを作って、またその中に`` [id].tsx ``を作ります。
```tsx:./pages/example/[id].tsx
import { client } from "../../libs/client";
import {
  GetStaticPaths,
  GetStaticProps,
  InferGetStaticPropsType,
  NextPage,
} from "next";
import type {Example} from "../../types/example";

type Props = {
  example: Example
}

const ExampleId: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({
  example,
}: Props) => {
  return (
    <main>
      <h1>{example.title}</h1>
      <div
        dangerouslySetInnerHTML={{
          __html: `${example.body}`,
        }}
      />
    </main>
  );
}

export default ExampleId;

export const getStaticPaths = async () => {
  const data = await client.get({ endpoint: "example" });

  const paths = data.contents.map((content: any) => `/example/${content.id}`);
  return { paths, fallback: false };
};

export const getStaticProps = async (context: any) => {
  const id = context.params.id;
  const data = await client.get({ endpoint: "example", contentId: id });

  return {
    props: {
      example: data,
    },
  };
};
```
`` http://localhost:3000 ``から詳細画面ができているが確認しましょう。
下の画面が表示されていたら成功です。
![スクリーンショット 2022-12-28 9.34.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/0a49d673-24cc-552e-af9f-8ccfe49cf04f.png)
ここで`` git push ``をしておきましょう。

# microCMSを編集してFirebaseにデプロイできるようにする
ここからは、microCMSからGitHub ActionsへWebhook通知し、Firebaseにデプロイできるようにしていきます。
まずは、GitHubトークンを生成していきます。
GitHubのページの右上にあるアイコンをクリックして出てくるメニューバーの`` Settings ``をクリックします。
そしたら、画面の左側の一番下にある`` Developer settings ``をクリックします。
![スクリーンショット 2022-12-28 9.43.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/8604e386-5ccd-4dcd-a36c-02beede95d64.png)
![スクリーンショット 2022-12-28 9.46.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/7cc2d13d-4bc0-0dd1-8613-24577f9c39ef.png)
左側の`` Personal access tokens ``の`` Tokens (classic) ``をクリックして、右上にある`` Generate new token (classic) ``をクリックして新しいトークンを生成します。
![スクリーンショット 2022-12-28 9.48.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/2ff97365-9b36-912f-ac5c-9533883274fe.png)
![スクリーンショット 2022-12-28 9.53.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/f420542f-329c-049a-bc8e-d827c0fa1286.png)
Noteには`` update_example ``と入れて、下のチェックボックスは以下の画像のようにしたら、`` Generate  token ``をクリックします。
![スクリーンショット 2022-12-28 5.15.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/b9059dcc-bd7b-cc26-6eb5-67434592b5f5.png)
以下のように、無事トークンが生成されました。
![スクリーンショット 2022-12-28 5.16.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/73819255-7f3b-5737-d64e-d4104247e2fd.png)
次はmicroCMSの方でWebhookの設定をしていきます。
右上にある`` API設定 ``から`` Webhook ``を選びます。
![スクリーンショット 2022-12-28 10.11.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/aa7aafb8-2a1d-ad03-4cc3-b9e6baf6fa28.png)
追加をクリックして、`` GitHub Actions ``を選びます。
![スクリーンショット 2022-12-28 5.07.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/b9a911dd-a4b2-bbb0-7bb5-dd9b3387678a.png)
![スクリーンショット 2022-12-28 5.08.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/6ba659bc-16f0-752e-4769-f0d03bd1cfc9.png)
先ほど、生成したGitHubトークンとGitHubのユーザー名、リポジトリ名、トリガーイベント名を記入します。識別名は任意なので、お好きにどうぞ。
記入したら、設定するをクリックして下さい。
![スクリーンショット 2022-12-28 5.16.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/932b6d65-b7bc-f769-60a3-c558b7ac5687.png)

続いてGitHub Actionsの設定をしていきます。
該当のリポジトリページを開いて、Actionsのタブを選択します。
左側にある`` New workflow ``をクリックして、検索のところに`` node.js ``と検索すると、以下のようになります。Node.jsの`` configure ``をクリックして下さい。
![スクリーンショット 2022-12-28 10.23.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/dc8ba7d9-f6f2-2caf-839a-eccea33193a3.png)
そう出てきた、コードを以下のように変更して``Start commit``から`` Commit new file ``をしてくだい。
```yml:./github/workflows/node.js.yml
name: Node.js CI

on:
  push:
    branches: [ "main" ]
  repository_dispatch:
    branches: [ "main" ]
    types: [update_example]

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: 18.12.1
    - run: touch .env
    - run: echo "API_KEY=${{ secrets.MICROCMS_EXAMPLE_API_KEY }}" >> .env
    - name: yarn install, build
      run: |
           yarn install
           yarn build
    - name: deploy to Firebase Hosting
      uses: w9jds/firebase-action@master
      with:
        args: deploy
      env:
        FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
```
`` repository_dispatch ``の`` types ``はmicroCMSのWebhookで決めたトリガーイベント名です。
.envファイルはGithubnにはないので、APIキーをSecretsに設定します。
Settignsのタブを選択して、左側のSecretsのActionsを選び、右上の`` New repository secret ``をクリックします。
![スクリーンショット 2022-12-28 10.34.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/9ae2bdc5-55ba-2b61-50c2-0d80df704a92.png)
下のような画面が出たら、Nameには`` MICROCMS_EXAMPLE_API_KEY ``を記入して、Secretには``　.env.development.local ``
にある``　API_KEY=******** ``の`` ******** ``部分をコピペして、secretを追加して下さい。
![スクリーンショット 2022-12-28 10.38.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/4cad1402-c711-3507-b1ce-07b41d85d28f.png)
次はFirebaseトークンをSecretsに設定します。
```zsh:ターミナル
% firebase login:ci
```
上のを実行すると、Googleのログインの画面になるので、お使いのアカウトを選択しFirebase CLIを許可して下さい。
```zsh:ターミナル
✔  Success! Use this token to login on a CI server:

**********************************

Example: firebase deploy --token "$FIREBASE_TOKEN"
```
上のようになったら、先ほどと同様にSecretsを設定します。
Nameには`` FIREBASE_TOKEN ``を記入して、Secretには``　firebase login:ci ``で獲得した`` ******** ``をコピペして、secretを追加して下さい。

できたら、最終確認です。
microCMSから要素を追加します。
![スクリーンショット 2022-12-28 10.58.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/f0a20d44-c55f-0df3-12e5-d5a95dad1f16.png)
３個目のタイトルを追加しました。
GithubのActionsタプを選択して下さい.update_exampleが動いているのがわかります。
![スクリーンショット 2022-12-28 10.59.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/15f04521-3a5a-6039-2f76-bdd0c2a3cb1e.png)
しばらく待って、成功すると以下のようになります。
![スクリーンショット 2022-12-28 11.00.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/2ec5fea0-53da-116a-fab4-8c3d9458313f.png)
`` https://example-app-debd1.web.app ``で確認すると、３個目のタイトルが追加されているのがわかります。
![スクリーンショット 2022-12-28 11.03.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1262325/6b026517-c8e3-c8b4-2f9e-ca8d43664529.png)
これで、自動デプロイ成功です。

# 最後に
お疲れ様でした。