前回の記事はこちらから
後回しにしていたことをやる②React+TypeScriptでNetflixクローンアプリ

Youtubeのトレイラー表示をしたい

またまたエラー

見た目だけは一人前ですが、クリックしても何も起こりません。
(本来はクリックすると画像下側にYoutubeが再生されます。)
掲示板の返信を参考にcurlコマンドでJSON取得してみたり色々やりましたが、

% curl -v "https://api.themoviedb.org/3/movie/550/videos?api_key=XXX"

{
  "id": 550,
  "results": [
    {
      "iso_639_1": "en",
      "iso_3166_1": "US",
      "name": "#TBT Trailer",
      "key": "BdJKm16Co6M",
      "site": "YouTube",
      "size": 1080,
      "type": "Trailer",
      "official": true,
      "published_at": "2014-10-02T19:20:22.000Z",
      "id": "5c9294240e0a267cd516835f"
    }
  ]
}

let trailerurl = await axios.get(`/movie/${movie.id}/videos?api_key=XXX`);

After

let trailerurl = await axios.get(`/tv/${movie.id}/videos?api_key=XXX`);

こんな感じです

デプロイの下準備

こちらの記事が最高にわかりやすくておすすめです！
【React】GitHub ActionsでFirebase Hostingに自動デプロイしてみた
FirebaseはGoogleのサービスなので、ChromeでGoogleアカウントでログイン済みならプロジェクト作成までは簡単です。
ここからが正念場。

firebase-toolsが通らない⇒Firebase CLIがインストールできない

npm audit fixしても通らないので、公式のヘルプの自動インストール スクリプトを参考に

curl -sL https://firebase.tools | bash

↓

firebase login

ちなみにこの後にFirebaseのプロジェクトにアプリを追加するのですが、Firebase Hostingはnpmコマンドが怖くて<script>タグにしました笑
buildフォルダのindex.htmlを使用したので結局使いませんでした。

% firebase init

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

ここから質疑応答になるのですが、ここが一番重要です。

• ? What do you want to use as your public directory?
  デフォルトではpublic(フォルダ)なのですがbuildが正解。私は最初Githubのpublicとprivateと勘違いしてそのままEnterしちゃいました。
• Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices.
  選択項目にHostingが２つありますが、こちらを選んで指示通りにGithubと連携させましょう。
  Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
  ▲▼キーで上下移動、スペースキーで選択、Enterキーで確定と操作が独特なので注意。
  ※間違えたらfirebase initからやり直しです。

Githubと連携しておけばmaster(main)ブランチにMergeした時Firebaseに自動デプロイしてくれます。

npm run bulidを叩いて終了すればFirebaseへデプロイへ。

ついにデプロイ

その後はfirebase deployで終了ですが、このままだとページが真っ白なので
package.jsonの"version"と"private"の間に追加で"homepage": "."を記述

{
  "name": "********",
  "version": "0.1.0",
  "homepage": ".",
  "private": true,
  "dependencies": {

buildフォルダを削除して、再度npm run bulidします。

ついでにfirebase.jsonの中の"public"が"build"になっているか確認しておきましょう。

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

私はこの辺りの確認不足で何時間もかかりましたがなんとかデプロイできました。

次回予告

Notionの標準機能だけでWebサイトビルダーを作ってしまった「The Super Builder」がスゴイ！

それか今回のチュートリアル内で紹介されていた教材をやるかもしれません。
【 React Hooks入門】useStateを使って買い物リストを作るチュートリアル
React + TypeScriptでコネクト4を作った報告（クラスコンポーネント）
ReactでのCOVID-19トラッカー作成で学べる3つの事