Posted at

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

More than 1 year has passed since last update.


はじめに

最近、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良いですね。サイトをささっと作ってしまいたいときに、面倒な作業は既に設定済みで開発に集中できる感があります。