【Firebase】FirebaseにDeployする方法【Vue】
前書き
Vueで製作したPhoto Fallioが完成したので、
Firebaseを使ってデプロイしてみます。
手順
Vueプロジェクトのビルド
まずVueファイルをビルドする必要があります。
通常package.jsonにて変更を加えていない場合は以下のコマンドでも可能です。
自分はpackage.jsonにBuild用のコマンド設定したので、"npm run dev-build"でした。
/projects/myapp # npm run build
こうなるとdistフォルダが生成され、ここが公開用のBaseURLとなります。
Firebaseの設定
Firebase-toolsのインストールとloginを行います。
-
- no-localhostをつけないと、認証がうまくいかないケースがあります。
/projects/myapp # npm install -g firebase-tools /projects/myapp # firebase login --no-localhost
Loginが完了したらFirebaseの設定です。
今回使用したのは、FirestoreとStorageですので、これにHostingを追加して、設定を行います。
/projects/myapp # firebase init
######## #### ######## ######## ######## ### ###### ########
## ## ## ## ## ## ## ## ## ## ##
###### ## ######## ###### ######## ######### ###### ######
## ## ## ## ## ## ## ## ## ## ##
## #### ## ## ######## ######## ## ## ###### ########
You're about to initialize a Firebase project in this directory:
/projects/myapp
Before we get started, keep in mind:
* You are currently outside your home directory
* You are initializing in an existing Firebase project directory
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features,
then Enter to confirm your choices. Firestore: Deploy rules and create indexes for Firestore, Hosting
: Configure and deploy Firebase Hosting sites, Storage: Deploy Cloud Storage security rules
=== Project Setup
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.
i .firebaserc already has a default project, using wired-photofallio.
FireStoreの設定
ここまでは順調にいけましたでしょうか。
Firestoreの設定ファイルを作成します。
Firestore.rulesではFirestoreにアクセスする際の権限を記述してくれています。
もしDeployしてから、403エラーを吐く場合は、Firestore.rulesを設定し直して、
もう一度Build+Deployをしましょう。
二度目以降のDeployの際は、Overwriteする必要がありませんので注意してください。
=== Firestore Setup Firestore Security Rules allow you to define how and when to allow requests. You can keep these rules in your project directory and publish them with firebase deploy. ? What file should be used for Firestore Rules? firestore.rules ? File firestore.rules already exists. Do you want to overwrite it with the Firestore Rules from the Firebase Console? Yes Firestore indexes allow you to perform complex queries while maintaining performance that scales with the size of the result set. You can keep index definitions in your project directory and publish them with firebase deploy. ? What file should be used for Firestore indexes? firestore.indexes.json ? File firestore.indexes.json already exists. Do you want to overwrite it with the Firestore Indexes from the Firebase Console? Yes
Hostingの設定
npm run buildでdistファイルを作成した際、
"? What do you want to use as your public directory?"にはdistと答えます。
ここでpublicを指定したままだと真っ白な画面が表示されてしまいますので、ご注意ください。
index.htmlはすでに存在する場合overwriteはしません。
=== 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? dist ? Configure as a single-page app (rewrite all urls to /index.html)? No ? Set up automatic builds and deploys with GitHub? No ? File dist/404.html already exists. Overwrite? No i Skipping write of dist/404.html ? File dist/index.html already exists. Overwrite? No i Skipping write of dist/index.html
Storageの設定
Firestoreの時と同様です。
"What file should be used for Storage Rules? "でStorage.rulesと答えても、
なぜかoverwriteするか否かの選択肢が無く、そのまま書き換えられてしまいます。
デプロイ後にFirebaseのコンソールの方で権限修正しました。（それで正しいかはわからない）
=== Storage Setup Firebase Storage Security Rules allow you to define how and when to allow uploads and downloads. You can keep these rules in your project directory and publish them with firebase deploy. ? What file should be used for Storage Rules? storage.rules i Writing configuration info to firebase.json... i Writing project information to .firebaserc... ✔ Firebase initialization complete!
Deploy
Deploy後にURLが表示されます。
表示されない場合はHostingを指定する事を忘れています。
/projects/myapp # firebase deploy === Deploying to 'wired-photofallio'... i deploying storage, firestore, hosting i firebase.storage: checking storage.rules for compilation errors... ✔ firebase.storage: rules file storage.rules compiled successfully i firestore: reading indexes from firestore.indexes.json... i cloud.firestore: checking firestore.rules for compilation errors... ✔ cloud.firestore: rules file firestore.rules compiled successfully i storage: latest version of storage.rules already up to date, skipping upload... ✔ firestore: deployed indexes in firestore.indexes.json successfully i firestore: latest version of firestore.rules already up to date, skipping upload... i hosting[wired-photofallio]: beginning deploy... i hosting[wired-photofallio]: found 13 files in dist ✔ hosting[wired-photofallio]: file upload complete ✔ storage: released rules storage.rules to firebase.storage ✔ firestore: released rules firestore.rules to cloud.firestore i hosting[wired-photofallio]: finalizing version... ✔ hosting[wired-photofallio]: version finalized i hosting[wired-photofallio]: releasing new version... ✔ hosting[wired-photofallio]: release complete ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/wired-photofallio/overview Hosting URL: https://wired-photofallio.web.app
最後に
これで完了です！
再度Deployする際はBuildも忘れずに。
