このエントリーをはてなブックマークに追加

Node JavaScript Firebase React

ちょっとしたWebアプリケーションを作成するときに開発をすぐに始められるように設定のメモです。

目次

- React.jsの環境構築  
  - anyenvのインストール
  - nodenvのインストール
  - Node.jsのインストール
  - Yarnのインストール
  - TypeScriptのインストール
  - React.jsでHello, World!
- Firebaseの環境構築
  - Firebaseアカウントの作成
  - Firebase CLIのインストール
  - Firebaseの環境設定

React.jsの環境構築

Node.js、TypeSciriptの環境構築後、React.jsのアプリの雛形を作成します。

anyenvのインストール

**env系のバージョン管理システムを簡単にインストール・管理できる

$ brew tap anyenv/anyenv
$ brew install anyenv
$ echo 'eval "$(anyenv init -)"' >> ~/.your_profile
$ exec $SHELL -l

※ .your_profileは使っているシェルによって書き換えてください。bashならbash_profile、zshならzshrc。
参考:https://github.com/anyenv/anyenv

nodenvのインストール

Node.jsのバージョン管理ツール

$ anyenv install nodenv
$ exec $SHELL -l
$ nodenv -v
nodenv 1.2.0-29-g13bd836

参考:https://github.com/nodenv/nodenv

Node.jsのインストール

nodenvからインストールしたいNodeのバージョンを指定して、インストールします。
インストールできるNodeのバージョンはnodenv install -lで確認できます。

$ nodenv install 10.10.0
$ node -v
v10.10.0

Yarnのインストール

Facebook製のNodeモジュールパッケージの管理ツール

$ brew install yarn --without-node
$ yarn -v
1.5.1

参考:https://yarnpkg.com/ja/docs/install#mac-stable

TypeScriptのインストール

npmを使って、TypeScriptをインストールする。

$ npm install -g typescript
$ tsc -v
Version 3.2.2

参考:https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

React.jsでHello, World!

Reactのセットアップ with TypeScript。
※ my-appをプロジェクト名に変えること。

$ yarn create react-app my-app --typescript

Reactがインストールされたら

$ cd my-app
$ yarn start

ブラウザが開いて、下記が表示されていたら、セットアップ完了。
 
React setup

参考:https://facebook.github.io/create-react-app/docs/adding-typescript

Firebaseの環境構築

React.jsがローカルで動くようになったので、FirebaseでWeb上で公開できる形までもっていきます。

Firebaseアカウントの作成

Firebaseの公式ページ( https://firebase.google.com/ )にアクセスし、スタートガイドを押して、Googleアカウントでログイン。
 
Firebase startguide
 
「プロジェクトを追加」から下記のように情報を入力。
※ プロジェクト名、プロジェクトIDはアプリに合わせる

Firebase project name
 
管理画面が出てくるので、「</>」(Webアプリ)を選択。
 
Firebase web app
 
 
すると、下記のようにスクリプトが出てくるので、スクリプト部分をメモしておきます。
※ DBの設定するまで使わないっぽい
 
Firebase web app

 
 

Firebase CLIのインストール

yarnを使ってインストールしていきます。
npmを使っている人は公式のコマンドを叩いてください。
yarnとnpmのコマンド比較表はこちら:https://yarnpkg.com/ja/docs/migrating-from-npm

$ yarn global add firebase-tools 

Firebaseにログインしていきます。

$ firebase login
? Allow Firebase to collect anonymous CLI usage and error reporting information? (Y/n) Y

ブラウザが開いて、Googleアカウントの認証を求められるのでログインします。
下記が表示されたら成功です。

Firebase web app login
 
参考:https://firebase.google.com/docs/cli/?hl=ja

Firebaseの環境設定

次に作成レポジトリでFirebase設定をしていきます。

$ firebase init

下記が表示されていたら成功。
 
Firebase web app init
 
下記のようにこのフォルダで何を設定できるようにするのかを求められるので、一旦、DBとホスティングを設定できるようにしておく。

? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices.
 ◉ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
❯◉ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules

 
次にディレクトリとFirebaseのプロジェクトを紐付ける。
※ 実際は???に名前が入っていて、それを選んでいます

? Select a default Firebase project for this directory: (Use arrow keys)
  [don't setup a default project]
❯ ???????
  [create a new project]

DBのルールを決めるファイルについて聞かれるので、そのままエンターを押します。

? What file should be used for Database Rules? (database.rules.json)

 
公開されるソースがあるファイルを聞かれているので、buildを設定。
※ Reactはyarn buildでbuildディレクトリ下にプロダクト公開用の最適化されたファイルをはきだすため

? What do you want to use as your public directory? (public) build

 
シングルページアプリケーションか聞かれているので、一旦Noにしておきます。

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)

 
index.htmlを上書きはしないのでNoで。

File public/index.html already exists. Overwrite? (y/N)

 
これで一旦、静的ページならアップロードできる状態に。
ビルド&デプロイ!

$ yarn build
$ firebase deploy

下記が表示されていればdone。
 
Firebase web app deploy

DB周りの設定は、そのうち書きます。

 

このエントリーをはてなブックマークに追加

© 2018, Udayan28