Open11

【Vue.js + Firebase】個人開発サービス作成→リリース備忘録【iidokoro】

Vue.js+Firebaseでサービスを作成 + リリースに向けた手順を備忘録として残す

【作成したサービス】
iidokoro
ITパスポート、基本情報技術者試験などの情報処理技術者試験専用の学習記録サービス

https://iidokoro.com/

【プロジェクト作成】
vue-cliを用いて作成
作成したら、ひたすらコーディング

https://cli.vuejs.org/

【独自ドメイン】
ドメイン取得したかったので、今回は「ムームードメイン」様を利用

https://muumuu-domain.com/

【ビルド】
下記コマンドでビルドを実行

npm run build

【Firebaseへデプロイ + 独自ドメインの設定】
下記記事の通り進めることで完了

https://qiita.com/fezrestia/items/fa2dc789f13b9d89a164

※所有権を確認した後、タイプAのDNSレコードとして表示されるIPアドレスをDNSプロバイダに登録することを忘れない。所有権の確認完了して満足してたらいつまでも接続できず。。。

独自ドメインが利用できるまでには最大24時間かかるとのこと。
今回のケースではおよそ3時間程度だったと思う(うろ覚え)

【リロード時にエラーになる対策】
デプロイして満足していたら、root以外で画面をリロードするとエラーになる。
調査するとfirebase.jsonを下記のようにすると良いとのこと

{
  "hosting": {
    "public": "dist",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

rewritesの部分を追加している。

【OGPに大苦戦】
SNSでシェアすることを考慮してOGPの設定は必須だと思うが
SPAであるため簡単にできず。

上のリンクのように対策できたので後々まとめていく。

【OGP何に苦戦したか?】
OGP設定後、noteで記事を作成。その際にはOGPが問題なく表示された。
しかし、TwitterやLINEなどでは画像が表示されない。
Twitterで表示されないのはmetaタグでtwitter専用の設定が必要だってことはあるが
他でも表示されないのは不思議

暫定対策として
・metaタグでtwitter周りの設定
・vueのpublicフォルダにOGP画像を設定→ビルド→それを読み込む
で表示。結局一番良い方法は何なんだろう

ログインするとコメントできます