🐷

firebaseにdeployしてみたかった

2022/06/26に公開

はじめに

firebaseにdeployしてみたかったのでしてみたメモ。
SPAとかをやってみたかったけど、変なとこでハマりそうなので、まずはシンプルなhtmlだけにしてみた。

firebaseのプロジェクトを作る

コンソールで適当なPJを作る

deployするものを作る

今回はhtmlがdeployできればいいので、public/index.htmlだけのPJを作る。
作ったらnpm initしておく

$ npm init -y

必要なパッケージのインストール

$ npm install --save firebase
$ npm install -g firebase-tools

firebase login

$ firebase login

firebase init

$ firebase init

いろいろ聞かれる

 Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices.
 ホスティングができればいいのでとりあえずこれ
Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys 
Please select an option:
 Use an existing projectを選ぶ
Select a default Firebase project for this directory:
 さっき作ったやつを選ぶ

後はなんかいい感じに

? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? No
? Set up automatic builds and deploys with GitHub? No
+  Wrote public/404.html
? File public/index.html already exists. Overwrite? No

設定ファイルの取得

コンソールでさっき作ったプロジェクトを表示し、Project Overviewを選択して </>のマークをクリック。アプリ名を付けた後、登録をクリックする。

Javascriptが表示されるので、public/index.htmlにコピーする。

Javascriptを見逃したらプロジェクトの設定からも確認できる。

deploy

$ firebase deploy

・・・

+  Deploy complete!

Project Console: https://console.firebase.google.com/project/deploy-practice-a702e/overview      
Hosting URL: https://deploy-practice-a702e.web.app

Hosting URLをブラウザで開ける!

deployの停止

deployしっぱなしもなんなので満足したら停止する

$ firebase hosting:disable

参考

Firebaseでデプロイしよう!
firebase で deploy する流れ

Discussion