月: 2020年5月

Firebaseで複数のサイトをHostingし、プロジェクトのリソースを共有する方法をメモしておきます。 1つのFirebaseプロジェクトで複数サイトを登録することで、プロジェクト内のリソース(AuthenticationやStorageなど)を共有することができます。 参考：Share project resources across multiple sites 前提条件 前提条件として、既に1つのサイトがFirebase Hostingによって紐付けられデプロイされている状態として進めていきます。 また、プロジェクトを作成し定ない場合は、firebase initを実行して環境設定から行ってください。 また、Firebase CLIがインストールされてない場合は、以下のコマンドからインストールしてください。 [crayon-67f5246832e77539175715/] Firebaseにてサイトの追加 既に1つサイトが存在し、2つ目以降のサイトを登録する場合、Firebase Hosting画面にてサイトを追加する必要があります。 Firebase Hosting画面の詳細設定から「別のサイトを追加」を押下します。 追加したサイト名を入力し、「サイトの追加」を押下します。 これで準備完了です。 デプロイターゲットの作成 複数のサイトを登録したら、それぞれにデプロイターゲットを作成する必要があります。 デプロイターゲットを作成し、サイトのホスティングを適用するには、プロジェクトのディレクトリのルートから以下のコマンドを実行します。 [crayon-67f5246832e79924670267/] target-name : デプロイ先であるHostingサイトの(自身で定義した)一意の識別子 resource-name : Firebaseプロジェクトにリスト表示されるHostingサイトの名前 例えば、プロジェクトがsampleで先程のサイトの追加にsample-subを追加した場合、既にsample-siteがあり、sample-site2を追加する場合は、以下のコマンドで作成します。 ・sample-siteの登録 サイト追加前の既にHostingされているsampleに対して、sample-siteを作成します。 [crayon-67f5246832e7a780002160/] ・sample-site2の登録 先程、サイト追加したsample-subに対して、新しく追加するsample-site2を作成します。 [crayon-67f5246832e7b282751961/] 上記コマンドで作成が完了すると、.firebasercファイルに以下のように自動で追加されているのが確認できます。 ・.firebaserc [crayon-67f5246832e7c199194889/] firebase.jsonをそれぞれのターゲットに合わせて編集 次に、先程作成したターゲットにあわせてfirebase.jsonを編集していきます。これでターゲットに合わせたデプロイが可能となります。 ・firebase.json [crayon-67f5246832e7d673695787/] 複数サイトのデプロイ方法 以下のコマンドで、指定したターゲットのリソースのみのデプロイします。 [crayon-67f5246832e7e206411649/] 先程の例だと以下のコマンドを実行することで、それぞれをデプロイすることができます。 [crayon-67f5246832e7f361621884/] [crayon-67f5246832e80731148446/] 「TypeError: Cannot read property 'deploys' of undefined」エラーで、デプロイが失敗する 「TypeError: Cannot read property 'deploys' of undefined」エラーで、デプロイが失敗する場合がありましたが、以下を参考にして解決しました。。 参考：Hosting deploy fails with multiple sites in the project · Issue #902 · firebase/firebase-tools 複数サイトのプロジェクトが別々の場合に発生しました。 登録する複数サイトが別々のプロジェクトであっても、同じFirebasenoプロジェクト内であれば、.firebaercとfirebase.jsonを共通に持っておく必要があります。 それぞれ別のプロジェクトだからそのプロジェクトだけのデプロイターゲットを作成するのではなく、FirebaseプロジェクトのHosting全てを設定ファイルを記載することで解決できました。

月: 2020年5月

【Nuxt.js】Firebase Hostingで404ページに遷移されない対処法

【LINE謎】LINEで遊べる謎解きの作り方と開発方法まとめ

Firebaseで複数のサイトをHostingする方法