Jenkins-Xでnuxt.jsを使ったWEBアプリを作ってみたけどやはりハマる

July 23, 2020

最近流行っているnuxt.jsを試したくて、このフレームワークを使ったWEBアプリのサンプルを「Nuxt.jsビギナーズガイド」という本の2章から引っ張ってきて、Jenkins-Xにデプロイしてみました。基本的には、nuxt.jsのプロジェクトの雛形をvue initで作成→サンプルソースをコピー→jx importコマンドでJenkins-Xのプロジェクト用のファイルを作成→パイプライン実行(githubにpushした後、自動的に走る)→デプロイ(jx promotion)、という流れでデプロイすることができたのですが、一つだけかなりハマったところがありましたのでそのメモです。

このサンプルでは、axiosを使ってQIITAのWEBAPIをたたいていますが、なぜか403エラーが返ってきます。ローカルPCや、Dockerコンテナでサーバを起動した場合は特にエラーは出ないのですが、Jenkins-xでデプロイするとエラーになってしまいます。ちなみに、Jenkins-Xとは別のkubernetesクラスタに同じイメージを使ってデプロイしても、同様の状況なりました。

別のサイトへのアクセスなら403にならずに200になるようなので、QIITA側で何らかの理由により、アクセスをブロックしているようです。で、いろいろ調査した結果、原因はaxiosがリクエストヘッダにX-Forwarded-Host(リバースプロキシ であるnginx、あるいはingress nginx controllerによって付加している)をそのままつけてQIITAにアクセスしているのですが、このホスト名がどうやらリジェクトされていたようです。Dockerを使用したときにもリバースプロキシ経由でアクセスしていましたが、たまたま別のローカルなホスト名を使用していたのでリジェクトされなかったようです。リジェクトされた理由はよくわかりませんが、もしかすると最初、kubernetesのliveness proveで指定されるデフォルトのパスがたまたまqiita apiをたたくパスになっていたので、意図せず何度もapiにアクセスして、知らない間にブラックリストに登録されてしまったのかもしれないですが、あくまでも推測ですのでよくわかりません。いずれにしても、liveness proveは必ず適切なパスを指定しておかないとダメですね。

ちなみに、このエラーはX-Forwarded-Hostヘッダを削除したところ、出なくなりました。

export default function({ $axios }) {
    $axios.onRequest((config) => {
        if (process.env.QIITA_TOKEN) {
            config.headers.common['Authorization'] = 'Bearer ' + process.env.QIITA_TOKEN
        }
        delete config.headers.common['x-real-ip']
        delete config.headers.common['x-forwarded-for']
        delete config.headers.common['x-forwarded-host']
        delete config.headers.common['x-forwarded-port']
        delete config.headers.common['x-forwarded-proto']
        return config
    })
}