Next.js+Cloud RunでThe request failed because either the HTTP response was malformed or connection to the instance had an errorがでる

2023-08-24T22:27:40+09:00

Next.jsを使って構築したサービスをCloud Runで動かしていると、ある時から503エラーが出るようになった。エラーメッセージは The request failed because either the HTTP response was malformed or connection to the instance had an error

利用者さんによるととにかくエラーが頻発するらしい。

OpenAIのAPIを使っていたのでもしかしたらそれかも…と思ったが、どうもそうでない場合もエラーが出たり、色んなところが重くなったりと、変な感じだった。

一応Cloud Runのエラーログにドキュメントへの誘導があるので見てみたが分からなかった。

どうしてもわからないのでとにかく解決したい一心でひたすらログを追ってみることにした。するとなんとなく原因がわかってきた。

Flutter用問い合わせフォームウィジェット＆サービスを作った

2022-04-11T23:43:19+09:00

Flutter用の問い合わせフォームのウィジェットを簡単に設置できるパッケージ及び連携サービス Contact Nite を作りました。

上記画像のように簡単なコードを設置するだけで、サービス上で設定した項目通りの問い合わせフォームウィジェットを表示することができます。また、
送信された問い合わせはサービス上で確認することができるようになっています。

サービス
https://contact-nite.com/ja
パッケージ
https://pub.dev/packages/contact_form

無料プランもありますので気になる方は是非試してみてください。僕も自分のアプリに入れて試してみています。

問い合わせが来るとメール及びSlack通知を行うことができます。そのうちサービス内で直接問い合わせ下ユーザーとやり取りができるようにしてみようと思っています。

技術的な話

パッケージ自体は純粋なFlutterパッケージです。サービス側は今回 Next.js, PlanetScale, Cloud Run を利用しました。

PlanetScale

丁度開発している途中で知った、MySQLサービスです。最近記事も書いたので良ければ見てみてください。

サーバーレスMySQLのPlanetScaleをNext.js+Prismaで使ってみた
 PrismaでPlanetScaleを使う時のエラーあれこれ

ここ最近はずっとFirestoreを使ってサービスを作っていました。安くて容量が大きいとなるとこれくらいしかなかったためです。ところがPlanetScaleを知りそちらに乗り換えてみることにしました。とにかく容量が大きいというのが決め手です。本当はMySQLの方が好きなので僕にとっては嬉しいサービスです。

まだリリースしたサービスで利用した経験が無いのでどうなるかわかりませんが、これから見ていこうと思っています。問題なければこれからの僕の定番になりそうです。

Next.js

Next.jsで作っています。サーバー側もNext.jsのAPI Routesです。もうとにかく楽ちんですね、サーバーサイドとフロント側の連携とか、何も考えなくて良いというのは。仕事だと色々問題が出てくるのかもしれませんがとにかく個人で開発するものだと今はこれが楽すぎて他を考えられません。

特に日本専用サービスとする必要もないためInternationalized Routingを使って日本語と英語の対応を行っています。

デプロイ

Cloud Runを利用しています。最近こればかり使っているので元々持っている資産的に楽になってきたため他を考えられません。といいつつPlanetScaleを使っているのでDBまわりで悩まなくてもいいしHerokuとかで良かったかもしれません。

push時に連動もできるのですが、自動テストはGitHub Actionsでやったほうが超簡単なため、push→GitHub Actionsでテスト→Cloud Buildでビルド＆Runにデプロイという流れをとっています。DBのマイグレーションもCloud Buildでビルドしたイメージを利用して自動化しています。

テストはJestによるシンプルなAPIのテストと、Cypressを使ったE2Eテストを行っています。Cypressはあまり使ってないですがCypress Dashboardと連携して動画も見れたりするの面白いですね。

メール

SendGridです。Dynamic Templatesむっちゃ楽ちんですね。SendGrid上でメールの本文を調整して簡単に送信できます。ごちゃごちゃプログラムやDB上にテンプレートを定義しなくていいので良いです。

あとはメール受信のhookを利用して、メールも見ずにサービス上だけでやり取りできるようにもしたいなと思っています。なんかできるっぽいので。

Flutter側

多言語化

ハマりどころとして、多言語化が結構複雑でした。パッケージを作成する場合一緒に作成されたサンプルプロジェクトと連携して動作させるのですが、そのプロジェクト内だとうまくいくのに、別途他のアプリに組み込んでみたらちゃんと言語が反映されないという問題が発生したりして手こずりました。

ちなみにFlutterはVS Code拡張Flutter Intlを使うことで簡単にローカライズできるのですが、それも使えたようです。

テスト

パッケージは公開ということもありGitHub Actionsでのテストが無料で放題なので、せっかくなので自動テストをいれてあります。

まとめ

小ネタですがサービスサイトの問い合わせフォームもWebではありますがContact Niteに送信して実現しています。

Cloud RunでNext.jsのNEXT_PUBLIC_の環境変数が有効にならない場合の対処

2021-12-08T08:54:05+09:00

Cloud RunはGitHub連携もできるため、Next.jsのアプリケーションもDockerfileを準備すれば簡単にデプロイを自動化できる。しかし、連携設定どおりにちゃちゃっと設定していっても、NEXT_PUBLIC_で始まるクライアント用の環境変数がうまく設定できない。Cloud Runの設定を行う際に環境変数を指定することができるのだが、それを設定していてもNEXT_PUBLIC_がついている環境変数だけが動かない。しかもAPIなどで使っている環境変数は問題なく動いている。

原因

そもそもNEXT_PUBLIC_系の環境変数というのは、実行したタイミングで利用されるものではない。サーバー側で直接利用される場合はそのまま動くが、クライアント側はビルドした時に埋め込まれる仕様となっている。そのためCloud Runで実行した場合ではなく、Cloud Buildでビルドされるタイミングで環境変数が利用されるようにしておかなければならない。つまり、Cloud Build側に環境変数の設定が必要ということ。

「CloudRun」の記事 - Crieit