webとモバイルアプリの逆転

webアプリとモバイルアプリの開発に関する話や本・ゲームなどの趣味の話を雑多にしていきたい

Create React App + prisma + sqlite3で作られたアプリをpackage化する

問題点

Create React Appで用意したアプリにPrismaを導入したところ、npm run package でproduction buildするとDBアクセスができない現象が発生した。

解決策

package.jsonのbuildの項目にextraResourcesを追記してPrismaを追加する。

{
    "build": {
         ...
        "mac" or "win": {
        ...
        "extraResources": [
            "prisma/**/*",
            "node_modules/.prisma/**/*",
            "node_modules/@prisma/client/**/*"
        ]
        }
    }
}

何をしているか

まず、npm run package の中身を見てみる。

ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --publish never

最初の一つ目のコマンドはすでにビルドされている結果の削除、 ふたつめはwebpackを用いてビルドをしているだけなので、ここでは割愛する。

今回問題になっていたのは3つ目のelectron-builder build --publish neverだった。 これは、Electronのアプリを配布するためのパッケージングを行うものとなっている。

Create React Appを利用するとこのパッケージのインストールと設定が行われるようになっており、その設定はpackage.jsonの"build"の項目に記載されている。

Prismaで生成されたクライアントとデータベースをパッケージに組み込むように設定されておらずエラーとなっているみたいだった( 参考)。

なので、ビルドする際にPrisma関係のファイル・ディレクトリを含めるように指定することで動くようになった(該当するドキュメント)。