GlitchでKoa+Parcelの構成でアプリを動かす

しょうもない規模のアプリだと、バックエンドとフロントエンドを別々に開発するのは非常にアホらしいですよね。プロジェクト名-frontendとプロジェクト名-backendで2つのリポジトリとかだと管理が怠くなってきます。

そこで、今回はフロントエンドとバックエンドを一つのアプリにまとめてみることにしました。

最終的な成果物: https://github.com/ci7lus/glitch-koa-parcel

Parcel には API があり、バンドル機能をCLI以外からも使うことができます。

今回はParcel単体だとsrcに突っ込む一式をsrc/frontend/index.htmlのように配置し、./distではなく./.data/publicに対してコードからバンドルしてみました。コードからのバンドルでもNODE_ENVがproductionでない間はHMRが効きます。

このあとkoa-static-serverを使って/を./.data/publicに向けたりすれば大体完成です。詳しくはリポジトリ読んでください

勘所

GitHubのWorkflowからデプロイする

Glitch側からGitHubに反映しないこと

コミットハッシュが変動した時のみtscとparcel buildを行う

立ち上がるたびにいちいちビルドしていては効率が悪すぎる

prestart.sh

永続ストレージ.dataに対して成果物（dist, public）を吐き出す

数秒で起動するようになる

トップディレクトリに吐かれたものはgitignoreされているのでワークスペースには残らない

これらのignore指定を本番でのみ外すという方法も考えられる

Glitchプロジェクト内のGitリポジトリはGitHubのものと別管理

GitHubからインポートすると完全上書きコミットが行われる感じ

shrinkwrap.yml を無視する

無駄にコミットハッシュが変動してしまう

おそらくエディタを閉じてしばらくしたかなんらかのタイミングでunstaged changesが内部でまとめてコミットされている

未解決問題

glitch側でNODE_ENV=productionとしているが、yarn時にもその値が用いられるので通常であればdevDepsに入れておくはずのものもdepsに入れる必要がある

NODE_ENVを指定せずdepsを戻し、prestart.shで限定的にproductionを適用

parcelにtailwindcssを導入した途端に普通にビルドできなくなってしまった。

メモリを食いすぎるのでビルドが終わる前に殺されてしまう。

今は抜け道みたいな方法でどうにか遅延させてビルドさせているが、まともにメモリ使用を減らしたりする方法があれば教えていただきたい

現状では普通にpublic,distを含めてしまった方が良いまである

解決

ActionsのArtifactにビルド済みぶん投げて引っ張ってこさせるようにした

解決方法がキモすぎるだろ