未熟学生エンジニアのブログ

TetsuFeの個人開発ブログ

TetsuFeはテツエフイー と読みます。FlutterやWeb周り全般、チーム開発について語るブログ

SPA・サーバレスハンズオン part1 React/Firebase Hostingで初めてのwebサイト公開

シリーズ

part3までやるとできるもの

このようなチャットアプリが作れます。

デモページ: https://huit-tetsufe-0506.firebaseapp.com/ ソースコード: https://github.com/TetsuFe/huit_react_handson_20190506

f:id:swiftfe:20190501071018p:plain

f:id:swiftfe:20190501073412p:plain

事前準備

  • gmailアカウントを一つ作っておくこと

大事なこと(講習会用)

  • ついていけなくなったら周りの人にすぐ相談しよう
    • それで解決しないときには発表者に相談する
    • 参加者同士の交流を促すためで、発表者に質問をしないでほしいというわけではないです

1. 環境構築

参考 サーバーサイドエンジニアも知っておくべきフロントエンドの今

1.1. エディタインストール(VSCode)

ファイルを編集するためのエディタをインストールします。すでになんらかのエディタをインストールしている人は、改めてインストールする必要はありません。

今回はVSCodeを使います。VSCodeMicrosoft社製の軽量なエディタで、stackoverflowのランキングでもSublime TextやAtomなどの類似エディタを抑えて一位にランクインしています。

Stack Overflow Developer Survey 2018

どれくらい便利かは使ってみればわかります。以下からダウンロードしましょう。

https://code.visualstudio.com

やらなくていいです:興味のある人向け

コードのフォーマットなどを気をつけたい場合は以下リンク等を参考にESLint・Pretitterなどを導入すると良いらしいです。

Prettier 入門 ~ESLintとの違いを理解して併用する~ - Qiita

1.2. Vscodeの統合ターミナルを開く(ターミナル・コマンドプロンプト・端末などでも良い)

インストールしたVS Codeを開きましょう。

そして、ctrl + shift + @ または Terminal > New Terminal からターミナルを起動します。

起動したら以下のように出てきます。(緑色の部分がターミナル)

f:id:swiftfe:20190501122122p:plain

1.3. homebrewインストール(mac)

windowslinux系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というパッケージ管理ツールがインストールされます。

要は、reactやその他jsライブラリを使った開発を快適に使うための環境をセットアップしたと思ってください。

1.5. chromeのインストール(開発用ツール)

人によって動作しないということをなくすために、Chromeをインストールしてください。本当はバージョンも合わせるべきですが面倒なのでそこまではやりません。

Google 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 というスクリプトによってデフォルトのアプリケーションコードが生成されたので、今はこんな表示になっています。

f:id:swiftfe:20190429095759p:plain
create-react-appでのhelloworld

まとめ

  • create-react-appというツールを使って、reactアプリケーションを作った。
  • npm start というコマンドを打つとreactアプリケーションサーバーが起動する。
  • ChromeのURLバーにlocalhost:3000と入力するとwebページとして表示できる。

2.2 公開しよう

デフォルトのままですが、いきなり全世界公開してしまいましょう!

いきなり公開までやってしまうのには以下のような理由があります。

  • コードが複雑でない方が、公開が簡単・失敗した時の原因が特定しやすい
  • 先に公開までやっておけばローカル(自分のPC)で完成した時にすぐ公開できて、他の人に見てもらえる

2.2.1 webサイト公開の仕組み

今現在の方法は、自分のPCだけで完結しています。 f:id:swiftfe:20190501121419p:plain

後述するFirebase Hostingのようなサービスを使って外部のサーバーを使ってサイトをweb上に公開する場合、以下のようになります。

f:id:swiftfe:20190501121435p:plain

さらに詳しくするとこんな感じです。

f:id:swiftfe:20190501121437p:plain

以上の図から、webサイトを公開するためには、だいたい以下のような手順が必要になります。

2.2.2 Firebase Hostingを使う

今回は、公開のためにFirebase Hostingというサービスを使います。

firebase.google.com からアカウント登録しましょう。アカウント登録が終わったら、一旦ターミナルに戻ります。

まずは、reactアプリケーションを公開用のコンパクトなhtml・css・jsファイルに変換します。

ターミナルを見ると、以下のように表示されていて、何もキー入力を受け付けない状態かもしれません。これはサーバーが起動しているためです。

f:id:swiftfe:20190429110539p:plain
npm start中の入力を受け付けないターミナル

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のサーバーのセットアップをします。

コンソールに移動します。

f:id:swiftfe:20190429111215p:plain

「プロジェクトを追加」をクリックします

f:id:swiftfe:20190429111551p:plain

こんな感じに入力します。

f:id:swiftfe:20190429112230p:plain

プロジェクト名は自分の好きな名前にすればOKです。

「プロジェクトの作成」を押すと、プロジェクトが作成されます。

f:id:swiftfe:20190429112235p:plain

続いて、Firebase Hostingの初期設定をします。

f:id:swiftfe:20190429112412p:plain

f:id:swiftfe:20190429112601p:plain

このポップアップにしたがってターミナルに以下を実行します

$ npm install -g firebase-tools

終わったら、「次へ」をクリックします

f:id:swiftfe:20190429112822p:plain

f:id:swiftfe:20190429112800p:plain

このポップアップにしたがってターミナルに以下を実行します

$ firebase login

ログインできたら、

$ firebase init

今度は、処理の途中で入力することがあります。

f:id:swiftfe:20190429113216p:plain

Hostingを選択しましょう。(カーソルキーで切り替え、「半角」スペースで選択、エンターで入力を完了)

f:id:swiftfe:20190429113620p:plain

紐づけるプロジェクトを選択しましょう。これはカーソルキーで選択してエンターを押せばOKです。

f:id:swiftfe:20190429113725p:plain

最後に2つ聞かれますが、一つ目の質問には「build」、二つ目の質問には「y」を入力しましょう。(5/8修正:画像にはpublicとありますが、buildと入力してください)

ここでpublicと表示されていたとき、index.htmlが書き変わってしまうことがあるようです。なのでその際はindex.htmlの中に<div id="root"></div>を追記してみてください。

f:id:swiftfe:20190429114111p:plain

これで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 を見てください。ここにアクセスすると、、、

あれ・・?

f:id:swiftfe:20190429114720p:plain

どうやら公開するディレクトリの設定が間違っていたようです。

この設定を変更するには、reactアプリフォルダ内に作られた設定ファイル「firebase.json」を編集すればOKです。

VS Codeでreactアプリのフォルダを開いて、編集できるようにしましょう。

f:id:swiftfe:20190429115103p:plain

Open Folderから、reactアプリのフォルダを選択しましょう。

f:id:swiftfe:20190429115108p:plain

ターミナルを開き直しましょう。(ctrl + shift + @ または Terminal > New Terminal)

f:id:swiftfe:20190429121811p:plain

左の部分を左クリックして、New Fileから、firebase.jsonを作成

f:id:swiftfe:20190429121825p:plain

以下のように書いて保存します。

{
  "hosting": {
    "public": "build"
  }
}

ここにbuildとするのは、先ほど $ npm run build で生成されたコンパクトなhtml・css・jsファイル群のフォルダ名がbuildだからです。

VS Codeのフォルダツリー(左側に出ているやつ)をみれば、buildフォルダがあることがわかると思います。

参考:(初心者向け)Firebase HostingへReactプロジェクトを公開する手順 - Qiita

次に、以下のようにしてこのターミナル上で設定をもう一度行います。(ここの説明は割愛します)

$ firebase use --add

f:id:swiftfe:20190429120139p:plain

f:id:swiftfe:20190429120449p:plain

その後、もう一度公開してみましょう。

$ firebase deploy --only hosting

終わったら、https://<自分の設定した名前>.firebaseapp.com/ にアクセスすると、今度こそ作成したReactページが表示されるはず!

f:id:swiftfe:20190429120539p:plain

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アドレスが複数あるのは、サーバーの数を複数台にしてアクセスの際にどちらにもアクセスできるようにすることで、負荷を分散させるためらしいです。

参考:DNSのラウンドロビン設定を確認する − @IT

やってみよう:IPアドレスを直接ブラウザに打ち込んだらどうなる?

繋がるか繋がらないか自分の頭の中で一度考えてから、やってみてください。

まとめ

  • firebase hostingを使えばサイトをwebに公開できる
  • firebase hostingは主にターミナルでコマンドを実行して設定する
  • firebase hostingは自分のHTMLファイルなどを公開サーバーにおくことができる
  • firebase hostingは勝手にそのサーバのIPアドレスドメイン名をDNSに登録してくれる
    • わかりやすい名前でクライアントから見つけてもらえるように設定してくれる

参考

シリーズ