Azure Web Apps on Linux上のNuxt.jsを2系にアップグレードした際にハマったメモ


Azure Web Apps on Linux上にNuxt.jsの環境を構築してたのですが、2系にした際にバグってしまってハマったのでメモです。Nuxt.jsに限らずWeb Appsでバグったときの対処になるかもしれません。

Web Apps on LinuxのランタイムはNode.js v10.1.0です。

MSDNへの質問 https://social.msdn.microsoft.com/Forums/ja-JP/4a4da383-dda3-409d-896f-15f6cc8aeef6/webapps-on-linux12398210212639921270-nuxtjs?forum=windowsazureja

発生した内容

ローカルgitリポジトリからのpushでデプロイしているのですが、Nuxt.js 1.4系から2.0系にアップデートした際にエラーが発生しました。

ローカルからgit pushするとWeb Apps側ではファイルをコピーしたあとにnpm installが行われてモジュールたちのインストールが行われるのですが、ここでエラー発生しました。

↓git pushした際のログです。

・
・
省略
・
/bin/npm-cli.js" install --production
remote: ...................................................................................................................................................................................................................................................................
remote: npm WARN rollback Rolling back [email protected] failed (this is probably harmless): ENOTEMPTY: directory not empty, rmdir '/home/site/wwwroot/node_modules/cosmiconfig/node_modules/.bin'
remote: npm WARN [email protected] requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
remote:
remote: npm ERR! path /home/site/wwwroot/node_modules/cosmiconfig
remote: npm ERR! code EACCES
remote: npm ERR! errno -13
remote: npm ERR! syscall rename
remote: npm ERR! Error: EACCES: permission denied, rename '/home/site/wwwroot/node_modules/cosmiconfig' -> '/home/site/wwwroot/node_modules/.cosmiconfig.DELETE'
remote: npm ERR!  { Error: EACCES: permission denied, rename '/home/site/wwwroot/node_modules/cosmiconfig' -> '/home/site/wwwroot/node_modules/.cosmiconfig.DELETE'
remote: npm ERR!   cause:
remote: npm ERR!    { Error: EACCES: permission denied, rename '/home/site/wwwroot/node_modules/cosmiconfig' -> '/home/site/wwwroot/node_modules/.cosmiconfig.DELETE'
remote: npm ERR!      errno: -13,
remote: npm ERR!      code: 'EACCES',
remote: npm ERR!      syscall: 'rename',
remote: npm ERR!      path: '/home/site/wwwroot/node_modules/cosmiconfig',
remote: npm ERR!      dest: '/home/site/wwwroot/node_modules/.cosmiconfig.DELETE' },
remote: npm ERR!   stack: 'Error: EACCES: permission denied, rename \'/home/site/wwwroot/node_modules/cosmiconfig\' -> \'/home/site/wwwroot/node_modules/.cosmiconfig.DELETE\'',
remote: npm ERR!   errno: -13,
remote: npm ERR!   code: 'EACCES',
remote: npm ERR!   syscall: 'rename',
remote: npm ERR!   path: '/home/site/wwwroot/node_modules/cosmiconfig',
remote: npm ERR!   dest: '/home/site/wwwroot/node_modules/.cosmiconfig.DELETE',
remote: npm ERR!   parent: 'nuxt_express' }
remote: An error has occurred during web site deployment.
remote: npm ERR!
remote: npm failed
remote: npm ERR! Please try running this command again as root/Administrator.
remote:
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR!     /home/.npm/_logs/2018-09-22T12_57_42_812Z-debug.log
remote:
remote: App container will begin restart within 10 seconds.
remote: Error - Changes committed to remote repository but deployment to website failed.
To https://graspin-dev.scm.azurewebsites.net:443/graspin-dev.git
   329cefb1..a055e438  master -> master

こんな感じのエラーです。

この段階で試した内容(Linux操作周り)

色々調べたり試したりしましたが厳しかったです。scm管理画面からsshやbashでWebAppsのLinuxに入って色々やってみました。

  • npm ERR! Error: EACCES: permission deniedはだいたいsudoとかchmodとかchownとかで解消できるやつですが効かない
  • npm ERR! path /home/site/wwwroot/node_modules/cosmiconfigとかなってるけどcosmiconfigが悪さしてる雰囲気ではなさそう
  • node_modulesのキャッシュが消えてないのかなぁということも考えて、/home/.npm/home/site/wwwroot/node_modulesを消そうとしますが削除ができず
# rm -rf node_modules/

rm: cannot remove ‘node_modules/.bin’: Directory not empty
rm: cannot remove ‘node_modules/cosmiconfig/node_modules/.bin’: Directory not empty
・
・
・
  • /home/site/wwwroot/node_modules/.binがバグってる

なぜこういう状態になったのかは分からないですがバグってました。?????ってなんでしょうね。

とりあえず分かったのは 何故かWebAppsのサーバー側のファイルの初期化が上手くされない現象になってしまったということです。

うーん。。。どハマりと思ったのですが

新しくインスタンスを立てて真っさらな状態のWebAppsにデプロイしたら普通に動いた

という感じで 新規にインスタンスを立てたら普通にデプロイできました。

謎いですが、WebAppsのサーバー側が上手く初期化出来てないんだなぁとこれで原因箇所っぽいものを特定。

ただこれだと既存で開発してたインスタンスを捨てて乗り換えないといけないので既存インスタンスの初期化まわりを試してみました。

この段階で試した内容(WebAppsの管理画面)

  • WebAppsの再起動 -> 効果無し
  • WebAppsの停止後、しばらくして起動 -> 効果無し
  • WebAppsのランタイムを一度変更し、そのあとにNode.jsに戻す -> 効果無し
  • WebAppsのスケールアップ&ダウン -> 成功!

ということでスケールアップが有効でした。

WebAppsのプランを一度アップグレードしてブラウザでアクセスしてからタイムアウトするまで待機し、その後もともとのプランにダウングレードした形です。

これは分からなかった......

MSのエンジニアの方々に質問したらこの辺試してみなよっていうコメントをもらって試してみた(ありがとうございます!)感じなのですが、その辺の勘所は流石ですね。

ともかく、これでNuxt.js 2系にWebApps上でアップグレード出来ました。

アップグレード&ダウングレード後に調べてみましたが/home/site/wwwroot/node_modules/.binのバグりも解消です。

まとめ

今後の再現性あるのか謎ですが、 WebAppsのサーバーがバグってファイルが消せなくなった場合はスケールアップ&ダウンをしてあげると良さそうです。

スケール&ダウンをすることで裏で結びついてるサーバーが別のものに紐付けされる気がします。

補足: スケールアップ&ダウンの後に......

デプロイしたらエラーが変わりました。Error: Cannot find module 'consola'ってところだと思うのですが、その後何も変更せずに再度デプロイを試したら特にエラーがなくデプロイできました。その後さらに何回か試して1回このエラーが出ましたが、いまは通常通りデプロイできてます。

謎ですがこちらは今の所再現がもうできないのでひとまずはスルーかな...

・
・
・
remote: Resolved to version 6.0.1
remote: Running "/opt/nodejs/10.1.0/bin/node" "/opt/npm/6.0.1/node_modules/npm/bin/npm-cli.js" install --production
remote: ........................................................................................................
remote:
remote: > [email protected] postinstall /home/site/wwwroot/node_modules/nuxt
remote: npm WARN lifecycle The node binary used for scripts is /usr/bin/node but npm is using /opt/nodejs/10.1.0/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.
remote: > opencollective || exit 0
remote:
remote: file:///home/site/wwwroot/node_modules/nuxt/node_modules/@nuxtjs/opencollective/src/utils/misc.js:1
remote: Error: Cannot find module 'consola'
remote:
remote:     at Module._extensions..js (module.js:579:10)
remote: > [email protected] postinstall /home/site/wwwroot
remote: > cd /home/site/wwwroot && /opt/nodejs/10.1.0/bin/node ./node_modules/nuxt/bin/nuxt-build
remote:
remote: internal/modules/cjs/loader.js:573
remote:     throw err;
remote:     ^
remote:
remote: Error: Cannot find module 'consola'
remote:     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:571:15)
remote:     at Function.Module._load (internal/modules/cjs/loader.js:497:25)
remote:     at Module.require (internal/modules/cjs/loader.js:626:17)
remote:     at require (internal/modules/cjs/helpers.js:20:18)
remote:     at Object.<anonymous> (/home/site/wwwroot/node_modules/nuxt/bin/nuxt-build:3:17)
remote:     at Module._compile (internal/modules/cjs/loader.js:678:30)
remote:     at Object.Module._extensions..js (internal/modules/cjs/loader.js:689:10)
remote:     at Module.load (internal/modules/cjs/loader.js:589:32)
remote:     at tryModuleLoad (internal/modules/cjs/loader.js:528:12)
remote:     at Function.Module._load (internal/modules/cjs/loader.js:520:3)
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! [email protected] postinstall: `cd /home/site/wwwroot && /opt/nodejs/10.1.0/bin/node ./node_modules/nuxt/bin/nuxt-build`
remote: npm ERR! Exit status 1
remote: npm ERR!
remote: npm ERR! Failed at the [email protected] postinstall script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote:
remote: An error has occurred during web site deployment.
remote: npm ERR! A complete log of this run can be found in:
remote: npm failed
remote: npm ERR!     /home/.npm/_logs/2018-09-23T04_24_38_573Z-debug.log
remote:
remote: App container will begin restart within 10 seconds.
remote: Error - Changes committed to remote repository but deployment to website failed.

うーん...? https://github.com/nuxt/nuxt.js/blob/dev/bin/nuxt-build#L3