SPA・サーバレスハンズオン part1 React/Firebase Hostingで初めてのwebサイト公開
シリーズ
- part2: SPA・サーバレスハンズオン part2 一般的なwebページとReactアプリの構成を知る - ヨシオ個人開発ブログ
- part3: SPA・サーバレスハンズオン part3 React/Firebase Cloud Firestoreでチャットアプリを作る - ヨシオ個人開発ブログ
part3までやるとできるもの
このようなチャットアプリが作れます。
デモページ: https://huit-tetsufe-0506.firebaseapp.com/ ソースコード: https://github.com/TetsuFe/huit_react_handson_20190506
事前準備
- gmailアカウントを一つ作っておくこと
大事なこと(講習会用)
- ついていけなくなったら周りの人にすぐ相談しよう
- それで解決しないときには発表者に相談する
- 参加者同士の交流を促すためで、発表者に質問をしないでほしいというわけではないです
1. 環境構築
参考 サーバーサイドエンジニアも知っておくべきフロントエンドの今
1.1. エディタインストール(VSCode)
ファイルを編集するためのエディタをインストールします。すでになんらかのエディタをインストールしている人は、改めてインストールする必要はありません。
今回はVSCodeを使います。VSCodeはMicrosoft社製の軽量なエディタで、stackoverflowのランキングでもSublime TextやAtomなどの類似エディタを抑えて一位にランクインしています。
Stack Overflow Developer Survey 2018
どれくらい便利かは使ってみればわかります。以下からダウンロードしましょう。
やらなくていいです:興味のある人向け
コードのフォーマットなどを気をつけたい場合は以下リンク等を参考にESLint・Pretitterなどを導入すると良いらしいです。
Prettier 入門 ~ESLintとの違いを理解して併用する~ - Qiita
1.2. Vscodeの統合ターミナルを開く(ターミナル・コマンドプロンプト・端末などでも良い)
インストールしたVS Codeを開きましょう。
そして、ctrl + shift + @ または Terminal > New Terminal からターミナルを起動します。
起動したら以下のように出てきます。(緑色の部分がターミナル)
1.3. homebrewインストール(mac)
windowsやlinux系OSを使っている人は飛ばしてください。
macOSの人は、homebrewというツールをインストールします。これは、後にnode.jsをインストールするために使います。https://brew.sh/index_ja に書いてあるコマンドをターミナル上にコピー&ペーストして、実行します。以下のような感じです。
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
以下、$ から始まるものはターミナル上で実行してください。
1.4. node.jsのインストール
$ brew install node
windowの人は、このリンクからインストールしてください。 Node.js
node.jsとnpmというパッケージ管理ツールがインストールされます。
- node.js
- javascript実行環境。
- 実行環境とは、簡単に言うとプログラムを解釈し、実行してくれるプログラム。
- この環境で動く便利ツールが多いから使うという印象。
- Node.js - Node.jsはなぜインストールする必要があるの?|teratail
- npm
- node.jsで使えるパッケージを管理するためのツール。今回使うreactなど、便利なツールをインストールしたりアンインストールしたりするために必要。
- npm (パッケージ管理ツール) - Wikipedia
- npmはpipなどに似たパッケージ管理機能だけでなく、スクリプトのエイリアスとしても使えます。その例が以下に出てくる
$ npm start
や$ npm build
です。これらの定義はpackage.jsonに書かれています
要は、reactやその他jsライブラリを使った開発を快適に使うための環境をセットアップしたと思ってください。
1.5. chromeのインストール(開発用ツール)
人によって動作しないということをなくすために、Chromeをインストールしてください。本当はバージョンも合わせるべきですが面倒なのでそこまではやりません。
2. 初めてのReactサイト作成
2.1. とりあえずhello, world
まずはとりあえずサンプルプログラムを動かしてみましょう!
今回は公式インストールガイド Create a New React App – React にしたがって、create-react-appを使います。
ターミナルを開いて、以下を実行します。
$ npm -v 6.7.0 $ node -v v8.11.4 $ npx create-react-app huit_handson_20190506
出力
We suggest that you begin by typing: cd huit_handson_20190506 yarn start Happy hacking!
こんな感じに出たら、以下のようにターミナル上でコマンドを実行します。
$ cd huit_handson_20190506 $ npm start
これでReactアプリケーションが実行できました! $ npm start
というコマンドを打つと、Reactアプリケーションのサーバーが起動します。これにwebブラウザからアクセスすれば、webページとして見ることができます。
Chromeを開いて、localhost:3000 と入力しましょう。(自動的に開く場合はしなくてもよいです)
localhost:3000 はlocalhostが自分のサーバーの名前で、3000はポート番号のことです。後に説明しますが、localhost:3000 とURLバーに入力することで、ブラウザは僕らが実行しているReactアプリケーションを見つけ出すことができます。
うまくいけば、ブラウザ上に以下のような画面が表示されているはずです。$ npx create-react-app huit_handson_20190506
というスクリプトによってデフォルトのアプリケーションコードが生成されたので、今はこんな表示になっています。
まとめ
- create-react-appというツールを使って、reactアプリケーションを作った。
- npm start というコマンドを打つとreactアプリケーションサーバーが起動する。
- ChromeのURLバーにlocalhost:3000と入力するとwebページとして表示できる。
2.2 公開しよう
デフォルトのままですが、いきなり全世界公開してしまいましょう!
いきなり公開までやってしまうのには以下のような理由があります。
- コードが複雑でない方が、公開が簡単・失敗した時の原因が特定しやすい
- 先に公開までやっておけばローカル(自分のPC)で完成した時にすぐ公開できて、他の人に見てもらえる
2.2.1 webサイト公開の仕組み
今現在の方法は、自分のPCだけで完結しています。
後述するFirebase Hostingのようなサービスを使って外部のサーバーを使ってサイトをweb上に公開する場合、以下のようになります。
さらに詳しくするとこんな感じです。
以上の図から、webサイトを公開するためには、だいたい以下のような手順が必要になります。
- 1.サーバーを起動する
- 2.webサイトの要素をサーバーに置く
- 3.ブラウザが見つけ出せるようにする
2.2.2 Firebase Hostingを使う
今回は、公開のためにFirebase Hostingというサービスを使います。
firebase.google.com からアカウント登録しましょう。アカウント登録が終わったら、一旦ターミナルに戻ります。
まずは、reactアプリケーションを公開用のコンパクトなhtml・css・jsファイルに変換します。
ターミナルを見ると、以下のように表示されていて、何もキー入力を受け付けない状態かもしれません。これはサーバーが起動しているためです。
ctrl + c を押して一旦サーバーを停止すると、入力できるようになります。
入力できるようになったら、以下のコマンドを入力します。
$ npm run build
なんか色々出てきますが最後に以下のように出てくればOKです。
The build folder is ready to be deployed. You may serve it with a static server: yarn global add serve serve -s build Find out more about deployment here: https://bit.ly/CRA-deploy
次に、Firebaseのサーバーのセットアップをします。
コンソールに移動します。
「プロジェクトを追加」をクリックします
こんな感じに入力します。
プロジェクト名は自分の好きな名前にすればOKです。
「プロジェクトの作成」を押すと、プロジェクトが作成されます。
続いて、Firebase Hostingの初期設定をします。
このポップアップにしたがってターミナルに以下を実行します
$ npm install -g firebase-tools
終わったら、「次へ」をクリックします
このポップアップにしたがってターミナルに以下を実行します
$ firebase login
ログインできたら、
$ firebase init
今度は、処理の途中で入力することがあります。
Hostingを選択しましょう。(カーソルキーで切り替え、「半角」スペースで選択、エンターで入力を完了)
紐づけるプロジェクトを選択しましょう。これはカーソルキーで選択してエンターを押せばOKです。
最後に2つ聞かれますが、一つ目の質問には「build」、二つ目の質問には「y」を入力しましょう。(5/8修正:画像にはpublicとありますが、buildと入力してください)
ここでpublicと表示されていたとき、index.htmlが書き変わってしまうことがあるようです。なのでその際はindex.htmlの中に<div id="root"></div>
を追記してみてください。
これでfirebase hostingの初期セットアップは完了です!さっそくwebページを公開(デプロイ、deploy)しましょう!
$ firebase deploy --only hosting
以下のように出力が出ます。
=== Deploying to 'huit-tetsufe-0506'... i deploying hosting i hosting[huit-tetsufe-0506]: beginning deploy... i hosting[huit-tetsufe-0506]: found 1 files in public ✔ hosting[huit-tetsufe-0506]: file upload complete i hosting[huit-tetsufe-0506]: finalizing version... ✔ hosting[huit-tetsufe-0506]: version finalized i hosting[huit-tetsufe-0506]: releasing new version... ✔ hosting[huit-tetsufe-0506]: release complete ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/huit-tetsufe-0506/overview Hosting URL: https://huit-tetsufe-0506.firebaseapp.com
最後の Hosting URL: https://huit-tetsufe-0506.firebaseapp.com
を見てください。ここにアクセスすると、、、
あれ・・?
どうやら公開するディレクトリの設定が間違っていたようです。
この設定を変更するには、reactアプリフォルダ内に作られた設定ファイル「firebase.json」を編集すればOKです。
VS Codeでreactアプリのフォルダを開いて、編集できるようにしましょう。
Open Folderから、reactアプリのフォルダを選択しましょう。
ターミナルを開き直しましょう。(ctrl + shift + @ または Terminal > New Terminal)
左の部分を左クリックして、New Fileから、firebase.jsonを作成
以下のように書いて保存します。
{ "hosting": { "public": "build" } }
ここにbuildとするのは、先ほど $ npm run build
で生成されたコンパクトなhtml・css・jsファイル群のフォルダ名がbuildだからです。
VS Codeのフォルダツリー(左側に出ているやつ)をみれば、buildフォルダがあることがわかると思います。
参考:(初心者向け)Firebase HostingへReactプロジェクトを公開する手順 - Qiita
次に、以下のようにしてこのターミナル上で設定をもう一度行います。(ここの説明は割愛します)
$ firebase use --add
その後、もう一度公開してみましょう。
$ firebase deploy --only hosting
終わったら、https://<自分の設定した名前>.firebaseapp.com/ にアクセスすると、今度こそ作成したReactページが表示されるはず!
2019/06/15 追記:これでうまくいかない場合は、firebase initをした時などにindex.htmlがfirebaseによって書き換えられていることが原因かもしれません。$ npm run build
をもう一度行い、index.htmlを最新の状態にしましょう。
Firebase hostingは自動でURLを発行してくれる(自動DNS設定)
Firebase hostingは自動でURLを発行してくれる ことがわかったと思います。
これは、先に説明したDNSの設定を自動で行ってくれていると言い換えられます。
実際にはあるIPアドレスを持ったサーバー上にreactアプリのファイルがあるという状態になっています。
これによって、IPアドレスという覚えにくい名前ではなく、ドメイン名というわかりやすい名前でユーザからアクセスしてもらえることができるようになっています。
また、ターミナルでnslookupコマンドを実行すると、ドメイン名とIPアドレスの対応を調べることができます。
$ nslookup huit-tetsufe-0506.firebaseapp.com
出力
Server: 192.168.0.254 Address: 192.168.0.254#53 Non-authoritative answer: Name: huit-tetsufe-0506.firebaseapp.com Address: 151.101.1.195 Name: huit-tetsufe-0506.firebaseapp.com Address: 151.101.65.195
Addressという項目がIPアドレスです。ちなみに、IPアドレスが複数あるのは、サーバーの数を複数台にしてアクセスの際にどちらにもアクセスできるようにすることで、負荷を分散させるためらしいです。
やってみよう:IPアドレスを直接ブラウザに打ち込んだらどうなる?
繋がるか繋がらないか自分の頭の中で一度考えてから、やってみてください。
まとめ
- firebase hostingを使えばサイトをwebに公開できる
- firebase hostingは主にターミナルでコマンドを実行して設定する
- firebase hostingは自分のHTMLファイルなどを公開サーバーにおくことができる
- firebase hostingは勝手にそのサーバのIPアドレスとドメイン名をDNSに登録してくれる
- わかりやすい名前でクライアントから見つけてもらえるように設定してくれる
参考
- Deploy React.js app on Firebase. QUICK GUIDE: React.js + Firebase 🔥 | by Julien Rioux | Medium
- https://firebase.google.com/docs/hosting/quickstart?hl=ja
- (初心者向け)Firebase HostingへReactプロジェクトを公開する手順 - Qiita