Firebase Hostingをさわってみる

Firebase Hosting

https://firebase.google.com/docs/hosting/quickstart?hl=ja
↑ガイドを読めばいいですが、自分用にメモ

プロジェクトを作成

プロジェクトを追加 をクリック
スクリーンショット 2019-05-08 18.33.39.png

プロジェクト名を決めて、
スクリーンショット 2019-05-08 17.57.32.png

作成!!
スクリーンショット 2019-05-08 17.58.11.png

設定

コンソールの 開発Hosting始める
スクリーンショット 2019-05-08 17.58.35.png

GCPでCloud Shellを開いて、設定の指示に従って入力する
スクリーンショット 2019-05-08 18.09.20.png

Cloud Shell上にディレクトリを作って、その中で開始する

mkdir try-try-firebase
cd try-try-firebase
firebase init

スクリーンショット 2019-05-08 18.09.29.png

質問に答えていく

Which Firebase CLI features do you want to set up for this folder?
Hostingを選択

Select a default Firebase project for this directory:
→ publicがdefaultなので、Enter

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

✔ Firebase initialization complete! 完了\(^o^)/

確認

Cloud Shellの右上にあるコードエディタを起動
スクリーンショット 2019-05-08 18.20.12.png

try-try-firebaseディレクトリの中にファイルが作られているのを確認
スクリーンショット 2019-05-08 18.23.45.png

deployする

try-try-firebasepublicindex.htmlの中身を書き換えて、

<!DOCTYPE html>
<html>
    <head>
        <title>Try Firebase Hosting</title>
    </head>
    <body>
        <p>Try Firebase Hosting!</p>
    </body>
</html>

Cloud Shellでdeploy!!

firebase deploy

完了したら、Hosting URLをクリック

✔  Deploy complete!
Project Console: https://console.firebase.google.com/project/try-try-firebase/overview
Hosting URL: https://try-try-firebase.firebaseapp.com

反映されました\(^o^)/
スクリーンショット 2019-05-09 14.24.15.png

おわり

次はFunctionsを使います!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account