前置き
$ firebase deploy
デプロイ時に直面した2点の問題を、備忘録的に残しておきます✍️
⬇️基本的な流れはこちらをご覧ください👀
Contents
$ firebase deploy のエラー
エラー内容
deployしたいfirebaseプロジェクトでは、まだHostingを使用していない状態です。
Error: HTTP Error: 404, Requested entity was not found.
このコマンドでエラーがどこにあるか分かるらしい💭
$ node --trace-warnings
Welcome to Node.js v14.16.0.
nodeのバージョンが出てきました。
v14.16.0にしてみましたが関係ありませんでした。
バージョンについてはここが参考になります。
Macでnodeのバージョン切り替え -nodebrew の使い方-
解決
ここを参考にしたら解決しました。
1つのプロジェクトで複数のサイトを管理したい場合の話っぽいです。
まだ1つもdeployしてないのに今回なぜそのようなことが起こったのかは不明です💦
Firebase deploy時のエラー Error: HTTP Error: 404, Requested entity was not found.
target-name: 任意の値
resource-name: FireabseプロジェクトのID
$ firebase target:apply hosting <target-name> <resource-name>
あとはfirebase.jsonにtargetを追記✍️
|
1 2 3 4 5 |
{ "hosting": { "target": "<プロジェクトのID>", } } |
1つのプロジェクトで複数のサイトをdeployしたい場合
Hosting画面を開くと下または右の方に「別のサイトを追加」があるので押します。
SITE_IDを作ります。
SITE_IDは…
こちらに書かれているRESOURCE_IDENTIFIERの部分で説明されているSITE_IDです。
Hosting のデプロイ ターゲットを設定する
$ firebase init で Overwrite を yes にしてしまった場合
対処方法
対処法は最初にエディターを開いておいて、overwriteする前のコードに戻す、です。
つまりエディター開かずにやると対処できないっぽいです。
Firebase inittコマンドの際に「File public/index.html already exist. Overwrite? 」をyesにしてしまった時の対処法が知りたいです！
下にoverwriteする前のコードを貼っているので、最悪それをコピペしてください。
ただこれもバージョンによって変わったりすると思うので、万能ではありません。
overwriteするしないの違い
initするとdist内にindex.htmlが作成されます。
これをoverwriteしますか？という質問でyesにしてしまうと、色々書き換えられてしまってうまくindex.vueが表示されなくなります。
VSCならcommand + Pでファイル検索ができます。
dist/index.htmlと入れてみると該当ファイルが表示されます🌟
overwriteしない状態
|
1 2 3 4 5 6 7 8 9 |
<!doctype html> <html lang="en" data-n-head="%7B%22lang%22:%7B%221%22:%22en%22%7D%7D"> <head> <title>nuxt-template</title><meta data-n-head="1" charset="utf-8"><meta data-n-head="1" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="1" data-hid="description" name="description" content=""><link data-n-head="1" rel="icon" type="image/x-icon" href="/favicon.ico"><link rel="preload" href="/_nuxt/6f317dd.js" as="script"><link rel="preload" href="/_nuxt/a5c3188.js" as="script"><link rel="preload" href="/_nuxt/b98a24d.js" as="script"><link rel="preload" href="/_nuxt/cc1d9ea.js" as="script"> </head> <body> <div id="__nuxt"><style>#nuxt-loading{background:#fff;visibility:hidden;opacity:0;position:absolute;left:0;right:0;top:0;bottom:0;display:flex;justify-content:center;align-items:center;flex-direction:column;animation:nuxtLoadingIn 10s ease;-webkit-animation:nuxtLoadingIn 10s ease;animation-fill-mode:forwards;overflow:hidden}@keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}@-webkit-keyframes nuxtLoadingIn{0%{visibility:hidden;opacity:0}20%{visibility:visible;opacity:0}100%{visibility:visible;opacity:1}}#nuxt-loading>div,#nuxt-loading>div:after{border-radius:50%;width:5rem;height:5rem}#nuxt-loading>div{font-size:10px;position:relative;text-indent:-9999em;border:.5rem solid #f5f5f5;border-left:.5rem solid #000;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);-webkit-animation:nuxtLoading 1.1s infinite linear;animation:nuxtLoading 1.1s infinite linear}#nuxt-loading.error>div{border-left:.5rem solid #ff4500;animation-duration:5s}@-webkit-keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes nuxtLoading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}</style><script>window.addEventListener("error",function(){var e=document.getElementById("nuxt-loading");e&&(e.className+=" error")})</script><div id="nuxt-loading" aria-live="polite" role="status"><div>Loading...</div></div></div><script>window.__NUXT__={config:{_app:{basePath:"/",assetsPath:"/_nuxt/",cdnURL:null}}}</script> <script src="/_nuxt/6f317dd.js"></script><script src="/_nuxt/a5c3188.js"></script><script src="/_nuxt/b98a24d.js"></script><script src="/_nuxt/cc1d9ea.js"></script></body> </html> |
overwriteした状態
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Welcome to Firebase Hosting</title> <!-- update the version number as needed --> <script defer src="/__/firebase/8.9.0/firebase-app.js"></script> <!-- include only the Firebase features as you need --> <script defer src="/__/firebase/8.9.0/firebase-auth.js"></script> <script defer src="/__/firebase/8.9.0/firebase-database.js"></script> <script defer src="/__/firebase/8.9.0/firebase-messaging.js"></script> <script defer src="/__/firebase/8.9.0/firebase-storage.js"></script> <!-- initialize the SDK after all desired features are loaded --> <script defer src="/__/firebase/init.js"></script> <style media="screen"> body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; } #message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px; border-radius: 3px; } #message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; } #message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;} #message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; } #message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; } #message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } #load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; } @media (max-width: 600px) { body, #message { margin-top: 0; background: white; box-shadow: none; } body { border-top: 16px solid #ffa100; } } </style> </head> <body> <div id="message"> <h2>Welcome</h2> <h1>Firebase Hosting Setup Complete</h1> <p>You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!</p> <a target="_blank" href="https://firebase.google.com/docs/hosting/">Open Hosting Documentation</a> </div> <p id="load">Firebase SDK Loading…</p> <script> document.addEventListener('DOMContentLoaded', function() { // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥 // // The Firebase SDK is initialized and available here! // // firebase.auth().onAuthStateChanged(user => { }); // firebase.database().ref('/path/to/ref').on('value', snapshot => { }); // firebase.messaging().requestPermission().then(() => { }); // firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { }); // // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥 try { let app = firebase.app(); let features = ['auth', 'database', 'messaging', 'storage'].filter(feature => typeof app[feature] === 'function'); document.getElementById('load').innerHTML = `Firebase SDK loaded with ${features.join(', ')}`; } catch (e) { console.error(e); document.getElementById('load').innerHTML = 'Error loading the Firebase SDK, check the console.'; } }); </script> </body> </html> |
結構書き変わってしまいます😯
まとめ
エラーは完全にバージョンが原因だと思っていました😂
試してみて違ったら、どうにかググって解決するしかないですね🤔💭
今回は2時間かからないくらいで解決しました❗️
やはり経験と慣れが大事と実感しています🍀