next.js + firebase hosting + cloud function でPWAを実現したい

Question

前提・実現したいこと

next.js + firebase hosting + cloud function でPWAを実現したい

発生している問題・エラーメッセージ

こちらのnext.js+firebase hostingにservice-workerを追加してPWA化をしようとしています。しかし、hostingまでは動くのですが、service-worker.jsの実行が上手くいかず困っています。
https://github.com/zeit/next.js/tree/canary/examples/with-firebase-hosting

登録までの流れとしては
①nextのビルド時にworkboxを使ってservice-worker.jsファイルを作成して、
firebase hosting へデプロイを行うfunctionsフォルダ配下へnextフォルダごとコピー
②デプロイ後、_document.js内で、
navigator.serviceWorker.register('/service-worker')
を実行して/service-workerへfetch
③ /service-workerへのfetchをcloud functionで検知して、
service-worker.jsを実行

以上の流れになっています。

しかし、404エラーで登録に失敗しています。
おそらく、service-worker.jsのパスが上手く指定できていないことが原因だと思われますが、どのようにしたら登録が可能になるかお聞きしたいです。

エラーメッセージ
Service worker registration failed, error1:  TypeError: Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script.

該当のソースコード

ソースコード (functions/index.js)

const functions = require('firebase-functions');
const next = require('next');
import * as admin from 'firebase-admin';
const { join } = require('path');
const { parse } = require('url');
const express = require('express');

const routes = require('./routes');

// Region hosting next.js to cloud function

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev, conf: { distDir: 'next' } });
const handle = routes.getRequestHandler(app);

const server = express();
server.get('*', (req, res) => handle(req, res));
server.get('/service-worker', (req, res) => {
  // いくつかパスを書き換えて試してみましたが、いづれもうまく動きませんでした。
  // app.serveStatic(req, res, '_next/service-worker.js'),
  // app.serveStatic(req, res, 'next/service-worker.js');
  // app.serveStatic(req, res, '/service-worker.js');
  // app.serveStatic(req, res, '/next/service-worker.js');

  const filePath = join(__dirname , 'service-worker.js')
  app.serveStatic(req, res, filePath);
});

exports.next = functions.https.onRequest((req, res) => {
  console.log('File: ' + req.originalUrl); // log the page.js file that is being requested

  return app.prepare().then(() => {
    server(req, res);
  });
});

試したこと

プロジェクトの構成（firebase hosting へデプロイされるdistフォルダと、build前のフォルダ構成）

firebase.jsonの設定
{
  "hosting": {
    "public": "dist/public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "function": "next",
        "source": "**/**"
      }
    ],
    "predeploy": "npm run build-public"
  },
  "functions": {
    "source": "dist/functions",
    "predeploy":
    "npm run build-funcs && npm run build-app && npm run copy-deps && npm run install-deps"
  }
}

補足情報（FW/ツールのバージョンなど）

"next": "^6.1.1",
"next-offline": "^2.8.0",
"node": ">=8.1.4",
"npm": ">=5.4.2"
"next-routes": "^1.4.2",

Answer 1

functions/
  ├ index.js
  └ next/
    └ service-worker.js

のようなディレクトリ構造になっているなら

const filePath = join(__dirname , 'next/service-worker.js');
app.serveStatic(req, res, filePath);

__dirname で functions ディレクトリの絶対パスが取れてるはずなのでこれでいけると思います。

Comments

[tky5622]

ご回答ありがとうございます。
build後の構造はそのようになっているのですが、上記の修正では動作しませんでした。
ディレクトリ構造についての細くは画像で追加させていただきました。

Answer 2

自己解決しました。
server.get ＊　を削除したところ、適切にファイルを認識することができました。

Comments

[tky5622]

今回の場合は、server.getの順番でワイルドカードが順番的に上に配置されていたことが原因のようでした。
また、その他のmanifest.jsonなどの静的ファイルは基本的に、こちらのcloud function内でパスを通すことで参照できることもわかりました。