ハッピーメモメモ

私的備忘録

【Vue】FireBase Hosting にデプロイする

=全体の流れ========================

1.Firebaseのプロジェクトをつくる

2.プロジェクト内でWebアプリを登録する

3.VScodeのプロジェクト内でFirebase CLI をインストールする(最初の1回だけでいい)

 

・・・

==============================

〇プロジェクトをつくる

 アプリ1個につき、プロジェクトが1つ必要になるよ

 

〇アプリを追加する

・Firebase「プロジェクトの概要」右側の歯車アイコンをクリック→「プロジェクトの設定」→マイアプリ「アプリを追加」→プラットフォームの選択「</>」

 

①アプリの登録

 「このアプリのFirebase Hosting も設定します」にチェックをいれる

 →「アプリを登録」

f:id:n-moeko1966:20211213144354p:plain

②Firebase SDK の追加

 「次へ」

f:id:n-moeko1966:20211213144428p:plain

③Firebase CLI のインストール

 「次へ」

f:id:n-moeko1966:20211213144440p:plain

④Firebase Hosting へのデプロイ

 「コンソールに進む」

f:id:n-moeko1966:20211213153101p:plain


・デフォルトのGCPリソースロケーションを「asia-northeast2」に設定する

f:id:n-moeko1966:20211213144515p:plain

 

〇FIREbase CLI のインストール(ここからはVScodeを使用)

ターミナルからFIREbaseを操作できるツール

「-g」…そのPCの全プロジェクトで使えるようにする(global)

※1回インストールしたら、同じPCでは2回目以降はやらなくていい

npm install -g firebase-tools

 

〇ログインする

firebase login

・うまくいかないときはこの設定をいれてみる

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process

 

? Allow Firebase to collect CLI usage and error reporting information?「FirebaseがCLIの使用状況やエラーレポートの情報を収集できるようにする」

→「Y」を入力してEnter

 

〇Realtime Databaseの設定

・Firebaseを初期化する

firebase init

 

? Are you ready to proceed?「続行する準備はできていますか?」

 proceed…進める

→「Y」を入力してEnter

 

? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices.「このディレクトリに設定したいFirebaseの機能は何ですか?Spaceを押して機能を選択し、Enterを押して選択を確定してください」

→矢印キーで移動して、Spaceで選択、Enterで確定

 今回は「Realtime Database: Configure a security rules file for Realtime

 Database and (optionally) provision default instance」を選択

 

? Please select an option「オプションを選択してください」

→Use an existing project「既存のプロジェクトを利用する」を選択してEnter

→プロジェクトを選択してEnter

 

? What file should be used for Realtime Database Security Rules? 「リアルタイム・データベース・セキュリティ・ルールにはどのようなファイルを使用しますか? 」

→Enter

 

〇Hostingの設定

・Firebaseを初期化する

firebase init

 

? Are you ready to proceed?「続行する準備はできていますか?」

→「Y」を入力してEnter

 

? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices.「このディレクトリに設定したいFirebaseの機能は何ですか?Spaceを押して機能を選択し、Enterを押して選択を確定してください」

→矢印キーで移動して、Spaceで選択、Enterで確定

 今回は「Hosting: Configure files for Firebase Hosting and (optionally)

 set up GitHub Action deploys」を選択

 

? What do you want to use as your public directory? (public)

→? 「(public)」を消し、「dist」を追加してEnter

 What do you want to use as your public directory? dist

 

? Configure as a single-page app (rewrite all urls to /index.html)? 「シングルページアプリとしての構成(すべてのURLを/index.htmlに書き換える)」

 configure…構成、設定

→「y」を入力してEnter

 

? Set up automatic builds and deploys with GitHub?「GitHubによる自動ビルドとデプロイの設定をしますか?」

 deploy…配置・展開する

→「N」を入力してEnter

 

・ビルドする

npm run build

ビルド…アプリを公開に適した状態に編集する(空白・改行・コメントを削除する、重たいデータの最適化をする、Vue.jsをJavaScripに変換する、など)

 

dist>js>app.eda4ccd3.js

ここで作業の内容がみえるよ

 

「npm run serve」は開発用に動かすコマンド!

 

・デプロイする

firebase deploy --only hosting

distにあるビルドしたファイルをFirebase Hostingで公開

 

※ローカルで変更をしたら、毎回ビルドとデプロイをしなければ公開されているものに反映がされないので注意!!