Nuxtで特定パス配下にサイトを公開する際の設定

はじめに

最近、Nuxtを利用してサイトを作りましたが、諸事情によりドメインのルート配下ではなく、特定パス配下で公開する必要がありました。ルーティングに加えて、今回導入していたPWAにおいても設定が必要でしたので、そのメモです。

想定するサイト公開URL

https://yourdomain.com/yourpath

サイト開発環境

• Nuxt
• @nuxtjs/pwa
• (@nuxtjs/onesignal)

設定内容

/*
** Module configuration
*/
modules: [
  '@nuxtjs/onesignal', // OneSignalを使う場合は追加
  '@nuxtjs/pwa'
],

/*
** OneSignalを使う場合は追加
** Web Push(OneSignal) configuration
*/
oneSignal: {
  // ...省略
  path = '/yourpath';
  importScripts = ['/yourpath/sw.js']; // onesignal用のスクリプトの中でswが読み込まれるようになる
},

/*
** workbox configuration
*/
workbox: { 
  // ...省略
  swURL: '/yourpath/sw.js', // これを設定しないとswのregistrationでうまくいかない
  swScope: '/yourpath' // スコープは通常公開パスに設定されるが、一応明示的に指定
},

/*
** route configuration
*/
router: {
  base: "/yourpath/", // ここを設定しないとサイトが表示されない
},

/*
** PWA configuration
*/
manifest: {
  // ...省略
  start_url: "/yourpath/" // ←最後の'/'が非常に重要。忘れると※1のようなエラーが発生
},

※1:
User will not be prompted to Install the Web App
Service worker does not successfully serve the manifest's start_url

おわりに

Nuxt良いですね。サイトをささっと作ってしまいたいときに、面倒な作業は既に設定済みで開発に集中できる感があります。