はじめに

ngrok とは、ローカル開発環境で実行されているWebサーバーを外部からでもアクセス可能にできる優れもの。
普段web開発している人は、ローカルでサーバーを立ち上げた際、localhost:3000にアクセスして実装の確認をしていると思います。これをどこからでもアクセス可能にできるので、APIのテスト、外部サービスの連携、テストなどが簡単に行えます。

ngrokを使用するに至る経緯

社内向けサービスを以下の構成で実装

フロント : CloudFront + S3 でデプロイ (整備済み)
バック : RDS + ECS でデプロイ　（未実装）

バックエンドのデプロイ環境が思いの外時間がかかってしまい、テストができない状況に........

テスターがローカルでバック、フロントのサーバーを立ち上げてテストも可能ですが、ローカルではうまくいっていたことがデプロイ環境だとうまくいかない....というのはよくある話

納期もギリギリでテストもできていない状況はやばすぎる。。。

ということで、私のPCをサーバー(ngork)にしてバックエンドのエンドポイントを生成し、
それをAWS上にデプロイしてテスト環境を作るといった強行手段を選びました。

ngork導入

導入方法については先人の方々がとてもわかりやすく説明してくださっているのでそちらを参考に

テストまでの流れ

バックエンドをローカルサーバーで立ち上げる
- http://localhost:8080
上記のportで以下のコードを実行
- ngrok http 8080

すると以下のような画面が表示される

このForwarding　の横に書いてある箇所がランダムで生成されたどこからでもアクセスできるリンク
ちなみに、Web Interface のリンクにアクセスすると、リクエストのログが見れたりする
↓ こんな感じ

このランダムで生成されたURLをエンドポイントに指定してaxiosをインスタンス化すればAWSにデプロイしたwebサイトからでもAPIの疎通確認がどこからでもできるようになります。

躓きポイント

GET, PUTができない.....

リスト取得のAPIを発火させた際に、ステータスコード200が返ってくるのに中身が返ってこない....
開発者ツールでレスポンスを確認したところ、謎のドキュメントが返ってきてました。

(ERR_NGROK_6024)

調べてみるとどうやらngrokを使用する際はヘッダーに

ngrok-skip-browser-warning: true

を追加しないといけないとのこと。なるほど、これを追加して再度リクエストを...
結果、今度はcorsエラーが発生。
バックエンドのcorsは一時的にどのhostからでもはいれるように設定しているはずなのにcorsエラーが発生してしまいました。

ktor.docsを確認し以下の記述を発見

install(CORS) {
    allowHeadersPrefixed("custom-")
}

カスタムヘッダーを使用する際はどうやらallowHeadersPrefixedも追記しないといけないようでした。
バックエンドをいじいじして下記のコードを記載

allowHeadersPrefixed("Ngrok-Skip-Browser-Warning")

上記の対応で無事、ngrok経由でAPIを叩けるようになりました🎉

まとめ

ヘッダーにngrok-skip-browser-warning: trueを追加する必要がある。
corsエラーを回避するためallowHeadersPrefixed("Ngrok-Skip-Browser-Warning")を追加する必要がある。

上記の対応を行えば問題なく動作するかと思います！
同じエラーに遭遇した方はぜひ参考にしてみてください！

とりあえず、AWSの構築を早く終わらせてくれ.......

以上！