はじめに
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の構築を早く終わらせてくれ.......
以上！