React ( TypeScript ) × Firebase ×GitHub 初期設定
TypeScriptでReactアプリを作成し、FirebaseのHostingを使って公開するための初期設定。
ローカルから直接Deployせず、Githubを介してFirebaseに投げ込む形にする。
環境はWindows11 + VSCode。GithubとFirebaseへの登録は終わっている前提で進めます。
自分用のメモ書きなので、間違いやより良い方法があればご指摘ください。
Node.jsをインストールする
まだNode.jsをインストールしていない場合はインストールします。
Reactのインストールや各種モジュールを追加するために使用するnpmを使えるようになります。
LTS版をダウンロードしてインストールします。設定はデフォルトで大丈夫です。
インストール終了後、ターミナルを開いてコマンドを実行します。インストール前から開いていた場合は一度閉じてから開きなおしてください。
node --version
npm --version
npx --version
正常にインストールされていればそれぞれバージョンが表示されます。
Githubでリポジトリを作成する
最初にプロジェクトをGithub上で作成します。
Repository nameを入れ、あとはデフォルトのまま作成を行います。
Reactのインストールフォルダは小文字のみで作成しなければならないそうです。
「TestProject」ではエラーが出るため、「test-project」などにしましょう。
VSCodeでReactをインストールする
VSCodeでReactをインストールしていきます。
Reactアプリ作業フォルダを作成する
まだReact用の作業フォルダを作成してない場合は作成します。
日本語を混ぜないパスのほうがいいような気がしています。
リポジトリのクローンを作成する
VSCodeが立ち上がったらソース管理を開きます。
「リポジトリを初期化する」が表示されている場合はボタンを押します。
ソース管理の文字の右側にある３点メニュー（ビューとその他のアクション）を開き、「クローンを作成」をクリックします。
VSCode上部の検索窓に「GitHubから複製」が表示されるのでクリックします。
次にリポジトリ一覧が表示されるので、先ほど作成したリポジトリを選択します。
クローンフォルダが作成され、開くかどうか聞かれるのでOPENします。
Reactのインストールを行う
VSCodeで新しいターミナルを開きnpmのコマンドを入力します。
npx create-react-app --template typescript .
create-react-appでReactをインストールします。
今回はTypeScriptで開発を行いたいので--template typescriptでテンプレートを追加します。
最後に.をつけることでカレントディレクトリにインストールを開始します。
create-react-appをインストールするか聞かれた場合はyを選択してください。
しばらく待つとReactのインストールが完了します。
ERROR enoent
実行したときにAppData内にnpmのフォルダがないというエラーが発生しました。
原因は深く考えなかったのですが、npxの再インストールで直りました。
npm i -g npx
Reactのテストを行う
正常にインストールできたかをチェックするためにReactの確認を行います。
ターミナルでstartコマンドを入力し、ブラウザで動作を確認します。
通信の許可を求められる場合がありますので、必要に応じて許可してください。
npm start
Reactのロゴが回転するページが表示されればOKです。
ターミナル内でCtrl+Cでテストを終了します。
Firebaseでプロジェクトを作成する
FirebaseのHostingを使うためにプロジェクトを作成します。
Firebaseプロジェクトの作成
コンソールページからプロジェクトの追加を選択します。
- 最初のページでプロジェクトの名前を付けます。GitHubで作ったものと同じものが使えればわかりやすいかと思います。
- Googleアナリティクス設定は無効にしておきます。
これであたらしいプロジェクトを作成できます。
Firebaseの認証情報を取得する
今回はReactを使ったWEBアプリを作成したいので、ウェブ用のアイコンを選択します。
アプリのニックネームを入力し、アプリを登録を選択します。
「Firebase Hostingも設定します」のチェックボックスは外しておいてください。
アプリの登録ボタンを押すとSDKが表示されます。これでFirebaseのプロジェクトは作成されました。
Firebaseの初期化を行う
個人的にここが最大の難関でした。CLIに馴染みが無さ過ぎたんです。
今後、多くのサービスを使う上で深く使っていこうとするとCLIとはたびたび出会うので、気合を入れていきましょう。
firebase-toolsをインストールする
FirebaseCLIを使用するためにはfirebase-toolsをインストールする必要があります。
まだインストールしていない場合は次の作業を行ってください。
npm i -g firebase-tools
しばらく待つとインストールが終了します。
FirebaseCLIを使ってFirebaseにログインしてみましょう
firebase login
Firebaseの情報収集に関して許可を求められます。特別何かなければそのままEnterを押してください。
その後、ブラウザでFirebaseへのログインの許可が求められるので許可ボタンを押しましょう。
これでFirebaseへのログインが終わります。ログインのタブは消してOKです。
このシステムではスクリプトの実行が無効に・・・
こちらのページで詳しく書かれていますが、Windowsのシェルスクリプトがデフォルトで許可されていないことが原因になります。
何も知らないまますべて開放してしまうのも危険なので、下記のコマンドで初期化を実行してください。一時的にスクリプトを許可して実行できます。
PowerShell -ExecutionPolicy RemoteSigned firebase login
次の項目で初期化するときも同様のエラーが出るかと思いますので、loginの部分を各処理に書き換えて実行してください。
Firebaseを初期化する
次のコマンドを入力してFirebaseの初期化を開始する
firebase init
準備が出来ているか聞かれるのでYを選択。
Firebaseのどの機能を使うかを問われる。
選択はスペースキーで行う。使う機能をすべて選択した後にEnterを押す。
今回はHostingの初期設定を行うため、
(*) Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
のみを選択し、Enterを押す。
次に既存プロジェクトを使うか新規プロジェクトを立ち上げるか聞かれる。
先ほど作ったプロジェクトを使いたいので、「Use an existing project」を選択したままEnter。
次にどのプロジェクトを使うか聞かれるので、先ほど作成したプロジェクトを選択する。
ここから先の質問は選択しないでENTERを押すとデフォルトが設定される。
基本的にデフォルトと違う設定を選択するため、間違ってENTERで一気に進めないこと。
間違ったらinitしなおせばいいので、そこまで神経質にならなくてもよい。
最初に公開ディレクトリを聞かれる。buildと入力してEnterを押す。
? What do you want to use as your public directory? build
ReactのPublicは画像ファイルなどが置かれる場所になる。WEBアプリ自体はビルドしたものになるため、ビルド先のフォルダとしてbuildを指定する。
次にhtmlファイルを複数持たないシングルページアプリ(SPA)か聞かれる。ReactはSPAなのでYを選択する。
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
次にGitHubにプッシュしたプロジェクトを自動でbuild&deployする設定をするか聞かれる。Yを選択。
? Set up automatic builds and deploys with GitHub? Yes
すると、自動でブラウザページが立ち上がり、GitHubへログインする（ログイン許可を求められた場合はログインする）
その後、リポジトリの名前を求められるので、最初に作ったGitHubリポジトリをユーザ名から入力する。
? For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository) user/repository
すると、GitHubにデータを流すと自動でFirebaseまで送られる仕組みが設定される。地味にすごい。
次にdeployする前にbuildを走らせるか聞かれる。Yを選択。
? Set up the workflow to run a build script before every deploy? Yes
次にdeploy前に使うスクリプトを聞かれる。npm環境でよければデフォルトのままENTER。
（ここでたまに詰まります。遅いなと思ったらもう一回ENTER押してみてください）
? What script should be run before every deploy? npm ci && npm run build
次はプルリクエストがあったときに本番用サイトをマージするか聞かれます。特に何もなければそのままYを選択します。
? Set up automatic deployment to your site's live channel when a PR is merged? Yes
最後に本番用のブランチ名は何かを聞かれます。GitHubを開くなどしてブランチ名を確認してください。基本的にはmainで大丈夫だと思いますが、人によってはmasterだったりします。
? What is the name of the GitHub branch associated with your site's live channel? main
これにてFirebaseの初期化は完了です。お疲れさまでした。
Githubを利用してFirebaseにDeployする
これにてFirebaseにReactのページを表示する下準備が終了しました。
実際にウェブページで動作を見てみましょう。
GitHubにプッシュする
VSCodeのソース管理でコメントに「Firebase initialize」と入力し、「コミットしてプッシュ」を選択します。
ダイアログが開かれた場合は「はい」を選択する。
GitHubを見てみる
先ほど作ったリポジトリを開いてみるとReactとFirebaseで作成したファイルが入っているはずです。
Actionタブを開くとビルドしてFirebaseに対してデプロイしていることを確認できます。
先ほどコメントを入れたバージョンに対して作業を行ったことが確認できました。
バージョン名の左のチェックが黄色で回転している場合は処理中であることを示します。
Firebaseで見てみる
ついにインターネット上で公開されているかの確認です。
Firebaseで作ったプロジェクトを見てみます。
左側のメニューにHostingがあるかと思うので開きます。
Hostingのダッシュボードが開きますので、2つあるデフォルトのドメインのどちらかのURLをクリックします。
すると先ほどのReactのロゴが回転するページが表示されます。
これにてローカルで作ったReactアプリをFirebase上で公開する初期設定が完了しました。
あとはここから必要なアプリを作成し、npm runで動作を確認し、GitHubへ送ることでWEB公開できる流れが出来上がりました。
APIキーをローカルとGitHubActionsで安全に使う方法。
2023/08/30 追記1
Discussion