LoginSignup
0
0

More than 3 years have passed since last update.

Firebase Hostingをさわってみる

Last updated at Posted at 2019-05-09

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を使います!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0