月別: 2019年11月

Firebase でサイト公開

Firebase プロジェクトの設定ができると
firebase.json
というファイルが作成される

これは
firebase init で作成された設定用ファイルになる

また public フォルダ内に
404.html が作成される

これらを確認したら
次にサイトを公開するので
プロジェクトフォルダに移動し

firebase deploy

を実行するとアップロードされ
Hosting URL が発行される

あとはこのURLをブラウザで表示すればページが表示される

また、変更をして更新をするときには
再度

firebase deploy

を実行すれば更新できる

サイトの更新履歴については
Firebase にログインして
Hosting をクリックすれば更新履歴を確認できる

また、バージョン管理もされているので
ロールバック機能を使うことで過去の状態に戻すことも可能

firebase プロジェクトの設定

公開するフォルダを
firebase 用に初期化する

まず public のあるディレクトリに移動

cd MyPortfolioProject

次に

firebase list

を実行

これで現在 firebase にあるプロジェクト一覧が表示される

必要になるのは
Project ID / Instance の値

今回は
myportfolioproject-5e36a
を使う

次に初期化

firebase  init --project=myportfolioproject-5e36a

実行するとどのサービスを使うかい聞かれるので

◯ Hosting: Configure and deploy Firebase Hosting sites

までカーソルを十字キーで移動して
スペースで決定してから
Enter

いくつか変更があったので
create-react-appで作ったアプリをFirebaseで公開する方法

を参考に実践

ここから少し変わっている

? Please select an option: 
❯ Use an existing project 
  Create a new project 
  Add Firebase to an existing Google Cloud Platform project 
  Don't set up a default project 

とでてくる

今回はすでに作成したプロジェクトを使うので
そのままEnter

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

となり
どのフォルダを公開用にするかと聞かれるので
これも デフォルトの public でよいので
そのまま Enter

次に

Configure as a single-page app (rewrite all urls to /index.html)? (y/N)

と聞かれSPAとして設定するかきかれるけど
今回は No にしたいので
そのままEnter でOK

SPAは Single Page Application の意味

次に

File public/index.html already exists. Overwrite? (y/N) 

となり
public の中にある index.html を上書きするか聞かれる
No なので Enter　でOK

これで
Firebase initialization complete!
と表示されれば初期化はOK

ubuntu 16.04 へ Firebase-tools のインストール

Firebase CLI リファレンス

を参考にインストール

Node.js を使うため
npm を使ったインストールにする

sudo npm install -g firebase-tools

でインストール

しかし

firebase -V

を実行しても

┌────────────────────────────────────────────────────────────┐
│             firebase-tools update check failed             │
│            Try running with sudo or get access             │
│            to the local update config store via            │
│ sudo chown -R $USER:$(id -gn $USER) /home/snowpool/.config │
└────────────────────────────────────────────────────────────┘
/usr/local/lib/node_modules/firebase-tools/node_modules/configstore/index.js:53
				throw err;
				^

Error: EACCES: permission denied, open '/home/snowpool/.config/configstore/firebase-tools.json'
You don't have access to this file.

    at Object.openSync (fs.js:443:3)
    at Object.readFileSync (fs.js:343:35)
    at Configstore.get (/usr/local/lib/node_modules/firebase-tools/node_modules/configstore/index.js:34:26)
    at new Configstore (/usr/local/lib/node_modules/firebase-tools/node_modules/configstore/index.js:27:45)
    at Object.<anonymous> (/usr/local/lib/node_modules/firebase-tools/lib/configstore.js:4:18)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)

となってしまう

このため

sudo chown -R $USER:$(id -gn $USER) /home/snowpool/.config

を実行

これで再度

firebase -V

を実行すると
少し時間がかかるけどバージョンが表示される

これで

firebase login

を実行すると

i  Firebase optionally collects CLI usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.

? Allow Firebase to collect CLI usage and error reporting information? (Y/n) 

となり
利用状況のデータを送信しますかとでるので
Yes ならそのまま Enter でOK

するとブラウザが立ち上がるので
アカウントを選択

次の画面で許可をクリック

これで
Firebase CLI Login Successful
となればOK