現在作成中のアプリ「行きたいとこリスト」をReact + TypeScriptで書き直すついでに作成手順をメモしておく。
githubリポジトリはこちら
開発環境
ローカルの環境
- mac Big Sur 11.5 intel
- node version 16.6.0
- yarn version 1.22.10
- エディタ : VScode
本番環境
- firebase
その他
- React
- TypeScript
- github Actions
環境構築
firebase consoleにアクセスし、プロジェクトを作成する。(詳細は省略)
Actionsで自動デプロイするため、githubリポジトリを作成しておく。
ターミナルで以下を実行。my-appは作成するディレクトリの名前に変更する。
yarn create react-app my-app --template typescript
FirebaseとReact Routerをインストール
yarn add firebase react-router-dom
firebaseを初期化。github actionsと連携しておく。
firebase init
上を実行するとfirebase.jsonが作成される。以下のようになっていればOK。
{
"hosting": {
"public": "build",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
git を初期化。赤字のリポジトリ名はしようするリポジトリのものに変更。
git init
git remote add origin https://github.com/kanaru-ssk/itl-03.git
firebase Hostingにデプロイしてみる
github にpushすると自動でデプロイされます。ブランチ名masterならmasterに変更
git add .
git commit -m "create react app"
git push origin main
firebaseから提供されたドメインにアクセスしてreactになっていればok
次回はfirebase auth使ってのユーザー認証処理実装する。