ちょっとした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
ブラウザが開いて、下記が表示されていたら、セットアップ完了。
参考：https://facebook.github.io/create-react-app/docs/adding-typescript
Firebaseの環境構築
React.jsがローカルで動くようになったので、FirebaseでWeb上で公開できる形までもっていきます。
Firebaseアカウントの作成
Firebaseの公式ページ（ https://firebase.google.com/ ）にアクセスし、スタートガイドを押して、Googleアカウントでログイン。
「プロジェクトを追加」から下記のように情報を入力。
※ プロジェクト名、プロジェクトIDはアプリに合わせる
管理画面が出てくるので、「</>」(Webアプリ)を選択。
すると、下記のようにスクリプトが出てくるので、スクリプト部分をメモしておきます。
※ DBの設定するまで使わないっぽい
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アカウントの認証を求められるのでログインします。
下記が表示されたら成功です。
参考：https://firebase.google.com/docs/cli/?hl=ja
Firebaseの環境設定
次に作成レポジトリでFirebase設定をしていきます。
$ firebase 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。
DB周りの設定は、そのうち書きます。