FirebaseでHostingを試す

こちらの記事で作成したアプリをFirebaseでホスティングします。

Firebase Hosting を始める

https://firebase.google.com/ にログインし、プロジェクトは作成済みの前提です。

Firebase Hosting のメニューを開き、始めるを押します。

Firebase Tools モジュールを追加します。

yarn add firebase-tools

ローカルでfirebaseにログインします。

npx firebase login

firebaseを初期化します。

npx firebase init

今回選択したオプションは以下です。

・Firebase CLI features　→　Hosting
・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?　→　既存プロジェクトのディレクトリを選択
・Configure as a single-page app (rewrite all urls to /index.html)?　→　No
・File ./index.html already exists. Overwrite?　→　No

この時点で.firebasercやfirebase.jsonなどのファイルが作成されます。

Firebaseでデプロイする

firebase.jsonを以下のように変更します。

{
 "hosting": {
   "public": "dist",
   "ignore": [
     "firebase.json",
     "**/.*",
     "**/node_modules/**"
   ]
 }
}

deployコマンドを使ってデプロイします。

npx firebase deploy

コマンドの出力にURLが表示されるので、アクセスするとプロジェクトが公開されていることが確認できます。