FirebaseにてWeb(https、無料)を公開してみるをやる

9742 ワード
Firebase 無料 HTTPS Web Web テキストリンク

はじめに

やったらものすごく簡単にできて…だった( ･ὢ･ )
$はうつコマンドの前につけてあるだけなので$部分は打たないでください。

Step1

Firebase へようこそへログイン

Step2

自分のプロジェクトの作成
今回地域は『日本』とし、Cloud Firestore のロケーションは『us-east1』としました。

こんな感じの画面が出てきたら完了です。
ちなみに今回作成したプロジェクトの名前は赤枠の『miniminiApp』です。

Step3

FirebaseのサービスHostingを使う
以下のようにHostingの使ってみるをタップ
Hostingについて知りたい方は以下リンク参照(画像のリンク部分)
Firebase Hosting
高速かつ安全なウェブ ホスティング

使ってみるタップ後にこのような画面が出てくるのでその通りに進めていく

macの方はターミナルを開きます。windowsはコマンドプロンプト？を開きます。
では早速うって行きます！

$　npm install -g firebase-tools

一回打ったことあるとエラー出るみたい。しかし次のコマンドログインができるので大丈夫そう？

次に好きなディレクトリ作成して移動します。
その場で作るのなら $　mkdir sample $　cd sampleでも大丈夫です。

ディレクトリに移動したらまずはログイン

$　firebase login

ここでWeb画面開かれる的なことがあったのですがそのまま進めばOKです。(ログイン終わったなと思ったらターミナルまたはプロンプトに戻ってきてください。)

firebaseプロジェクト作成

$　firebase init

ここで少し質問されるので答えて行きましょう。
※ちなみにmacなら選択はスペースでできます。

You're about to initialize a Firebase project in this directory:

 /miniminiApp

? Which Firebase CLI features do you want to setup for this folder? Press Space 
to select features, then Enter to confirm your choices. (Press <space> to select
)
 ◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
❯◉ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules

google翻訳バージョン+私的意訳
@u83unlimited さんに訳を訂正していただきました。

このディレクトリでFirebaseプロジェクトを初期化しようとしています:

  /miniminiApp

? このフォルダでなにやるの？行う設定にチェックしてください。
 ◯ Firebase Realtime Database(旧形式のDB機能)用にルールを展開します
 ◯ FireStore(新形式のDB機能)用にルールを展開し、インデックスを作成します
 ◯ Cloud Functions（プログラム実行機能）用に設定、展開します
❯◉ Firebase Hosting sites（ホスティング機能）用に設定、展開します
 ◯ Cloud Storage（ファイル保管機能）用にセキュリティルールを展開します

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.

? Select a default Firebase project for this directory: (Use arrow keys)
　[don't setup a default project] 
  fir-demo-project (Firebase Demo Project) 
  imayannderuno (imayannderuno) 
  ojisannyouseiwo (ojisannyouseiwo) 
❯ [create a new project]

google翻訳バージョン+私的意訳

あとで色々できるけどとりあえずデフォルトの設定してください。

？ 作るの選んで
  セットアップなんてしない
  デモ
  今病んでるの
  おじさん妖精を
❯ 新しいプロジェクト


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) miniminiAppdirectory

google翻訳バージョン+私的意訳

公開されるディレクトリはこの中身になるでしょう

? ディレクトリ名何する? miniminiAppdirectory

続けてどんどん聞かれます

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

そうすると今ディレクトリの中はこのような感じに。
miniminiAppdirectoryとかにしたけどhtmlとかにする方が無難だったかなとかも思ったり思わなかったり…

Step4

早速公開

$　firebase deploy

エラー発生プロジェクトがアクティブではない！！--project でやるか作るかしろと言うことなので、要はプロジェクト指定していないのでそれが、わからないとのこと。

No project active. Run with --project <projectId> or define an alias by
running firebase use --add

先ほど作ったプロジェクトのidを使い行う。以下画像の左上がそのidなのでそれをくっつけてあげるのみ！

$　firebase deploy --project miniminiapp-4a450

できた！！すごいこれだけでhttpsのサイトで公開できた( ･ὢ･ )

setp5

中身を変更してみる
先ほどのディレクトリの中身を変えて上のコマンドで再度デプロイ！！できた！
ちなみに中に入れているのはOnsen UIでのデモアプリです。

ちなみにこのOnsen UIとはなんぞやという方に朗報です！！
Onsen UIを使ってminiminiAppを作るまでの記事を以下であげたのでみていただければ嬉しいです！
Onsen UI、Vue.jsでアプリを作る初めの一歩(開発→本番)

setp6

プロジェクトの削除
以下画像歯車のところ押して一番下にいくと削除ができるのでそれで削除します。

最後に

一旦公開してみたいならかなりこれとてもいいきがしました。
逆に、Basic認証など特定の認証つけるとかならまだ調査が必要だと思いました！！(✿´ ꒳ ` )

参考

ありがとうございます！
https://qiita.com/potato4d/items/95eaf2e41404711e621e