LoginSignup
2
2

More than 5 years have passed since last update.

@horihiro(Hirofumi Horikawa)

Azure WebAppsにNuxt.js+Expressの環境をデプロイするために頑張ったメモ

Last updated at Posted at 2018-09-10

前置き

先日 @n0bisuke さんが Qiita に書いた記事「Azure Web AppsにNuxt.js+Expressの環境をDockerでデプロイしたときのメモ」に、

けっこうハマって@horihiroさんに色々質問して助けてもらいました。

と書いていただきましたが、実際は一緒にハマってた上、中が Windows の方の Web Apps と勘違いして、見当違いな調査をしてたりしました。
# n0bisuke さんが動かしたかったのは、Web Apps for Containers （前述の記事）、または App Service on Linux でした。

ただ、見当違いながら、Windows の方の Web Apps (以下、Web Apps)の方も調べた結果、いろいろ分かったのでメモとして残しておきます。

なぜ Web Apps で nuxt-community/express-template が動かないのか

いくつか理由があって、大まかにはこんな感じです。

  1. Web Apps の中の node.js は、名前付きパイプで listen してる。
  2. node.js から 自分自身に接続する時、"localhost" を使って接続できない。

Web Apps の中の node.js は、名前付きパイプで listen してる。

一つ目。
node.js の net.Server では、UnixSocket と 名前付きパイプで listen をサポートしています。
Web Apps では、node.js を動かす際にこの機能を使用しています。

これは、Web Apps 上で動かしている node.js のサーバーアプリ内で、

console.log(process.env.PORT);

などとやると、"\\.\pipe\foobar..." と出力されるので、すぐわかります。

node.js に限った話ではないですが、Web Apps では、クライアントからのリクエストを IIS で受信します。
それから各種ランタイムへリクエストが渡されるようなのですが、node.js の場合は、IIS から iisnode というモジュールを使用して node.js へリクエストが渡されます。

この時、iisnode と node.js の間は TCP/IP ではなく、名前付きパイプで通信します。

一方で、nuxt-community/express-template の package.json では、nuxt.js のバージョンに "latest" が指定されており、2018/09/10 時点では v1.4.2 がインストールされます。
しかしながら、nuxt.js での Unix Socket および、名前付きパイプのサポートは、現在 dev ブランチである v2 系列からのようです。

feat(core, cli): builtin support of https and unix sockets

なので、名前付きパイプをサポートしていない nuxt.js v1.4.2 を使っている限り、現在の nuxt-community/express-template の Web Apps 上での動作は難しいと思います。

じゃあ nuxt.js を v2 にしたら問題ないのか、と検証にしようとしましたが、うまくビルドすらできずに挫折しました。

node.js から 自分自身に接続する時、"localhost" を使って接続できない。

二つ目。
nuxt.js で SSR する時は、内部的な Web API 実行 (HTTP GET /api/users など ) を、"localhost" に向けてリクエストでおこなっているようです。
一方で、Web Apps では localhost への接続が、なぜかできません。
よって、SSR 時の API 実行が失敗します。

クライアントから Web API の実行はできる（GET /api/users は成功する）が、SSR したページが開かない（GET / は失敗する）時は、これを疑った方がいいです。

上記の通り、node.js は名前付きパイプで listen しているので、直接アクセスしたい場合は、SSR 時にも名前付きパイプに対してリクエスト実行すると "localhost" へのアクセスと同様の結果が得られると思います(が、未検証です)ました。

他の SSR エンジンも、内部的な API 実行を "localhost" 経由で行っている場合は失敗すると思うんですが、React とかもそうなんですかね？

じゃあどうしたら動くのか

nuxt.js と nuxt-community/express-template を独自に書き換える必要があります。

名前付きパイプでの listen ができるように、nuxt.js を Fork し、1.x 系でも名前付きパイプでも listen できるよう少し書き換えたのがこちら。

horihiro/nuxt.js
https://github.com/horihiro/nuxt.js

一方、nuxt-community/express-template で作ったテンプレートをベースに、SSR 時の API 実行を "localhost" ではなく Web Apps の FQDN名前付きパイプでアクセスする修正、および、nuxt.js 自体を上記の名前付きパイプ対応版に差し替えたのがこちら。

horihiro/nuxt-express-azure-webapps
https://github.com/horihiro/nuxt-express-azure-webapps

horihiro/nuxt-express-azure-webapps を Fork して、Deploy to Azure ボタンをクリック、で Azure へデプロイできるようにしたつもりです。
お試しあれ。

注意事項

上のリポジトリについて聞きたいこと、「動かねーじゃねーか」みたいな苦情があれば、Azure サポートではなく、この記事にコメントや、リポジトリに issue を挙げてください。
よろしくお願いいたします。

以下、関連ついーと

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
2