Reactで作ったSPAのポートフォリオをFirebase Hostingでデプロイしたので、その方法をメモ
firebaseのプロジェクトを作成する
まず、Firebaseのwebサイトからプロジェクトを作成します。
1. ログイン
以下のようにログインが求められるので、Googleアカウントでログインします。
2. プロジェクト作成
ログイン後にプロジェクト一覧のページが表示されるので、「プロジェクトを追加」ボタンから新規プロジェクトを作成します。
- プロジェクト名 - 自分の好きな名前で大丈夫です。
- プロジェクトID - 他のプロジェクトと被ってはいけないので、入力したIDが既に存在している場合はプロジェクト名から自動的にサジェストされます
firebaseCLIのインストールと設定
1.コマンドライン上でfirebaseCLIのインストールを行います。
$ npm install -g firebase-tools
2.インストールできたら、CLIでfirebaseへログインします。
$ firebase login
このコマンドを実行すると、ブラウザが立ち上がってfirebaseのログイン画面が表示されるのでログインします。
Reactアプリを作成する
1.Node.jsのインストール
Reactを使うためにはNode.jsがインストールされている必要があります。
- Windowsの方はこちらの記事が参考になるかと思います。
- MacでHomebrewが入っている場合は以下のようにインストールできます。
$ brew install nodejs
# nodeのバージョン確認
$ node -v
# npmのバージョン確認
$ npm -v
npmとはNode.jsのパッケージ管理ツールであり、Node.jsをインストールすると自動的にnpmもインスロールされます。
先ほどのコマンドでNode.jsとnpmのバージョンが表示されれば、正常にインストールできています。
2.パーケージのインストール
npmを用いてcreate-react-appというパッケージをインストールします。
$ npm install -g create-react-app
ここまでできたらReactアプリの作成準備完了です。
3.Reactアプリの作成
以下のコマンドでReactアプリを作成します。
ここでのアプリ名は必ずしもfirebaseで作成したプロジェクト名と一致している必要はありません。
$ npm create-react-app アプリ名
ターミナルにHappy Hacking!と表示されていればアプリが作成できています。
cd アプリ名 で作成したアプリのディレクトリへ移動し、以下のようにstartコマンドを実行します。
$ npm start
以下のようなReactのロゴが表示されているページが表示されれば正常にローカルサーバーが起動できています。
これでReactアプリの作成は完了しました。
FirebaseHostingへデプロイする
1.作成したReactアプリをビルドする
ターミナルで以下のコマンドを実行します。
$ npm run build
アプリのディレクトリ内にbuildというフォルダが追加されていればOKです。
2.firebaseの初期設定
ターミナルで以下のコマンドを実行します。
$ firebase init
ターミナル上で色々質問されるので、以下のように答えます。
・Which Firebase CLI features do you want to setup for this folder:
Hosting: Configure and deploy Firebase Hosting sites をスペースで選択してenter
・Please select an option:
Use an existing project を選択
・Select a default Firebase project for this directory:
本記事冒頭部分で作成したfirebaseプロジェクトのIDを選択
・What do you want to use as your public directory?:
`build`と入力する
・Configure as a single-page app (rewrite all urls to /index.html)?:
作成したアプリはSPAなので`y`を入力
・Set up automatic builds and deploys with GitHub?:
yesにするとgithub上でマージした時などに自動的にデプロイしてくれるようです。どちらを選んでもOKです。
・File build/index.html already exists. Overwrite?:
yesを選択すると勝手に新しくindex.htmlを作って上書きしてくれます。`n`を入力
以上で設定は終わりです。あとはデプロイするだけです。
3.firebaseにデプロイ
デプロイするために必要なのはコマンド1つだけです。
$ firebase deploy
実行後、ターミナルに表示されるHosting URLをブラウザで開くとデプロイされたReactアプリが確認できます。
(projectIDの部分が、作成したプロジェクトのIDになっていると思います。)
=== Deploying to 'projectID'...
...(省略)...
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/projectID/overview
Hosting URL: https://projectID.web.app