GCPでAWSの静的Webサイトホスティングを再現してみる(その2)

-
前回GCPのCloudStorage使ってAWSのCloudFront+S3使った静的サイトのパターンを再現しようとしたけど、httpなので意図通りに動かなかった件について、FireBaseHostingを使ってリトライしてみました。AWSでは結構GUIバリバリで作れる構成ですが、GCPでやろうとするとコマンドライン必須になるので結構ツヨツヨな人じゃないと厳しいかもしれないです。少なくともヨワヨワな自分にはハードル高かったです。
設定作業自体は先人様がいろいろとしてくださっているのでそれをなぞっただけですが、一応記録にしておきます。

◆手順

1.FireBaseプロジェクト作成

1)FireBaseコンソールへ移動







2)プロジェクトを作成
・プロジェクトを追加をクリック






・プロジェクト名を入力し[続行]をクリック











・いったんGoogleアナリティクスは無効、[プロジェクトを作成]をクリック














・プロジェクト作成が完了したら[続行]をクリック













・FireBaseのコンソール画面に遷移する











2.コンソール作業

1)node,npmインストール（nパッケージで導入）

$ sudo apt install -y nodejs npm
$ sudo npm install n -g
$ sudo n stable
$ sudo apt purge -y nodejs npm
$ exec $SHELL -l
$ node -v
v12.16.0
$ npm -v
6.13.4

2)FireBaseToolインストール

#FireBaseToolインストール
$ sudo npm install -g firebase-tools
#FireBaseTool ログイン
#FireBaseTool ログイン
$ firebase login --no-localhost
i  Firebase optionally collects CLI usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.
? Allow Firebase to collect CLI usage and error reporting information? (Y/n)

Visit this URL on any device to log in:
https://accounts.google.com/o/oauth2/auth?

? Paste authorization code here:
?  Success! Logged in as hogehoge@gmail.com

・認証
[Visit this URL on any device to log in]で表示されたURLにブラウザでアクセス
アカウント接続画面が表示されるのでアカウントを選択





[許可]をクリック


コードをコピーして[Paste authorization code here:]の後ろに貼付


















3)プロジェクト作成

$ mkdir -p project/public
$ cd project/
$ firebase projects:list
? Preparing the list of your Firebase projects
lqqqqqqqqqqqqqqqqqqqqqqwqqqqqqqqqqqqqqqqqqqqqwqqqqqqqqqqqqqqqqqqqqqqk
x Project Display Name x Project ID          x Resource Location ID x
tqqqqqqqqqqqqqqqqqqqqqqnqqqqqqqqqqqqqqqqqqqqqnqqqqqqqqqqqqqqqqqqqqqqu

X project(s) total.

$ firebase init --project=FireBase-project

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

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

  /home/users/project

? Which Firebase CLI features do you want to set up for this folder? Press Space
 to select features, then Enter to confirm your choices.
 ◯ 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        #SPACE押して選択してEnter
 ◯ Storage: Deploy Cloud Storage security rules
 ◯ Emulators: Set up local emulators for Firebase features
 

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

  /home/users/project

? Which Firebase CLI features do you want to set up for this folder? Press Space
 to select features, then Enter to confirm your choices. Hosting: Configure and
deploy Firebase Hosting sites

=== Project Setup

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.

i  Using project FireBase-project (project)

=== Hosting Setup

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
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
?  Wrote public/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...
i  Writing gitignore file to .gitignore...

?  Firebase initialization complete!

4)デプロイ

#firebase.json編集
$ cd project
$ vi firebase.json
※以下の通り編集
----------------
{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "/",
        "destination": "/index.html"
      }
    ]
  }
}
-------------

#サイト公開
$ firebase deploy

=== Deploying to 'FireBase-project'...

i  deploying hosting
i  hosting[FireBase-project]: beginning deploy...
i  hosting[FireBase-project]: found 3 files in public
?  hosting[FireBase-project]: file upload complete
i  hosting[FireBase-project]: finalizing version...
?  hosting[FireBase-project]: version finalized
i  hosting[FireBase-project]: releasing new version...
?  hosting[FireBase-project]: release complete

?  Deploy complete!

Project Console: https://console.firebase.google.com/project/FireBase-project/overview
Hosting URL: https://FireBase-project.firebaseapp.com

上記のURLでindex.htmlの内容が表示されているか確認する。
404.htmlのファイルはあらかじめ作成してアップロードしておく

3.カスタムドメイン設定

1)FireBaseの設定(ドメイン認証用TXTレコード取得)
・FireBaseHostingの設定を選択
















・[カスタムドメインを追加]をクリック

・設定するドメインを入力して[次へ]をクリック










・[セットアップモード]を[詳細設定]に変更する。
　DNSに設定するパラメータが表示されるので内容を
　コピーしておく。コピーしたら[次へ]をクリックする。















・時間がかかるのでいったん[ダイアログを閉じる]














2)GCPのCloudDNS側作業(TXTレコード登録)
・GCPコンソールでCloudDNS設定を開く















・登録されているサブドメインをクリックする。









・[レコードセットを追加]をクリックする。









・[DNS名]のサブドメインの前にFireBaseで出てきた[ホスト]を入力する。
　レコードのタイプは[TXT]を選択して[TXT]データにFireBaseで出てきた[値]を
　入力する。最後に[作成]をクリック
　










3)ドメイン認証完了後作業(Aレコード登録)
・FireBaseのコンソールでFireBaseHostingのダッシュボードを開く
[設定が必要です]と表示されているので[表示]をクリックする。
・値の箇所の内容をコピーする













・GCPのCloudDNSのコンソールを開いて、サブドメイン選択後に[レコードセットの追加]
　をクリックする。リソースレコードのタイプで[A]を選択してFireBaseの[値]の箇所に
　表示されているIPアドレス2つを貼り付けて[作成]をクリックする。








・しばらく待つてからFireBaseHostingのダッシュボード画面にログインすると
　[接続されています]と表示されるので、設定したドメインをブラウザに打ち込んで
　動作を確認する。








まぁ、やりたかったことはできたんですが、AWSほどお手軽ではなかったですね。
CLIの構築が必要だし、ツヨツヨなエンジニアさん向けという感じでしたね。
Gitとかと相性よさそうだし、コマンドラインでいろいろとできるし、
FireStoreとかCloudFunctionsとかとも連携できるからスピード重視の開発とかの
場合はAWSより自由度高いかなぁと思いました。
よく考えるとGCPでやる場合はあえてこういうことせずに素直にGAEを使った方が
いいんだよなぁというのはここでは思わなかったことにしよう。
それとwwwありでもwwwなしにリダイレクトさせるという設定がうまくできていないのでこれをやっておくようにしておかないと実運用で使えないなぁ、最初の設定でミスりました。気が向いたら直します。

そしてそのうちAzureで同じようなストレージホスティング構成がとれるのか検証
してみようかなぁと思っていたりします。(いつになることやら。

◆参考サイト

https://firebase.google.com/docs/cli?hl=ja
https://qiita.com/seibe/items/36cef7df85fe2cefa3ea
https://qiita.com/yacchi1123/items/963bdf12c9c4a7a8f67c
https://firebase.google.com/docs/hosting/custom-domain?hl=ja
https://firebase.google.com/docs/hosting/url-redirects-rewrites?hl=ja
https://qiita.com/qrusadorz/items/617ef8e21aee75e7cd20
https://stackoverflow.com/questions/45672351/firebase-hosting-create-a-404-page
https://blog.haramishio.xyz/entry/migrate-firebase-hosting

コメント

コメントを投稿

このブログの人気の投稿

GASでGoogleDriveのサブフォルダとファイル一覧を出力する

-
 タイトルのまんまです。 以前、EXCELで似たようなこと をしていたのでGASではどうするのかなぁと思ってやってみました。まぁほとんど丸パクリです。とりあえず、また使うかもしれないので自分用にメモです。しかしGASでGoogleDriveのファイル一覧嘗め回そうとすると3分かかってしまう。数が多いと6分制限に引っかかるのでこれでは使えない。せいぜい100ファイルとか数が少ないところで使う分にはいいけどダイナミックな場合は何回かに分割してやらないと少し厳しいかもしれない。 ◆GAS //設定値取得 const SHEET_URL = SpreadsheetApp.getActiveSpreadsheet().getUrl(); const ss = SpreadsheetApp.openByUrl(SHEET_URL); const SETTING_SHEET = ss.getSheetByName('設定') const TARGET_FOLDER_ID = SETTING_SHEET.getRange('B2').getValue(); const SAVE_FOLDER_ID = SETTING_SHEET.getRange('B3').getValue(); const SAVE_FILE_NAME = SETTING_SHEET.getRange('B4').getValue(); const SAVE_SHEET_NAME = SETTING_SHEET.getRange('B5').getValue(); function writeSheet(values, labels, sheetUrl, sheetname, width) { /* スプレッドシートに書き出し */ try { if (values.length > 0) { // シートを追加する let spreadSheet = SpreadsheetApp.openByUrl(sheetUrl); let sheet = set_sheet(sheetUrl,sheetname); // 1行目だけヘッダ追加 let he...
続きを読む

証券外務員1種勉強(計算式暗記用メモ)

-
何を血迷ったのか 証券外務員 1種を受けてみようかと 思って 問題集 を回していたけれども、いまいち数式部分に 弱いところがあるので暗記してやろうと 重要そうな数式を集めてみました。まぁ正確性は低いかもしんないけど ひとまずは個人用でメモしています。 1.株式業務 (1) 権利落ち相場 　　権利落ち相場= 権利付相場 ÷ 分割比率 　(2)採算株価 　　採算株価=希望利回り÷1株当たり配当年額 　(3)1株当たりキャッシュフロー(PCFR) 　　 PCFR = 発行済株式総数 ÷( 税引後純利益 + 減価償却費 ) 　(4) イールドスプレッド 　　イールドスプレッド=長期債利回りー 株式益回り 　(5) EVITDA (金利・税金・償却前利益) 　　EVITDA=税引前利益+支払利息+減価償却費 　(6) EV (企業価値) 　　EV= 時価総額 + 有利子負債 ー 現金預金 ー 短期有価証券 　(7) EV/EVITDA倍率 (倍) 　　EV/EVITDA倍率=EV÷EVITDA 　◆株価成立参照 　　 https://www.rakuten-sec.co.jp/web/domestic/stock/rule/agreed.html 　　 http://money-magazine.org/%E6%A0%AA%E4%BE%A1%E3%81%AE%E6%B1%BA%E3%81%BE%E3%82%8A%E6%96%B9%E3%81%AE%E5%9F%BA%E7%A4%8E%E7%9F%A5%E8%AD%98/ 　　 https://kabusyo.com/keiken/q_baibai.html 　　 https://ja.wikipedia.org/wiki/%E6%A0%AA%E4%BE%A1 　　 http://kabukiso.com/basics/buy/ita.html 2.債券業務 (1) パリティ価格 (転換社債株式価値) 　　パリティ価格=(株価÷ 転換価格 )×100 　(2) 乖離率 (%) 　　乖離率={(転換社債の時価ーパリティ価格)÷パリティ価格}×100 　(3) 最終利回り (%) 　　最終利回り={利率+(償還価格ー購入価格)÷ 残存期間 ＜年＞)}÷購入価格×...
続きを読む

マクロ経済学(IS-LM分析)

-
イメージ
危うく3日坊主になりそうでした。とりあえず今日は 「IS-LM分析」 です。 テキストでは 簡便4象限法 とかいうのの説明が多いです。なのでさっぱり わけわからん状態ですが、それなりに頑張ってみます。 1: IS曲線 の導出 財市場の均衡を表す。Iは投資を表し、Sは貯蓄を表す。 ・IS曲線導出の材料 I→利子率の関数、S→所得の関数で「I=S」で財市場を表す。 ・ 投資関数 利子率の減少関数、I (投資関数)=I(r)　※rは利子率 ・政府活動の導入 裁量的な拡張的な財政政策はIS曲線をシフトさせる。 IS曲線の右シフト=政府支出の増大や減税等の有効需要を増加させる要因による 2: LM曲線 の導出 利子率の低下が国民所得の増大につながる因果関係を明らかにする目的 ・LM曲線導出の材料 貨幣需要(MD)=L、L=取引的動機+予備的動機(L1)+投機的動機(L2) MD=L1+L2 貨幣供給(Ms)=名目貨幣供給/物価(P) ・LM曲線のシフト 金融緩和策・物価下落：実質貨幣供給(MS)が増大→右(下)へシフト 金融引締策・物価上昇：実質貨幣供給(MS)が減少→左(上)へシフト 独立投資拡大→IS曲線が右にシフト 利子率がr1→r2に下落する。 IS曲線、LM曲線の均衡点がE→Fに移動する。 国民所得がY1→Yfとなって増大する。 3:特殊なLM曲線 ・ 流動性の罠 のLM曲線 金融政策は無効→LM曲線をシフトさせても均衡点Eは変わらない IS曲線を右にシフトさせる拡張的な財政政策を実施すると均衡点が E→E´となり国民所得がY1→Y2に増加するので財政政策は有効となる。　　　 ・ 投資の利子率に対する弾力性ゼロ 金融政策は無効→LM曲線を右にシフトさせても国民所得が増えない。 流動性の罠と同じくIS曲線を右にシフトさせる拡張的な財政政策を実施すると 均衡点がE→E´となり国民所得がY1→Y2に増加するので財政政策は有効となる。　　　　　　 4: クラウディング・アウト 政府が市場に介入して公共投資を行うと民間の投資が締出しを受ける ・古典派による財政政策の無効論 政府支出を拡大すると利子率が上昇してしまい。投資が減少する。 政府の支出がクラウディングアウトを引き起こして支...
続きを読む