yasudacloudの日記

札幌に住むソフトウェアエンジニア

EmDashをCloudflareとVPSでそれぞれ動かした

ローカル環境で一通り操作したので次はCloudflare、そしてVPS環境にデプロイしてみたので幾つかハマりそうなポイントを書いていきます。

ドキュメントはGitHubのリポジトリのdocs以下にあります。

github.com

Cloudflareへデプロイ

Cloudflareへデプロイするためのastro.config.mjsはこちらでいけました。

gist.github.com

一度GitHubにプッシュ、CloudflareのWorkers & Pagesから新規でアプリケーションを作成し、GitHubのリポジトリから引っ張ってきます。ビルド&デプロイ関連の設定はデフォルト。

ただし、人によってはビルド時に↓のエラーが出る可能性があります。

In order to use Dynamic Workers, you must switch to a paid plan at

これはWorkersのプランを月$5の有料プランにしてくださいという意味ですが、EmDashの説明では"プラグインはDynamic Workersのサンドボックス上で実行される"という話だったのでプラグインを使わなければ不要なはず・・🤔

→wrangler.jsoncのworker_loadersが[{"binding": "LOADER"}]になっていたので、これを空っぽ[]にして再度デプロイします。

Cloudflareで動くEmDash

思っていたより遅いです。画面遷移の度にちょっと待つなーと感じるくらいです。SSRという点を踏まえても微妙。

有料プランにしてもマシンパワーが上がるわけではないので関係ないと思うんですが、他でも使いたいので$5課金してみました。再デプロイ。

それほど変わりませんでした。改善し甲斐がありますが、デプロイ&動作は確認できたのでCloudflareはひとまず完了。

VPS環境にデプロイ

次に、契約しているVPS上にデプロイしました。

DB/ストレージはローカル環境と同じだと面白みがないので、DBをSupabaseのPostgreSQL、ストレージをAWSのS3にしました。

構成はSSL設定済みのNginxが既にあるので、リバプロでEmDashに向けます。

astro.config.mjsはこのようになりました。

gist.github.com

上記のdatabaseとstorageの記述は概ねドキュメント通り。

しかし、自分のVPS環境からSupabaseのPostgreSQLにダイレクトで繋がらなかった(IPv6で疎通できなかった)ためコネクションプールに向けています。これがポート5432ではない理由です。

加えて、security.allowedDomainsでドメインを指定する必要がありました。これがないと初回にパスキーを登録する際に下記のようなエラーになります。

Security error. Make sure you're on a secure connection.

ビルド&起動

ビルドはnpm run build。起動はnode dist/server/entry.mjsですが、せっかくなのでpm2で動かします。

プロジェクト直下にecosystem.config.cjsを追加。cwdはプロジェクトの絶対パス。

gist.github.com

pm2 start ecosystem.config.cjsを実行し、以降はpm2 stop emdashやpm2 start emdashなどで操作できます。

DB接続はOK。速度もCloudflareよりスムーズです。

しかし、S3の疎通確認をしようとMediaで画像アップロードするとエラーに。これはPresigned URLを使ってブラウザのJSからAWSのhttps://s3.ap-northeast-1.amazonaws.com にfetchしようとしてCSPのエラーが起きているためです。

ミドルウェア書いたり、Astroのドキュメント見てもよく分からなかったんですが、どうもEmDash側の修正が必要なようでPRが出ていました。したがって次のバージョン待ちですね。↓

github.com

まとめ

やっぱり公式なのでCloudflare上で動かしたい気持ちもありますが、自分でサーバー立てれば色々いじれるのでそれも魅力的。

プラグイン、DB周りがどうなってるか特に気になっています。もう少し成熟したらフォークして自分好みにしていくのも面白そう。

ただ、まだ不具合が多いので実用的ではないと思います。