概要

主題の環境で画像やらフォントなどの非テキストファイルがバグることがあるため検証を行った。

私はインフラエンジニアなのでフロントのことはよくわからないふりをしているけれど、アーキテクトとしてその「しくみ」は知りたいと思う。

nuxtバリバリやってるひとからしたらなんでこんなことも知らないんだと思われることもあると思いますが、乞うご容赦。

nuxt3の準備

morgan:kujirabo yamamotodin$ npx nuxi@latest init nuxt-pj
Need to install the following packages:
nuxi@3.14.0
Ok to proceed? (y) 


✔ Which package manager would you like to use?
npm
◐ Installing dependencies...                                                                                                                                         3:34:07 PM
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm warn deprecated are-we-there-yet@2.0.0: This package is no longer supported.
npm warn deprecated gauge@3.0.2: This package is no longer supported.
npm warn deprecated npmlog@5.0.1: This package is no longer supported.
npm warn deprecated glob@8.1.0: Glob versions prior to v9 are no longer supported

> postinstall
> nuxt prepare

✔ Types generated in .nuxt                                                                                                                                          3:35:27 PM

added 642 packages, and audited 644 packages in 1m

125 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
✔ Installation completed.                                                                                                                                           3:35:27 PM

✔ Initialize git repository?
Yes
ℹ Initializing git repository...                                                                                                                                    3:35:32 PM

hint: Using 'master' as the name for the initial branch. This default branch name
hint: is subject to change. To configure the initial branch name to use in all
hint: of your new repositories, which will suppress this warning, call:
hint: 
hint: 	git config --global init.defaultBranch <name>
hint: 
hint: Names commonly chosen instead of 'master' are 'main', 'trunk' and
hint: 'development'. The just-created branch can be renamed via this command:
hint: 
hint: 	git branch -m <name>
Initialized empty Git repository in /Users/yamamotodin/IdeaProjects/kujirabo/nuxt-pj/.git/
                                                                                                                                                                     3:35:32 PM
✨ Nuxt project has been created with the v3 template. Next steps:
 › cd nuxt-pj                                                                                                                                                        3:35:32 PM
 › Start development server with npm run dev                                                                                                                         3:35:32 PM
morgan:nuxt-pj yamamotodin$ 
morgan:kujirabo yamamotodin$ cd nuxt-pj/
morgan:nuxt-pj yamamotodin$ ls
README.md		node_modules		package-lock.json	public			tsconfig.json
app.vue			nuxt.config.ts		package.json		server
morgan:nuxt-pj yamamotodin$ npm i

> postinstall
> nuxt prepare

✔ Types generated in .nuxt                                                                                                                                          3:36:06 PM

added 1 package, and audited 645 packages in 2s

125 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
morgan:nuxt-pj yamamotodin$ 
morgan:nuxt-pj yamamotodin$ cat package.json 
{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "nuxt": "^3.13.0",
    "vue": "latest",
    "vue-router": "latest"
  }
}

動作確認

morgan:nuxt-pj yamamotodin$ npm run dev

> dev
> nuxt dev

Nuxt 3.13.2 with Nitro 2.9.7                                                                                                                                         3:38:33 PM
                                                                                                                                                                     3:38:33 PM
  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

  ➜ DevTools: press Shift + Option + D in the browser (v1.5.1)                                                                                                       3:38:34 PM

✔ Vite client built in 15ms                                                                                                                                         3:38:34 PM
✔ Vite server built in 256ms                                                                                                                                        3:38:35 PM
✔ Nuxt Nitro server built in 325 ms                                                                                                                           nitro 3:38:35 PM
ℹ Vite client warmed up in 0ms                                                                                                                                      3:38:35 PM
ℹ Vite server warmed up in 290ms                                                                                                                                    3:38:35 PM

問題の詳細

さて。。２０２４年９月２９日現在脳死状態でnuxtのプロジェクトを作成するとバージョンは Nuxt 3.13.2 with Nitro 2.9.7 となる。

かつて問題が起こったプロジェクトのバージョンは Nuxt 3.11.2 with Nitro 2.9.7 でした。
おそらく・・半年前くらいじゃないかな・・

github の issueでいうと下記付近。

新しくビルドしたDevelopper ToolでHTTPのやりとりをみているけど、この中で壊れるファイルはフォントとfavicon.ico, PNGファイルなどで、favicon.icoにいたってはBASE64化していても壊れる・・というより途中で送信が崩れる。

特徴として、Content-Type の末尾に本来ありえない charset=utf-8 がつく。

こんなかんじに。

content-type: image/png; charset=utf-8

Build for Azure Function App

Azure Function Appむけにビルドしてこっかーー

morgan:nuxt-pj yamamotodin$ NITRO_PRESET=azure-functions npm run build

> build
> nuxt build

Nuxt 3.13.2 with Nitro 2.9.7                                                                                                                                         3:37:04 PM
ℹ Building client...                                                                                                                                                3:37:06 PM
ℹ vite v5.4.8 building for production...                                                                                                                            3:37:06 PM
ℹ ✓ 132 modules transformed.                                                                                                                                        3:37:07 PM
ℹ .nuxt/dist/client/manifest.json                   1.06 kB │ gzip:  0.30 kB                                                                                        3:37:07 PM
ℹ .nuxt/dist/client/_nuxt/error-500.B11Ibp8J.css    1.88 kB │ gzip:  0.72 kB                                                                                        3:37:07 PM
ℹ .nuxt/dist/client/_nuxt/error-404.ygbHJO5Q.css    3.56 kB │ gzip:  1.10 kB                                                                                        3:37:07 PM
ℹ .nuxt/dist/client/_nuxt/entry.DHr-p19c.css       12.40 kB │ gzip:  2.56 kB                                                                                        3:37:07 PM
ℹ .nuxt/dist/client/_nuxt/CjuaTOV7.js               3.39 kB │ gzip:  1.53 kB                                                                                        3:37:07 PM
ℹ .nuxt/dist/client/_nuxt/BHQlFJvE.js               9.25 kB │ gzip:  3.71 kB                                                                                        3:37:07 PM
ℹ .nuxt/dist/client/_nuxt/DlANLf8R.js             219.45 kB │ gzip: 62.69 kB                                                                                        3:37:07 PM
ℹ ✓ built in 693ms                                                                                                                                                  3:37:07 PM
✔ Client built in 699ms                                                                                                                                             3:37:07 PM
ℹ Building server...                                                                                                                                                3:37:07 PM
ℹ vite v5.4.8 building SSR bundle for production...                                                                                                                 3:37:07 PM
ℹ ✓ 48 modules transformed.                                                                                                                                         3:37:07 PM
ℹ .nuxt/dist/server/_nuxt/entry-styles.URl_9LWA.mjs             0.08 kB                                                                                             3:37:07 PM
ℹ .nuxt/dist/server/_nuxt/error-404-styles.DRLC0U6S.mjs         0.08 kB                                                                                             3:37:07 PM
ℹ .nuxt/dist/server/_nuxt/error-500-styles.DqmriZ_b.mjs         0.08 kB                                                                                             3:37:07 PM
ℹ .nuxt/dist/server/_nuxt/welcome-styles.CyAsta2g.mjs           0.15 kB                                                                                             3:37:07 PM
ℹ .nuxt/dist/server/_nuxt/error-404-styles.BcoFjqgl.mjs         0.15 kB                                                                                             3:37:07 PM
ℹ .nuxt/dist/server/_nuxt/error-500-styles.DPP87-Dp.mjs         0.15 kB                                                                                             3:37:07 PM
ℹ .nuxt/dist/server/styles.mjs                                  1.11 kB                                                                                             3:37:07 PM
ℹ .nuxt/dist/server/_nuxt/error-500-styles-1.mjs-DiWYPNRc.js    2.10 kB │ map:   0.12 kB                                                                            3:37:07 PM
ℹ .nuxt/dist/server/_nuxt/error-404-styles-1.mjs-D8Sw_W7I.js    3.80 kB │ map:   0.12 kB                                                                            3:37:07 PM
ℹ .nuxt/dist/server/_nuxt/error-500-DbYZHEVc.js                 4.54 kB │ map:   5.35 kB                                                                            3:37:07 PM
ℹ .nuxt/dist/server/_nuxt/entry-styles-1.mjs-Bf3o1wln.js       12.65 kB │ map:   0.11 kB                                                                            3:37:07 PM
ℹ .nuxt/dist/server/_nuxt/error-404-Cr8ITSt-.js                15.34 kB │ map:  28.35 kB                                                                            3:37:07 PM
ℹ .nuxt/dist/server/server.mjs                                124.45 kB │ map: 180.82 kB                                                                            3:37:07 PM
ℹ ✓ built in 298ms                                                                                                                                                  3:37:07 PM
✔ Server built in 319ms                                                                                                                                             3:37:07 PM
✔ Generated public .output/public                                                                                                                             nitro 3:37:07 PM
ℹ Building Nuxt Nitro server (preset: azure-functions)                                                                                                        nitro 3:37:07 PM
✔ Nuxt Nitro server built                                                                                                                                     nitro 3:37:08 PM
  ├─ .output/server/chunks/_/error-500.mjs (4.77 kB) (2.02 kB gzip)
  ├─ .output/server/chunks/_/error-500.mjs.map (190 B) (157 B gzip)
  ├─ .output/server/chunks/build/client.manifest.mjs (1.79 kB) (434 B gzip)
  ├─ .output/server/chunks/build/client.manifest.mjs.map (1.61 kB) (372 B gzip)
  ├─ .output/server/chunks/build/entry-styles-1.mjs-Bf3o1wln.mjs (12.6 kB) (2.65 kB gzip)
  ├─ .output/server/chunks/build/entry-styles-1.mjs-Bf3o1wln.mjs.map (118 B) (116 B gzip)
  ├─ .output/server/chunks/build/entry-styles.URl_9LWA.mjs (299 B) (200 B gzip)
  ├─ .output/server/chunks/build/entry-styles.URl_9LWA.mjs.map (208 B) (164 B gzip)
  ├─ .output/server/chunks/build/error-404-Cr8ITSt-.mjs (15.6 kB) (4.71 kB gzip)
  ├─ .output/server/chunks/build/error-404-Cr8ITSt-.mjs.map (338 B) (199 B gzip)
  ├─ .output/server/chunks/build/error-404-styles-1.mjs-D8Sw_W7I.mjs (3.79 kB) (1.22 kB gzip)
  ├─ .output/server/chunks/build/error-404-styles-1.mjs-D8Sw_W7I.mjs.map (122 B) (125 B gzip)
  ├─ .output/server/chunks/build/error-404-styles.BcoFjqgl.mjs (373 B) (209 B gzip)
  ├─ .output/server/chunks/build/error-404-styles.BcoFjqgl.mjs.map (238 B) (177 B gzip)
  ├─ .output/server/chunks/build/error-404-styles.DRLC0U6S.mjs (315 B) (205 B gzip)
  ├─ .output/server/chunks/build/error-404-styles.DRLC0U6S.mjs.map (216 B) (168 B gzip)
  ├─ .output/server/chunks/build/error-500-DbYZHEVc.mjs (4.64 kB) (1.92 kB gzip)
  ├─ .output/server/chunks/build/error-500-DbYZHEVc.mjs.map (196 B) (167 B gzip)
  ├─ .output/server/chunks/build/error-500-styles-1.mjs-DiWYPNRc.mjs (2.09 kB) (836 B gzip)
  ├─ .output/server/chunks/build/error-500-styles-1.mjs-DiWYPNRc.mjs.map (122 B) (124 B gzip)
  ├─ .output/server/chunks/build/error-500-styles.DPP87-Dp.mjs (371 B) (210 B gzip)
  ├─ .output/server/chunks/build/error-500-styles.DPP87-Dp.mjs.map (238 B) (178 B gzip)
  ├─ .output/server/chunks/build/error-500-styles.DqmriZ_b.mjs (315 B) (204 B gzip)
  ├─ .output/server/chunks/build/error-500-styles.DqmriZ_b.mjs.map (216 B) (165 B gzip)
  ├─ .output/server/chunks/build/server.mjs (127 kB) (23.2 kB gzip)
  ├─ .output/server/chunks/build/server.mjs.map (2.24 kB) (600 B gzip)
  ├─ .output/server/chunks/build/styles.mjs (1.14 kB) (371 B gzip)
  ├─ .output/server/chunks/build/styles.mjs.map (709 B) (251 B gzip)
  ├─ .output/server/chunks/build/welcome-styles.CyAsta2g.mjs (362 B) (204 B gzip)
  ├─ .output/server/chunks/build/welcome-styles.CyAsta2g.mjs.map (234 B) (175 B gzip)
  ├─ .output/server/chunks/routes/renderer.mjs (14.4 kB) (4.56 kB gzip)
  ├─ .output/server/chunks/routes/renderer.mjs.map (424 B) (226 B gzip)
  ├─ .output/server/chunks/runtime.mjs (165 kB) (40.2 kB gzip)
  ├─ .output/server/chunks/runtime.mjs.map (2.96 kB) (777 B gzip)
  ├─ .output/server/chunks/virtual/_virtual_spa-template.mjs (94 B) (100 B gzip)
  ├─ .output/server/chunks/virtual/_virtual_spa-template.mjs.map (112 B) (111 B gzip)
  ├─ .output/server/index.mjs (282 B) (186 B gzip)
  └─ .output/server/package.json (595 B) (293 B gzip)
Σ Total size: 1.79 MB (428 kB gzip)
✔ You can deploy this build using az functionapp deployment source config-zip -g <resource-group> -n <app-name> --src {{ output.dir }}/deploy.zip             nitro 3:37:08 PM

ご丁寧にデプロイコマンドまで教えてくれるんですね。

deploy.zip の中をみてみましょう。

morgan:nuxt-pj yamamotodin$ unzip -l .output/deploy.zip 
Archive:  .output/deploy.zip
  Length      Date    Time    Name
---------  ---------- -----   ----
       40  09-29-2024 06:37   deploy.zip
       58  09-29-2024 06:37   host.json
      328  09-29-2024 06:37   nitro.json
        0  09-29-2024 06:37   public/
        0  09-29-2024 06:37   public/_nuxt/
     9247  09-29-2024 06:37   public/_nuxt/BHQlFJvE.js
     3388  09-29-2024 06:37   public/_nuxt/CjuaTOV7.js
   219455  09-29-2024 06:37   public/_nuxt/DlANLf8R.js
        0  09-29-2024 06:37   public/_nuxt/builds/
       71  09-29-2024 06:37   public/_nuxt/builds/latest.json
        0  09-29-2024 06:37   public/_nuxt/builds/meta/
      139  09-29-2024 06:37   public/_nuxt/builds/meta/b04b6fe3-fa3f-4c25-974f-ea62b01a9077.json
    12395  09-29-2024 06:37   public/_nuxt/entry.DHr-p19c.css
     3556  09-29-2024 06:37   public/_nuxt/error-404.ygbHJO5Q.css
     1884  09-29-2024 06:37   public/_nuxt/error-500.B11Ibp8J.css
     4286  09-29-2024 06:37   public/favicon.ico
        1  09-29-2024 06:37   public/robots.txt
        0  09-29-2024 06:37   server/
        0  09-29-2024 06:37   server/chunks/
        0  09-29-2024 06:37   server/chunks/_/
     4773  09-29-2024 06:37   server/chunks/_/error-500.mjs
      190  09-29-2024 06:37   server/chunks/_/error-500.mjs.map
        0  09-29-2024 06:37   server/chunks/build/
     1789  09-29-2024 06:37   server/chunks/build/client.manifest.mjs
     1611  09-29-2024 06:37   server/chunks/build/client.manifest.mjs.map
    12643  09-29-2024 06:37   server/chunks/build/entry-styles-1.mjs-Bf3o1wln.mjs
      118  09-29-2024 06:37   server/chunks/build/entry-styles-1.mjs-Bf3o1wln.mjs.map
      299  09-29-2024 06:37   server/chunks/build/entry-styles.URl_9LWA.mjs
      208  09-29-2024 06:37   server/chunks/build/entry-styles.URl_9LWA.mjs.map
    15620  09-29-2024 06:37   server/chunks/build/error-404-Cr8ITSt-.mjs
      338  09-29-2024 06:37   server/chunks/build/error-404-Cr8ITSt-.mjs.map
     3791  09-29-2024 06:37   server/chunks/build/error-404-styles-1.mjs-D8Sw_W7I.mjs
      122  09-29-2024 06:37   server/chunks/build/error-404-styles-1.mjs-D8Sw_W7I.mjs.map
      373  09-29-2024 06:37   server/chunks/build/error-404-styles.BcoFjqgl.mjs
      238  09-29-2024 06:37   server/chunks/build/error-404-styles.BcoFjqgl.mjs.map
      315  09-29-2024 06:37   server/chunks/build/error-404-styles.DRLC0U6S.mjs
      216  09-29-2024 06:37   server/chunks/build/error-404-styles.DRLC0U6S.mjs.map
     4636  09-29-2024 06:37   server/chunks/build/error-500-DbYZHEVc.mjs
      196  09-29-2024 06:37   server/chunks/build/error-500-DbYZHEVc.mjs.map
     2094  09-29-2024 06:37   server/chunks/build/error-500-styles-1.mjs-DiWYPNRc.mjs
      122  09-29-2024 06:37   server/chunks/build/error-500-styles-1.mjs-DiWYPNRc.mjs.map
      371  09-29-2024 06:37   server/chunks/build/error-500-styles.DPP87-Dp.mjs
      238  09-29-2024 06:37   server/chunks/build/error-500-styles.DPP87-Dp.mjs.map
      315  09-29-2024 06:37   server/chunks/build/error-500-styles.DqmriZ_b.mjs
      216  09-29-2024 06:37   server/chunks/build/error-500-styles.DqmriZ_b.mjs.map
   127063  09-29-2024 06:37   server/chunks/build/server.mjs
     2238  09-29-2024 06:37   server/chunks/build/server.mjs.map
     1139  09-29-2024 06:37   server/chunks/build/styles.mjs
      709  09-29-2024 06:37   server/chunks/build/styles.mjs.map
      362  09-29-2024 06:37   server/chunks/build/welcome-styles.CyAsta2g.mjs
      234  09-29-2024 06:37   server/chunks/build/welcome-styles.CyAsta2g.mjs.map
        0  09-29-2024 06:37   server/chunks/routes/
    14386  09-29-2024 06:37   server/chunks/routes/renderer.mjs
      424  09-29-2024 06:37   server/chunks/routes/renderer.mjs.map
   164605  09-29-2024 06:37   server/chunks/runtime.mjs
     2957  09-29-2024 06:37   server/chunks/runtime.mjs.map
        0  09-29-2024 06:37   server/chunks/virtual/
       94  09-29-2024 06:37   server/chunks/virtual/_virtual_spa-template.mjs
      112  09-29-2024 06:37   server/chunks/virtual/_virtual_spa-template.mjs.map
      242  09-29-2024 06:37   server/function.json
      282  09-29-2024 06:37   server/index.mjs
       97  09-29-2024 06:37   server/index.mjs.map
        0  09-29-2024 06:37   server/node_modules/
        0  09-29-2024 06:37   server/node_modules/@babel/
        0  09-29-2024 06:37   server/node_modules/@babel/parser/
        0  09-29-2024 06:37   server/node_modules/@babel/parser/lib/
   486286  09-29-2024 06:37   server/node_modules/@babel/parser/lib/index.js
     1382  09-29-2024 06:37   server/node_modules/@babel/parser/package.json
        0  09-29-2024 06:37   server/node_modules/@unhead/
        0  09-29-2024 06:37   server/node_modules/@unhead/dom/
        0  09-29-2024 06:37   server/node_modules/@unhead/dom/dist/
     6494  09-29-2024 06:37   server/node_modules/@unhead/dom/dist/index.mjs
      925  09-29-2024 06:37   server/node_modules/@unhead/dom/package.json
        0  09-29-2024 06:37   server/node_modules/@unhead/shared/
        0  09-29-2024 06:37   server/node_modules/@unhead/shared/dist/
    22650  09-29-2024 06:37   server/node_modules/@unhead/shared/dist/index.mjs
     1013  09-29-2024 06:37   server/node_modules/@unhead/shared/package.json
        0  09-29-2024 06:37   server/node_modules/@unhead/ssr/
        0  09-29-2024 06:37   server/node_modules/@unhead/ssr/dist/
     2881  09-29-2024 06:37   server/node_modules/@unhead/ssr/dist/index.mjs
      925  09-29-2024 06:37   server/node_modules/@unhead/ssr/package.json
        0  09-29-2024 06:37   server/node_modules/@vue/
        0  09-29-2024 06:37   server/node_modules/@vue/compiler-core/
        0  09-29-2024 06:37   server/node_modules/@vue/compiler-core/dist/
   196259  09-29-2024 06:37   server/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js
     1408  09-29-2024 06:37   server/node_modules/@vue/compiler-core/package.json
        0  09-29-2024 06:37   server/node_modules/@vue/compiler-dom/
        0  09-29-2024 06:37   server/node_modules/@vue/compiler-dom/dist/
    20992  09-29-2024 06:37   server/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.prod.js
     1401  09-29-2024 06:37   server/node_modules/@vue/compiler-dom/package.json
        0  09-29-2024 06:37   server/node_modules/@vue/compiler-ssr/
        0  09-29-2024 06:37   server/node_modules/@vue/compiler-ssr/dist/
    45298  09-29-2024 06:37   server/node_modules/@vue/compiler-ssr/dist/compiler-ssr.cjs.js
      728  09-29-2024 06:37   server/node_modules/@vue/compiler-ssr/package.json
        0  09-29-2024 06:37   server/node_modules/@vue/reactivity/
        0  09-29-2024 06:37   server/node_modules/@vue/reactivity/dist/
    47864  09-29-2024 06:37   server/node_modules/@vue/reactivity/dist/reactivity.cjs.prod.js
     1316  09-29-2024 06:37   server/node_modules/@vue/reactivity/package.json
        0  09-29-2024 06:37   server/node_modules/@vue/runtime-core/
        0  09-29-2024 06:37   server/node_modules/@vue/runtime-core/dist/
   194136  09-29-2024 06:37   server/node_modules/@vue/runtime-core/dist/runtime-core.cjs.prod.js
     1254  09-29-2024 06:37   server/node_modules/@vue/runtime-core/package.json
        0  09-29-2024 06:37   server/node_modules/@vue/runtime-dom/
        0  09-29-2024 06:37   server/node_modules/@vue/runtime-dom/dist/
    49400  09-29-2024 06:37   server/node_modules/@vue/runtime-dom/dist/runtime-dom.cjs.prod.js
     1444  09-29-2024 06:37   server/node_modules/@vue/runtime-dom/package.json
        0  09-29-2024 06:37   server/node_modules/@vue/server-renderer/
        0  09-29-2024 06:37   server/node_modules/@vue/server-renderer/dist/
    24765  09-29-2024 06:37   server/node_modules/@vue/server-renderer/dist/server-renderer.cjs.prod.js
     1341  09-29-2024 06:37   server/node_modules/@vue/server-renderer/package.json
        0  09-29-2024 06:37   server/node_modules/@vue/shared/
        0  09-29-2024 06:37   server/node_modules/@vue/shared/dist/
    24120  09-29-2024 06:37   server/node_modules/@vue/shared/dist/shared.cjs.prod.js
     1097  09-29-2024 06:37   server/node_modules/@vue/shared/package.json
        0  09-29-2024 06:37   server/node_modules/devalue/
      141  09-29-2024 06:37   server/node_modules/devalue/index.js
      729  09-29-2024 06:37   server/node_modules/devalue/package.json
        0  09-29-2024 06:37   server/node_modules/devalue/src/
     2945  09-29-2024 06:37   server/node_modules/devalue/src/base64.js
      183  09-29-2024 06:37   server/node_modules/devalue/src/constants.js
     3919  09-29-2024 06:37   server/node_modules/devalue/src/parse.js
     5197  09-29-2024 06:37   server/node_modules/devalue/src/stringify.js
     7830  09-29-2024 06:37   server/node_modules/devalue/src/uneval.js
     2373  09-29-2024 06:37   server/node_modules/devalue/src/utils.js
        0  09-29-2024 06:37   server/node_modules/entities/
        0  09-29-2024 06:37   server/node_modules/entities/lib/
    22611  09-29-2024 06:37   server/node_modules/entities/lib/decode.js
     2312  09-29-2024 06:37   server/node_modules/entities/lib/decode_codepoint.js
        0  09-29-2024 06:37   server/node_modules/entities/lib/generated/
    47822  09-29-2024 06:37   server/node_modules/entities/lib/generated/decode-data-html.js
      377  09-29-2024 06:37   server/node_modules/entities/lib/generated/decode-data-xml.js
     2576  09-29-2024 06:37   server/node_modules/entities/package.json
        0  09-29-2024 06:37   server/node_modules/estree-walker/
        0  09-29-2024 06:37   server/node_modules/estree-walker/dist/
        0  09-29-2024 06:37   server/node_modules/estree-walker/dist/umd/
     7828  09-29-2024 06:37   server/node_modules/estree-walker/dist/umd/estree-walker.js
      847  09-29-2024 06:37   server/node_modules/estree-walker/package.json
        0  09-29-2024 06:37   server/node_modules/hookable/
        0  09-29-2024 06:37   server/node_modules/hookable/dist/
     8302  09-29-2024 06:37   server/node_modules/hookable/dist/index.mjs
     1299  09-29-2024 06:37   server/node_modules/hookable/package.json
        0  09-29-2024 06:37   server/node_modules/source-map-js/
        0  09-29-2024 06:37   server/node_modules/source-map-js/lib/
     3197  09-29-2024 06:37   server/node_modules/source-map-js/lib/array-set.js
     4714  09-29-2024 06:37   server/node_modules/source-map-js/lib/base64-vlq.js
     1540  09-29-2024 06:37   server/node_modules/source-map-js/lib/base64.js
     4249  09-29-2024 06:37   server/node_modules/source-map-js/lib/binary-search.js
     2339  09-29-2024 06:37   server/node_modules/source-map-js/lib/mapping-list.js
     4068  09-29-2024 06:37   server/node_modules/source-map-js/lib/quick-sort.js
    41580  09-29-2024 06:37   server/node_modules/source-map-js/lib/source-map-consumer.js
    14933  09-29-2024 06:37   server/node_modules/source-map-js/lib/source-map-generator.js
    13808  09-29-2024 06:37   server/node_modules/source-map-js/lib/source-node.js
    15403  09-29-2024 06:37   server/node_modules/source-map-js/lib/util.js
     2547  09-29-2024 06:37   server/node_modules/source-map-js/package.json
      405  09-29-2024 06:37   server/node_modules/source-map-js/source-map.js
        0  09-29-2024 06:37   server/node_modules/ufo/
        0  09-29-2024 06:37   server/node_modules/ufo/dist/
    19705  09-29-2024 06:37   server/node_modules/ufo/dist/index.mjs
     1212  09-29-2024 06:37   server/node_modules/ufo/package.json
        0  09-29-2024 06:37   server/node_modules/unhead/
        0  09-29-2024 06:37   server/node_modules/unhead/dist/
    23011  09-29-2024 06:37   server/node_modules/unhead/dist/index.mjs
     1046  09-29-2024 06:37   server/node_modules/unhead/package.json
        0  09-29-2024 06:37   server/node_modules/vue/
        0  09-29-2024 06:37   server/node_modules/vue/dist/
     2296  09-29-2024 06:37   server/node_modules/vue/dist/vue.cjs.js
     1774  09-29-2024 06:37   server/node_modules/vue/dist/vue.cjs.prod.js
      171  09-29-2024 06:37   server/node_modules/vue/index.js
       27  09-29-2024 06:37   server/node_modules/vue/index.mjs
     2822  09-29-2024 06:37   server/node_modules/vue/package.json
        0  09-29-2024 06:37   server/node_modules/vue/server-renderer/
       37  09-29-2024 06:37   server/node_modules/vue/server-renderer/index.mjs
        0  09-29-2024 06:37   server/node_modules/vue-bundle-renderer/
        0  09-29-2024 06:37   server/node_modules/vue-bundle-renderer/dist/
     7715  09-29-2024 06:37   server/node_modules/vue-bundle-renderer/dist/runtime.mjs
     1265  09-29-2024 06:37   server/node_modules/vue-bundle-renderer/package.json
      595  09-29-2024 06:37   server/package.json
---------                     -------
  2043753                     177 files

大きく分けて3つ。

host.json, nitro.json

前者はfunctionsで使うのかもしれないけどあまり意味のある情報は書いていない。

public/**

nitroサーバを通してブラウザに配られるが中身は全く同じであるため動きようのない静的資材であると推測。

server/**

今回SPAでHTMLをレンダリングするためのサーバ資材一式で、これがfunction appの中で動くnitro serverのコード。。。だと思う。

Azure Function Appのセットアップ

割愛。

Deploy

morgan:nuxt-pj yamamotodin$ az functionapp deployment source config-zip -g ******** -n nuxttest12345 --src .output/deploy.zip 
Setting SCM_DO_BUILD_DURING_DEPLOYMENT to false
App settings have been redacted. Use `az webapp/logicapp/functionapp config appsettings list` to view.
Waiting SCM site to be updated with the latest app settings
Getting scm site credentials for zip deployment
Starting zip deployment. This operation can take a while to complete ...
Deployment endpoint responded with status code 202
{
  "active": true,
  "author": "N/A",
  "author_email": "N/A",
  "complete": true,
  "deployer": "az_cli_functions",
  "end_time": "2024-09-29T07:10:05.5726701Z",
  "id": "734b9c7d-f666-4594-9c39-0962f3528cdd",
  "is_readonly": true,
  "is_temp": false,
  "last_success_end_time": "2024-09-29T07:10:05.5726701Z",
  "log_url": "https://nuxttest12345.scm.azurewebsites.net/api/deployments/734b9c7d-f666-4594-9c39-0962f3528cdd/log",
  "message": "Created via a push deployment",
  "progress": "",
  "received_time": "2024-09-29T07:09:42.4700631Z",
  "site_name": "nuxttest12345",
  "start_time": "2024-09-29T07:09:44.854041Z",
  "status": 4,
  "status_text": "",
  "url": "https://nuxttest12345.scm.azurewebsites.net/api/deployments/734b9c7d-f666-4594-9c39-0962f3528cdd"
}

確認

うーん・・ /favicon.ico 壊れてますね。

ステータスコードは 200 ok だけどなぜか content-typeに charset=utf-8 がつく。

再現完了、なおってねーってことでした（続く）

このファイルをcurlでダウンロードしてオリジナルと比較すると下記。

$ curl -v https://nuxttest12345.azurewebsites.net/favicon.ico -o favicon.ico
(前略)
> GET /favicon.ico HTTP/1.1
> Host: nuxttest12345.azurewebsites.net
> User-Agent: curl/8.7.1
> Accept: */*
(中略)
< HTTP/1.1 200 OK
< Content-Length: 4286
< Content-Type: image/vnd.microsoft.icon; charset=utf-8
< Date: Sun, 29 Sep 2024 07:14:44 GMT
< Server: Kestrel
< ETag: "10be-n8egyE9tcb7sKGr/pYCaQ4uWqxI"
< Last-Modified: Sun, 29 Sep 2024 06:37:07 GMT
< Request-Context: appId=cid-v1:db3848b8-99a8-411b-bba1-4bbfdcda1a10
< 
{ [3724 bytes data]
* Recv failure: Connection reset by peer
* LibreSSL SSL_read: LibreSSL/3.3.6: error:02FFF036:system library:func(4095):Connection reset by peer, errno 54
 88  4286   88  3790    0     0   4997      0 --:--:-- --:--:-- --:--:--  5000
* Closing connection
curl: (56) Recv failure: Connection reset by peer

比較する。

morgan:nuxt-pj yamamotodin$ ls -al favicon.ico 
-rw-r--r--  1 yamamotodin  staff  3790 Sep 29 16:14 favicon.ico
morgan:nuxt-pj yamamotodin$ ls -al .output/public/favicon.ico 
-rw-r--r--  1 yamamotodin  staff  4286 Sep 29 15:37 .output/public/favicon.ico

サイズ違う。
なお、function appの中をsshで見てみると、後者の正常なファイルが配置されていた。
そのため、output/server 以下の何かがバグってると推測する。

対処作として提案されているもの

Static Web App(SWA)を使えという話だが下記の２つの問題がある。
もともとSWAを使おうとしていたのよね

プランが Free, Standard, Dericated とあるが、前者２つはコールドスタート問題がきつい（だいたい平均１０秒）
Dericatedプランを使えば解決するが、Previewの機能で１サブスクリプションに１つまでなのと、１万円以上を固定費としてとられる。

特に２がの１サブスク１個までがきつい。以上によりSWAは破棄、解散！って感じ。

なぜWeb AppにせずFunction Appにしたかというと、スケールアウトを考えるのがめんどくさい＆現在の主流がそれを考えなくていい構成にしていくことだから。

え、じゃあどうしたらいいの？

CDNでnuxtの静的資材部分をblob storageにホスティングしてなんとかした。

最後に一言

私インフラエンジニアだからね？