レンタルサーバー・VPS・バックエンド

firebaseで開発環境と本番環境を分ける/カスタムドメインの料金/DNS設定

レンタルサーバー・VPS・バックエンド

firebase複数プロジェクト運用の覚書です。

体験談:個人開発におすすめで安いVPSサーバー!コスパよしXserver VPS!

firebaseでnuxtの開発環境と本番環境を分ける(複数プロジェクト運用)

deploy時に開発環境と本番環境を分ける必要性を感じる人もいるでしょう。

いくつかのルートがありますが、firebaseの左上(サイドバーではない)の方にプロジェクト名が表示されています。

クリック > プロジェクトを追加

以下手順です。

プロジェクト名 xxx-prod(任意の名前でOKですが、本番環境のためproductionの略語。もしくはリリースとかかな)

プロジェクトIDも鉛筆マークから編集できます。任意のIDがデフォルトですが、-を使うと-以降の文字列になってくれます。

続行

Google アナリティクス（Firebase プロジェクト向け） このプロジェクトで Google アナリティクスを有効にする 推奨

続行

Google アナリティクスの構成
アナリティクスはdevと一緒でいいため使いまわします。わけてもOKです。WordPressなどのWebサイトを運営している場合、googleのアカウントがwebと共通だとwebのものもでてきます。

ここまででfirebaseの作業は一旦終了。DBの作成などはもちろん必要ですが、一旦割愛してVS Codeのターミナルに戻ります。

現在のプロジェクトを確認

firebase projects:list

firebasercに追加。

firebase use --add
? Which project do you want to add? (Use arrow keys)
? Which project do you want to add? xxx-prod
? What alias do you want to use for this project? (e.g. staging) production

firebasercを確認すると、追記されてます。

{
  "projects": {
    "default": "xxx-dev",
    "production": "xxx-prod"
  }
}

なお、後から気づいたのですがfirebase use –addは使わず直接編集で問題ないようです。プロジェクトIDさえあっていればdefaultからdevに切り替えても大丈夫です。releaseに変えてもいいですが、プロジェクトIDも変えたい場合、新規作成しなおさなければなりません。個人的にはreleaseが好きなのでreleaseにしました。

{
  "projects": {
    "dev": "xxx-dev(プロジェクトID)",
    "staging": "xxx-staging(プロジェクトID)"
    "release": "xxx-release(プロジェクトID)"
  }
}

プロジェクトは追加されたものに、切り替わります。

追加されたプロジェクトを確認

firebase projects:list

開発環境に戻す場合は以下です。

firebase use xxx-dev(プロジェクトID)

そのあとは通常のデプロイの流れです。

firebaseでnuxtのdeploy(error対策/反映されない)
ebookbrain.net

firebaseでプロジェクト名やプロジェクトIDを変更

プロジェクト名の変更は次のとおりです。

プロジェクト概要の[歯車アイコン] > プロジェクトを設定 > プロジェクト名の[鉛筆アイコン]

なお、プロジェクトIDは変更できません。

ターミナルからは次のコマンドで変更を確認できます。

firebase projects:list

firebaseでプロジェクトを削除

プロジェクト概要の[歯車アイコン] > プロジェクトを削除(下の方にスクロール) > プロジェクトの削除

firebaseでプロジェクトの上限数

3つ目のプロジェクトを作成する際に下記の警告がでていて上限数があることを知りました。

あと 3 個のプロジェクトでプロジェクト数の上限に達します。既存のプロジェクトに Firebase を追加するか、上限の引き上げをリクエストすることを検討してください。

上限数は5つのようです。。増やすようリクエストできます。

Firebaseのプロジェクト数が上限に達しそうなので上限緩和申請して10分掛からずに緩和してくれた(早っ

「We have approved your request for additional quota for non-paid Cloud Services.」

— hironomiu (@hironomiu) March 9, 2021

プロジェクトごとにBlazeプランの登録

プロジェクトごとにfirestoreやBlazeプランの登録が必要です。

2回目は少しわかりにくいのですが、サイドバーの左下に[ アップグレード ]のボタンがあります。

アップグレード > プランを選択 > 予算の入力 > 購入

予算は上限はきれないためメール通知です。開発中は100円あたりにしておきます。

Database、Storage、Hosting、機械学習、Test Lab、Functions、Google Cloud サービスの使用量に基づいて請求が行われます

firebaseの管理画面

同じことがGCPからできます。

Google Cloud Console > お支払い > 予算とアラート

スポンサーリンク

firebaseでカスタムドメインを追加!(独自ドメイン運用)

firebaseに独自ドメインを追加します。firebaseではカスタムドメインという名前がついています。

開発環境でドメインを追加してもしょうがないので、この作業は本番環境(release)に切り替えたのちに行います。

firebaseでカスタムドメインはスタードメインで取得すると料金が安い!

まずドメインが必要です。ドメインはほしいものがある場合は早めに取得しておくといいかもしれません。取られてしまったら取れないので確認は早めがよいです。

ドメインの種類ではcomが安いです。料金は多少変わることがありますが1年1000円ぐらいです。netは昔は安かったのですが、高めになってしまいました。。

ドメインは長く使うものなので2年めの更新料を気にするとよいでしょう。セールに踊らされて更新料が高いという罠にひっかる人がいます。。

管理画面にでるGoogleドメインは初年度のサービスもなしで料金が高めでしたね。サポートもどうなっているかわからないためやめましたね。

日本のドメインの会社はエックスサーバー 系かGMO系に別れます。

GMO系で有名なのが、ムームードメインやお名前.comです。

ドメイン取得は最安値0円～｜ドメイン取るならお名前.com
www.onamae.com
ムームードメイン | 0円で人気ドメイン取得 & 簡単サイト作成
muumuu-domain.com

xserver使っている人はxserverドメインにする人もいます。人気です。

ドメイン名取得【XServerドメイン】
www.xdomain.ne.jp

スタードメイン の運営するネットオウルは実はエックスサーバーの子会社です。

スタードメイン - 格安ドメイン取得 100円〜(税込)　無料レンタルサーバー付き！
px.a8.net

個人的にはスタードメインを使っています。スタードメイン はスターサーバー が25%まで割引になるためスタードメイン ですべて管理しています。毎年、ドメインでポイントがたまりサーバー代で支払える感じですね。いつも25%オフです。スタードメイン は2年目の更新料も安めです。

お得なので、このサイトもスターサーバーに乗り換えました。スタードメインとスターサーバー は詳しくはこちらの記事をみてください。

【評判】スターサーバーのワードプレス体験談【StarServer】
ebookbrain.net
【評判は?】スタードメインの2年目更新料は!?【ネットオウルポイントが使えない!?】
ebookbrain.net

スターサーバー を使わないなら、個人的にxserverドメインを使いますかね。

サブのWordPressのサイトを作るとき便利です。

firebaseのカスタムドメインでDNSレコードの設定

firebaseに話を戻します。

Hosting > カスタムドメインを追加 > urlをいれる

wwwはありとなしはどちらでもいいようですが、なしの方が短くなるためなしにしました。また、個人的にいけているサイトを確認すると、昔のサイトはともかく、最近できたサイトはほとんどなしでした。

XXXを既存のウェブサイトにリダイレクトする

は次の説明があります。

リダイレクトすると、ブラウザの URL が変更されます。たとえば www.yourdomain.com を yourdomain.com にリダイレクトすると、「www」は自動的に削除されます

firebase管理画面

最初は特にチェックをいれなくても大丈夫です。

作ったあと、wwwの方も作らない？とfirebaseの方に促されます。

wwwと直打ちするユーザーさんがいるかもなので対応した方がよい気がします。つまり2つ作るということです。

追加すると次のメッセージがでます。

以下の TXT レコードを DNS プロバイダに追加して、自分の xxx を検証します。TXT レコードは削除しないでください。

firebase管理画面

スタードメイン に追加します。

スタードメイン管理 > ドメイン管理一覧 > ドメイン管理ツール > DNSレコード編集 > レコード追加

  • ホスト名
  • タイプ：TXT(テキスト)
  • コンテンツ：firebaseの管理画面で表示されたものをいれる
  • 優先度

確認画面(ホスト名は自動で入力されるようです) > 確定する

firebase側で[所有権の証明]のボタンをおします。

次のエラーがでるときは時間をおくか、設定が間違っているかですが、時間はわりといりません。設定もコピペでやるため間違えないでしょう。

ドメイン xxx.com の所有権を証明できませんでした。設定をお確かめいただき、もう一度お試しください。

firebase管理画面

意外とあるのがそのドメインを前に使っていた場合、前のネームサーバーの設定が入っていると通らずひっかります。スターサーバー の場合、スタードメイン専用にすると通りました。証明だけなのでサブドメインに使う場合はたぶんネームサーバーを変えても大丈夫そう(このあたりは詳しくないです)

そのあと、aのレコードが2つ表示されますと書いてあったのですが、個人的に1つしか表示されませんでした。1つと書いてあったところもありました。何か変更があったのでしょうか。

1つ入れました。スタードメインの作業です。

スタードメイン管理 > ドメイン管理一覧 > ドメイン管理ツール > DNSレコード編集 > レコード追加

  • ホスト名.
  • タイプ：A(IPアドレス)
  • コンテンツ：表示されたipアドレスをいれる
  • 優先度

確認画面 > 確定する

firebaseのステータスが[ 設定が必要です ]から[ 保留中 ]になります。

ドメイン変更が反映されています。この処理には最大で 24 時間かかることがあります。後でご確認ください。

firebase管理画面

この間サイトにアクセスすると次のようになります。

この接続ではプライバシーが保護されません

処理が完了するとステータスが[ 接続されています ]と表示されます。2時間ぐらいかかりました。

なお、ネームサーバーを違うものに変えると、また[ 設定が必要です ]に戻るようです。

その後、release環境でデプロイすれば、いよいよリリースです。

スポンサーリンク

firebaseのエラー

JSON error trying to load path/.firebaserc

JSON error trying to load path/.firebaserc

たぶん、.firebasercで,(カンマ)をつけ忘れですね。

コメント

タイトルとURLをコピーしました