firebaseにログインされているか確認
firebase login
MacBook-Pro:netflix-clone **********$ firebase login
firebase login
Already logged in as **********
MacBook-Pro:netflix-clone **********$
**********は個人情報なのでシーリングしています。
Firebase toolsをまだインストールしていなかったら
Sudo npm i -g firebase-tools
Firebase projectを作成する
firebase init
MacBook-Pro:netflix-clone **********$ firebase init
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
You\'re about to initialize a Firebase project in this directory:
/Users/**********/development/learning/**********/netflix-clone
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your ch
oices. (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ 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
◯ Emulators: Set up local emulators for Firebase features
4つ目をEnterで選択
❯◉ Hosting: Configure and deploy Firebase Hosting sites
First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.
? Please select an option: (Use arrow keys)
❯ Use an existing project
Create a new project
Add Firebase to an existing Google Cloud Platform project
Don't set up a default project
? Select a default Firebase project for this directory: (Use arrow keys)
❯ faceboook-messenger-clone (faceboook-messenger-clone)
flash-chat-8a171 (Flash Chat)
instagram-clone-react-fdf69 (instagram-clone-react)
netflix-clone-with-react (netflix-clone-with-react)
i Using project netflix-clone-with-react (netflix-clone-with-react)
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.
ここが大切です。
? What do you want to use as your public directory? (public)
と聞かれたら、
build
といれてEnter
Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
は、
y
と入れて、Enter
Wrote build/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
✔ Firebase initialization complete!
╭───────────────────────────────────────────╮
│ │
│ Update available 8.7.0 → 8.8.1 │
│ Run npm i -g firebase-tools to update │
│ │
╰───────────────────────────────────────────╯
でProjectは完成しました。
Deploymentの準備
ここまできたら、terminalで
npm run build
を入力することで、Production のためのReact Bundleが作成されます。
MacBook-Pro:netflix-clone **********$ npm run build
成功すれば、build フォルダーが自動作成されます。
また、
以下のようにterminalに表示されます。
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
55.22 KB build/static/js/2.24b893fb.chunk.js
1.94 KB build/static/js/main.7545280a.chunk.js
837 B build/static/css/main.15079869.chunk.css
781 B build/static/js/runtime-main.b8a87127.js
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
You may serve it with a static server:
npm install -g serve
serve -s build
Find out more about deployment here:
bit.ly/CRA-deploy
プロジェクトを Deploy
最後に、
firebase deploy
と入力すれば、完成です。
MacBook-Pro:netflix-clone **********$ firebase deploy
=== Deploying to 'netflix-clone-with-react'...
i deploying hosting
i hosting[netflix-clone-with-react]: beginning deploy...
i hosting[netflix-clone-with-react]: found 18 files in build
✔ hosting[netflix-clone-with-react]: file upload complete
i hosting[netflix-clone-with-react]: finalizing version...
✔ hosting[netflix-clone-with-react]: version finalized
i hosting[netflix-clone-with-react]: releasing new version...
✔ hosting[netflix-clone-with-react]: release complete
✔ Deploy complete!
Project Console: https://console.firebase.google.com/project/netflix-clone-with-react/overview
Hosting URL: https://netflix-clone-with-react.web.app
MacBook-Pro:netflix-clone **********$
Deployされたアプリはこちら
https://netflix-clone-with-react.web.app
以上です^^