🎥 【続】後回しにしていたことをやる②React+TypeScriptでNetflixクローンアプリ
作成日: 2022/03/27
3

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


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

またまたエラー

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

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

JSON

{
  "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"
    }
  ]
}

"key"の文字列はYoutubeの動画のURL(こちらはファイトクラブという映画です)。

たった一箇所直しただけで動きました。
Before (Row.tsx)
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が2つありますが、こちらを選んで指示通りに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"
      }
    ]
  }
}

私はこの辺りの確認不足で何時間もかかりましたがなんとかデプロイできました。
スクリーンショット 2022-03-29 1.23.47.jpg


次回予告

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

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


2021年からプログラミング学習を開始し、未経験から受託開発企業に転職。2022年前半を目標に転職活動中です。 JavaScriptとjQueryはPFで使用経験あり。最近始めたReactを使用してアプリを作成したいと考えております。 #ENJIN