Shin_CodeShin_CodeホームHTML/CSSReactPythonDjangoホームReact【2021】Reactでfirebaseへデプロイする際の手順を公開2021年9月11日SHAREツイートシェアはてブLINEPocketfirebaseのホスティング機能を使って簡単にReactで作ったWebアプリケーションをデプロイしたい。いうことで、ブログなどを閲覧していましたが情報が古かったので更新しておきます。React×firebaseでアプリをデプロイしたい人は参考にどうぞ。Reactでfirebaseへデプロイする際の手順まずは手順を示しておきます。deployもう少し細かく説明します。CLIのインストールが必須。firebase-toolsでインストールすること。firebase-toolsこれでfirebaseCLIが使えるようになるはずです。loginこれでfirebaseコマンドが使えない人はnpmのPATHが正常に通ってないので、こちらの記事を参考にしてください。initで初期化firebaseのコマンドが正常に動いたら、まずはfirebaseを初期化します。ここから質問に答えていって初期化を完了させていきます。choices)Hosting機能を使うので上の※をスペースを押して選択します。オプションでgitHubと連携ができるみたいですが、今回はスルーでいきます。projectfirebaseでプロジェクトを用意していると思うので、1番上の存在しているプロジェクトにカーソルを合わせた状態でEnter。(super-char-app)現在作っているプロジェクトにカーソルを当ててEnterを押してください。buildここでは「public」ではなく「build」としてEnterを押します。buildコマンドを実行するので、そこに存在するindex.htmlを読み込ませるという流れみたいです。作成されるみたいです。私はNoにしておきました。No今回はGithubとの連携はしないのでこれもNoを選択。YesにすればGithubと連携して自動でビルドとデプロイができるみたいです。complete!これで初期化が完了しました。buildnpmコマンドを使ってビルド開始です。終了すれば自動的にbuildフォルダが生成されるはずです。buildこれが無事成功すれば、お次はデプロイできるかテストします。serveでデプロイできるかテストこのままデプロイしてもよいですが、ちゃんと設定されているか確認してみましょう。以下のコマンドを入力します。serveこれでlocalhost:5000にアクセスしてみましょう。これで所望のページが開けてたらデプロイします。deployこれでデプロイが完了です。Reactでfirebaseへデプロイする際の手順:まとめ初期化で結構質問されるので戸惑う人も多いと思います。私も完璧には理解してませんが、とりあえずデプロイができたので満足しています。私がfirebaseでデプロイした例を載せておきます。startしたらエラーで動かなったから解決策。「Reactが難しぎる」と感じているあなたへ。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。Posts【Udemy割引クーポン】視聴者様限定で92%オフのUdemyクーポンを配布します【Udemy講師】失敗談!Windowsのライセンス認証の透かしが見えてると審査に通りません【Django】pdfの文字を抽出して翻訳するアプリを作ってみた。ReactとFirebaseで掲示板作ってみた。startしたらエラーで動かなったから解決策。ReactとFirebaseで掲示板作ってみた。