やりたいこと
- 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開発みたいなの期待してるとガッカリするので、改善したいけど、アイデアはない。