前書き
アプリをリリースしたが、ランディングページを持ってなかったので、作ることにした。
超簡単で無料でできた感動したので、まとめてみました。
前提条件
Firebaseアカウントを持っていること
ターミナルでFirebaseログインができること
(自分の環境がMacなのでMac中心の記事ですが、Windowsでも同様に進められると思います。)
Firebaseのプロジェクト追加
firebaseでプロジェクトを追加する。
プロジェクト名,ロケーションは各々お好みで設定してプロジェクト作成する。
雛形を作る
https://appsite.skygear.io/
で自分のアプリを検索し、雛形を作成。
START FOR FREEのボタンで検索画面に移行して自分のアプリを探す。
作成元が香港の会社っぽいので、香港のAppStoreに対応してないとダメかも。
作られた雛形で自分好みに色とか説明画面をいじる。
作成して進んでいくとプレビュー画面の右下にDownload HTMLボタンがあるので、
ボタンを押下すると、zipがダウンロードできる。
ダウンロードできたら、解答し、細かいデザインはhtmlファイルとかcssとかをいじっておく。
Hosting初期化とデプロイ
先ほど解凍したtemplateフォルダをpublicフォルダにする。
ターミナルを開き、
publicフォルダのあるディレクトリに移動し、
firebase login
でfirebaseにログイン。
firebase init
で初期化処理を始める。
下記のような選択肢が出るので、カーソルでHosting:~に合わせる。
スペースキーで選択し、enterを押す。
プロジェクトを選択する画面になるので、先ほど作成したプロジェクトを選択肢てEnter
いくつか質問があるが、enterで進んでOK
下記メッセージが出たら、初期化処理終了。
firebase deployでデプロイ完了。Hosting URLの部分がひとまず公開されたページのURLとなる。
https://bluebooklandingpage.firebaseapp.com
ドメイン接続(キャプチャ撮り忘れたので、記憶ベース)
デフォルトでは
(プロジェクト名)firebaseapp.com
がドメインになってます。
独自ドメインを設定したい場合は、下記の手順を踏みます。
・ドメインを取得(ドメイン取得業者)
今回はお名前.comで取得しました。
・ドメインを接続(Firebaseコンソール)
firebaseコンソールのHostingのダッシュボードのドメインを接続のボタンをタップ
取得したドメインを追加
TXTレコードをコピー
・ドメイン取得元でDNS設定(ドメイン取得業者)
コピーしたTXTレコードをDNS設定する
・反映後接続実行(Firebaseコンソール)
ドメイン取得元でTXTレコードを検証して、ドメインを接続します。
・接続後設定
接続後もTXTレコードかAレコードを接続先に反映する作業を数回行って、完了です。
あとがき
雛形作成サービス appsitesはHTML作成は無料です。(このサービス内のホスティングを使って独自ドメインで公開とかなら有料らしい。)
Firebaseは1プロジェクトにつき10GBまでなら無料のようです。