Nuxt.js Auth Moduleのエラー（実はDocker Linksの問題）

いや……確かちゃんと動いていたはずなのに……\ Nuxt.jsでAuthを使ってログインしたあと、リロードすると突然エラーが出る。 ``` [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside , or missing . Bailing hydration and performing full client-side render. ``` いや、正確に言うと、リロードしたときにSSRのサーバーレンダリングではAuthがないと認識されて、falseの状態で読み込まれるのに、クライアントではユーザーIDを取得してtrueとして出力するから、互いにレンダリングされる内容が異なるということだ…… 上記のIssueが原因だと思うんだけど、どうしても解決できない……いや、設定値にちゃんと\ localStorage: null と設定したのに……確か反映されていたはずなのに、また動かない。はぁ……いったいどうしろっていうんだ……。確か何の問題もなかったはずなのに、突然こんなエラーが起きたみたいだ…… はぁ……いったい何が問題なんだよ、お前……\ はぁ……やっとDockerの設定が全部終わって、リフレッシュトークンとトークン認証の部分を解決して……\ 管理者ページの作業に入ろうと思っていたのに……これじゃあ作業できない…… どうしてこんなにもNuxt.jsのAuth Moduleを使うのが難しいのかわからない……（イライラ……） 動いたり動かなかったり……Windowsでは問題なく動くのに、Dockerに移すとまた動かない……（笑）いったい何が原因なのかわからないんだけど…… とりあえず……Authモジュールを見てみよう…… auth.\_token.local Bearer%20eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9hcGkuY29pbm5ldC5sb2NhbGhvc3RcL2FwaVwvdjFcL2F1dGhcL2xvZ2luIiwiaWF0IjoxNTY2MzM4MDEzLCJleHAiOjE1NjYzMzgzMTMsIm5iZiI6MTU2NjMzODAxMywianRpIjoieHNJcllscXFDUGhJdFI5dCIsInN1YiI6MSwicHJ2IjoiMjNiZDVjODk0OWY2MDBhZGIzOWU3MDFjNDAwODcyZGI3YTU5NzZmNyIsImVtYWlsIjoiYWxjbHNAbmF2ZXIuY29tIiwibmFtZSI6Ilx1YzdhY1x1YzEzMVx1Yzc3NCIsIml2ZSI6dHJ1ZSwidHlwIjoxLCJybCI6MX0.52w9gOwexkWexQCacC2ietHdKTwltqC2T1MZ7cwKjVE ログインすると、この値が保存される。そしてリロードすると、このCookie値も一緒に送信される。このCookie値があれば、サーバー側でnuxtServerInitから ``` user: { url: 'auth/~~~', method: 'get', propertyName: 'payload' }, ``` を呼び出して値を取得して保存し、Auth/userに保存したあとすぐに表示する……\ そうすると、サーバーレンダリング時にも、あるものとして取得して表示できるし、クライアント側でも問題ない。 ただし、ここでサーバーレンダリング時に呼び出したTokenが失敗すると、クライアント側でももう一度試すことになる…… さて……では、なぜDockerでは呼び出せないんだろう？\ とりあえず、私はTraefikを通してhttp.routersでHostを登録した。アクセスするドメインだ。\ そしてNuxt.jsのbackend.portを3000に設定して、domain:80にアクセスすると、そのコンテナの3000ポートにつながるようにした。 ここで、Dockerだけ絶対にtrueにならずfalseになる理由は、NuxtのDockerコンテナをリロードして接続するときに、HeaderにCookie値が一緒に送信されないからだと思う。 ``` req.headers.cookie ``` これ以外に答えはない……\ だったら、私がやるべきことは……DockerからTraefik経由で呼び出すときに、Cookie値も一緒に送信されるのか確認することだ…… はぁ……これ、GitHubのIssueに助けてくださいって書いたりしたんだけど……何も……ない……何もない……そもそもこのモジュール自体、人気がないみたいだ……今日は一晩中、Dockerを起動したりWindowsを起動したりして時間を全部使ってしまったけど……これは絶対にTraefikのCookieの部分だろう……今から調べに行く……絶対に解決してから寝る…… > あ……AuthorizationにはBearerでちゃんと入ってる……\ > 理由がわかった気がする……わかった……とにかくいろいろ検索した……\ > axiosのURLが間違っているんだ。なぜかというと……\ > そもそもDockerコンテナのネットワークはfrontendというブリッジ1つでつながっているのに、URLをバックエンドのHostにして呼び出しているから、呼び出せないんだ！！！！！！ > > これは20000%間違いない……。APIのURLはDockerネットワークのアドレスに設定しないといけない…… さて……では、通常サービスを提供するときは外部から接続できるので、URLを使ってもうまくいくはずだ……\ でもDEV環境ではlocalhost……外部から接続できないから、コンテナ同士をつないでおかないといけないのかな？？ Traefikで提供しているのかな……？調べてみよう…… つまり……SSR（Dockerコンテナ）からapi.dev.localhostにアクセスできないということだ。\ でもクライアントはホストなので、Traefik経由でapi.dev.localhostにつながるようにしてある…… だからDockerのサーバー側ではapi.dev.localhostを呼び出せず、セッションが切れたものとして処理され続けるんだ…… > > > それで、対処した方法は……\ > docker-composeファイルでlinksを設定した。\ > **links:\ > \- backend:api.dev.localhost**\ > そうしたら……nuxt.jsからping api.dev.localhostが問題なく通る！！\ > external_hostsでできるかなと思ったけど……linksで対処した……\ > 不思議なのは、hostsに登録されていないのに動くことだ……なぜだ……？ ``` root@3bd110d9aaef:/app# cat /etc/hosts 127.0.0.1 localhost ::1 localhost ip6-localhost ip6-loopback fe00::0 ip6-localnet ff00::0 ip6-mcastprefix ff02::1 ip6-allnodes ff02::2 ip6-allrouters 172.22.0.4 3bd110d9aaef ``` とにかく、こうすればnuxt.config.jsファイルの ``` axios: { baseURL: 'http://api.dev.localhost/api/v1', }, ``` baseURLも変更しなくていい……\ はぁ……この問題で、結局午前1時から8時まで……苦労した……。でも、解決できたのはよかった……本当によかった…… でも……またいつか別の問題が起きる（？）ような気もする……\ とりあえず……今日までにLaravel BackendとNuxt.js Frontendを……Docker化した……\ （ふぅ……寝て起きたら、リフレッシュトークンとかいろいろ処理しないといけなさそうだ……）\ SSRって、リロードしたときにサーバーから読み込むものが1つ、クライアント側が1つで、結局2つ作らないといけないんだなと思ったりもする……頭が痛いな……うーん…… それと追加で……Auth Configで ``` 'resetOnError': true, ``` と設定すると、トークンでpayloadを取得できなかった場合、すぐにトークンを消してしまう。（クライアント側でも試さないようにする） 考えているリフレッシュ方法はあるんだけど……\ resetOnErrorオプションを有効にして、バックエンドでリロードしたときに、すぐ新しいトークン値に切り替えると同時にデータも取得して、そのままトークンを登録したい……\ それに、クライアント側ではどう処理すればいいんだろう……？

ほかの記事