39
44

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-02-02

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

#Step1
:unicorn: Firebase へようこそへログイン

#Step2
:unicorn: 自分のプロジェクトの作成
今回地域は『日本』とし、Cloud Firestore のロケーションは『us-east1』としました。
スクリーンショット 2019-02-02 15.40.40.png

こんな感じの画面が出てきたら完了です。
ちなみに今回作成したプロジェクトの名前は赤枠の『miniminiApp』です。
スクリーンショット 2019-02-02 15.45.46.png

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

使ってみるタップ後にこのような画面が出てくるのでその通りに進めていく
スクリーンショット 2019-02-02 15.59.07.png

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とかにする方が無難だったかなとかも思ったり思わなかったり…
スクリーンショット 2019-02-02 16.41.43.png

#Step4
:unicorn: 早速公開

$ firebase deploy

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

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

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

スクリーンショット 2019-02-02 16.57.37.png
$ firebase deploy --project miniminiapp-4a450

できた!!すごいこれだけでhttpsのサイトで公開できた( ・ὢ・ )
スクリーンショット 2019-02-02 16.58.54.png

#setp5
:unicorn: 中身を変更してみる
先ほどのディレクトリの中身を変えて上のコマンドで再度デプロイ!!できた!
ちなみに中に入れているのはOnsen UIでのデモアプリです。
スクリーンショット 2019-02-02 17.03.33.png

スクリーンショット 2019-02-02 17.04.17.png

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

#setp6
:unicorn: プロジェクトの削除
以下画像歯車のところ押して一番下にいくと削除ができるのでそれで削除します。
スクリーンショット 2019-02-02 17.10.01.png
スクリーンショット 2019-02-02 17.10.14.png

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

#参考
ありがとうございます!:bow_tone2:
https://qiita.com/potato4d/items/95eaf2e41404711e621e

39
44
1

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
39
44

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?