--- lang: ja-jp breaks: true --- # Firebase Hosting に静的コンテンツをデプロイする Ubuntu 2021-05-12 > Firebase Hosting > https://firebase.google.com/docs/hosting?hl=ja ## Firebase CLI のインストール ```shell= $ sudo npm install -g firebase-tools ``` > Firebase CLI リファレンス > https://firebase.google.com/docs/cli/?authuser=6 ## Google へのログイン ```shell= $ 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? Yes i To change your data collection preference at any time, run `firebase logout` and log in again. Visit this URL on this device to log in: https://accounts.google.com/o/oauth2/auth?client_id=xxxxxxxxxxxxxxxxxxxxx Waiting for authentication... ✔ Success! Logged in as xxxxxxxxxxx@gmail.com ``` ## プロジェクトの初期化 ```shell= $ firebase init ######## #### ######## ######## ######## ### ###### ######## ## ## ## ## ## ## ## ## ## ## ## ###### ## ######## ###### ######## ######### ###### ###### ## ## ## ## ## ## ## ## ## ## ## ## #### ## ## ######## ######## ## ## ###### ######## You're about to initialize a Firebase project in this directory: /home/xxxx/work/firebase/first_project ? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. Hosting: Configure and deploy Firebase Hosting sites === 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. ? Please select an option: Use an existing project ? Select a default Firebase project for this directory: xxxx-19a62 (xxxx) i Using project xxxx-19a62 (xxxx) === 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? public ? Configure as a single-page app (rewrite all urls to /index.html)? Yes ? Set up automatic builds and deploys with GitHub? No ✔ Wrote public/index.html i Writing configuration info to firebase.json... i Writing project information to .firebaserc... i Writing gitignore file to .gitignore... ✔ Firebase initialization complete! $ ``` ```shell= $ ls -a1 . .. .firebaserc .gitignore firebase.json public ``` ### public/index.html（※自動生成されたそのまま） ```htmlmixed= <!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.6.0/firebase-app.js"></script> <!-- include only the Firebase features as you need --> <script defer src="/__/firebase/8.6.0/firebase-auth.js"></script> <script defer src="/__/firebase/8.6.0/firebase-database.js"></script> <script defer src="/__/firebase/8.6.0/firebase-firestore.js"></script> <script defer src="/__/firebase/8.6.0/firebase-functions.js"></script> <script defer src="/__/firebase/8.6.0/firebase-messaging.js"></script> <script defer src="/__/firebase/8.6.0/firebase-storage.js"></script> <script defer src="/__/firebase/8.6.0/firebase-analytics.js"></script> <script defer src="/__/firebase/8.6.0/firebase-remote-config.js"></script> <script defer src="/__/firebase/8.6.0/firebase-performance.js"></script> <!-- initialize the SDK after all desired features are loaded, set useEmulator to false to avoid connecting the SDK to running emulators. --> <script defer src="/__/firebase/init.js?useEmulator=true"></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&hellip;</p> <script> document.addEventListener('DOMContentLoaded', function() { const loadEl = document.querySelector('#load'); // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥 // // The Firebase SDK is initialized and available here! // // firebase.auth().onAuthStateChanged(user => { }); // firebase.database().ref('/path/to/ref').on('value', snapshot => { }); // firebase.firestore().doc('/foo/bar').get().then(() => { }); // firebase.functions().httpsCallable('yourFunction')().then(() => { }); // firebase.messaging().requestPermission().then(() => { }); // firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { }); // firebase.analytics(); // call to activate // firebase.analytics().logEvent('tutorial_completed'); // firebase.performance(); // call to activate // // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥 try { let app = firebase.app(); let features = [ 'auth', 'database', 'firestore', 'functions', 'messaging', 'storage', 'analytics', 'remoteConfig', 'performance', ].filter(feature => typeof app[feature] === 'function'); loadEl.textContent = `Firebase SDK loaded with ${features.join(', ')}`; } catch (e) { console.error(e); loadEl.textContent = 'Error loading the Firebase SDK, check the console.'; } }); </script> </body> </html> ``` ## SDK の設定と構成 :::info これらのスクリプトをコピーして <body> タグの下部に貼り付けます。この作業は Firebase サービスを使用する前に行ってください。 ::: ### 自動 ```htmlmixed= <!-- The core Firebase JS SDK is always required and must be listed first --> <script src="/__/firebase/8.6.0/firebase-app.js"></script> <!-- TODO: Add SDKs for Firebase products that you want to use https://firebase.google.com/docs/web/setup#available-libraries --> <script src="/__/firebase/8.6.0/firebase-analytics.js"></script> <!-- Initialize Firebase --> <script src="/__/firebase/init.js"></script> ``` ### CDN ```htmlmixed= <!-- The core Firebase JS SDK is always required and must be listed first --> <script src="https://www.gstatic.com/firebasejs/8.6.0/firebase-app.js"></script> <!-- TODO: Add SDKs for Firebase products that you want to use https://firebase.google.com/docs/web/setup#available-libraries --> <script src="https://www.gstatic.com/firebasejs/8.6.0/firebase-analytics.js"></script> <script> // Your web app's Firebase configuration // For Firebase JS SDK v7.20.0 and later, measurementId is optional var firebaseConfig = { apiKey: "AIzaSyCurpHe-ggDYaKcMf-ybb2VeOCAgpfBSvQ", authDomain: "rhsr-19a62.firebaseapp.com", projectId: "rhsr-19a62", storageBucket: "rhsr-19a62.appspot.com", messagingSenderId: "570869176430", appId: "1:570869176430:web:f3ec3d89ec448350206e7f", measurementId: "G-F7SRFC0QJC" }; // Initialize Firebase firebase.initializeApp(firebaseConfig); firebase.analytics(); </script> ``` ### 構成 ```javascript= // For Firebase JS SDK v7.20.0 and later, measurementId is optional const firebaseConfig = { apiKey: "AIzaSyCurpHe-ggDYaKcMf-ybb2VeOCAgpfBSvQ", authDomain: "rhsr-19a62.firebaseapp.com", projectId: "rhsr-19a62", storageBucket: "rhsr-19a62.appspot.com", messagingSenderId: "570869176430", appId: "1:570869176430:web:f3ec3d89ec448350206e7f", measurementId: "G-F7SRFC0QJC" }; ``` ## Firebase Hosting へのデプロイ ```shell= $ firebase deploy === Deploying to 'xxxx-19a62'... i deploying hosting i hosting[xxxx-19a62]: beginning deploy... i hosting[xxxx-19a62]: found 1 files in public ✔ hosting[xxxx-19a62]: file upload complete i hosting[xxxx-19a62]: finalizing version... ✔ hosting[xxxx-19a62]: version finalized i hosting[xxxx-19a62]: releasing new version... ✔ hosting[xxxx-19a62]: release complete ✔ Deploy complete! Project Console: https://console.firebase.google.com/project/xxxx-19a62/overview Hosting URL: https://xxxx-19a62.web.app ``` ## 確認 以下にアクセス https://xxxx-19a62.web.app/ ![](https://i.imgur.com/QG9gm8M.png) ###### tags: `Firebase Hosting` `Ubuntu`