GlitchでKoa+Parcelの構成でアプリを動かす
しょうもない規模のアプリだと、バックエンドとフロントエンドを別々に開発するのは非常にアホらしいですよね。プロジェクト名-frontendとプロジェクト名-backendで2つのリポジトリとかだと管理が怠くなってきます。
そこで、今回はフロントエンドとバックエンドを一つのアプリにまとめてみることにしました。
今回は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を行う
立ち上がるたびにいちいちビルドしていては効率が悪すぎる
永続ストレージ.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にビルド済みぶん投げて引っ張ってこさせるようにした
解決方法がキモすぎるだろ
https://tweet-card.now.sh/1269999686405910530.jpg https://twitter.com/ci7lus/status/1269999686405910530