やりたいこと
- firebase上でnext.jsを使ってSSRしたい。
- expressも一緒に使って、apiも一緒に作って、express内でDBアクセスとかできるようにしたい。アプリの初期化とかもexpressで完結できるようにしたい。（api用のエンドポイントを作りたい。）
- nodemonを使って、watchして自動的にビルドさせたい。
やったこと(成果物)
ベースになっているのはこのtemplate
https://github.com/zeit/next.js/blob/canary/examples/with-firebase-hosting-and-typescript
こっちで実装した一番の肝はここ。
https://github.com/keenjoe007/firebase-ts-next-express-template/blob/e2775ba656e0a1e11996ac49b3a5776e10cc8c11/src/functions/index.ts
ハマリポイント
-
devのときと、buildを走らせた際の
dist内のディレクトリ構成が変わってしまって、next側でpagesディレクトリがないよ、とエラーが出る。-> nextAppの初期化段階でのconfの設定が大事。（https://github.com/keenjoe007/firebase-ts-next-express-template/blob/e2775ba656e0a1e11996ac49b3a5776e10cc8c11/src/functions/index.ts#L8-L11） -
firebase serveしたときに、ローカルだからと、
NODE_ENVをdevelopmentに指定するとエ ラーが出る。 ->productionで起動しましょう。(https://github.com/keenjoe007/firebase-ts-next-express-template/blob/e2775ba656e0a1e11996ac49b3a5776e10cc8c11/package.json#L11) -
react hooks使えない！ -> 開発環境の
node_modulesにも、dist配下にもreactがあることが原因だと思われます。（憶測）
https://github.com/CSFrequency/react-firebase-hooks
これで解決するのかな？試してないのでわかりません。今回の本題はそこじゃない感あるので。（無責任）
このテンプレートで開発するには？
現状スマートな方法を知りません。
申し訳ないんですが、git cloneしてremote origin変えてもらうか、
npm init next-app --example with-firebase-hosting-and-typescript with-firebase-hosting-and-typescript-app
# or
yarn create next-app --example with-firebase-hosting-and-typescript with-firebase-hosting-and-typescript-app
baseのtemplateでnextappを作って、レポジトリを参考にしてもらいつつ、改良するしかなさそう。カスタムテンプレート指定できる方法があればそうしたいので教えて下さい。
firebase authとか、firestore使えるの？
expressから、firebase-admin-toolsを使うことで使えます。
今色々試してるところです。
所感
firebaseはほぼ初触りだったが、思ったより簡単じゃなかった。むしろかなり悩まされた。
react or vue + firebaseで〇〇作りました！みたいなものと、今回やったのは結構別物だった。
nuxt.jsの方が簡単にできそうだった。
結局こういうことをする理由があるかは、今考えてみるとない気もしているが、達成感はある。
フロントエンドから直接DBアクセスしたりとかどうよ？って考えてたので、それをexpressでやりたかったので、そこはクリアできたかな、と思っている。
自動ビルドめっちゃ遅い。死ぬほど遅い。buildしないといけないので当たり前なんだけど、現代のサクサクweb開発みたいなの期待してるとガッカリするので、改善したいけど、アイデアはない。