📚
React+FireBase初心者の備忘録 < デプロイまで>
概要
りあクト！ Firebaseで始めるサーバーレスReact開発の備忘録です
基本環境を作成
bash
# 様々な **env 系ツールをまとめて管理する
brew install anyenv
# 初期設定
echo 'eval "$(anyenv init -)"' >> ~/.zshrc
# シェルを再起動
exec $SHELL -l
# 今回はnodeのバージョン管理を行うnodenvをインストール
anyenv install nodenv
# インストールできるリストを表示
nodenv install -l
nodenv install 12.7.0
nodenv install 10.16.0
# グローバルの設定・変更
nodenv global 12.7.0
# yarnをグローバルインストール
npm install -g yarn
exec $SHELL -l
Reactプロジェクトの作成
bash
npx create-react-app mangarel-demo --template typescript
cd mangarel-demo
TypeScriptの設定を更新
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"baseUrl": "src",
"incremental": true
},
"include": [
"src"
],
"exclude": [
"node_modules",
"build",
"scripts",
"functions"
]
}
FireBaseプロジェクトの作成
任意のプロジェクト名で作成する
リソースロケーションを東京に変更
bash
# インストール
npm install --global firebase-tools
# ログイン
firebase login
# ローカル・プロジェクト新規作成
firebase init
# ビルド
yarn build
# Hosting のリソースのみデプロイ
firebase deploy --only hosting
デプロイ完了
Discussion