yasutomogのブログ

JavaScriptとAzureとPHPのメモ帳

Nuxt.jsでPWAをGitHub Pagesにコマンドでデプロイする流れ

概要

  • Nuxt.jsのテンプレートとPWAモジュールを使用して作成したアプリをGitHub Pagesにコマンドラインでデプロイする方法のまとめ

バージョン

  • node:10.12.0
  • nuxt.js:2.0.0
  • nuxtjs/pwa:2.6.0
  • push-dir:0.4.1
  • vue-cli:2.9.6
  • yarn:1.10.1

参考記事

https://pwa.nuxtjs.org/setup

ja.nuxtjs.org

方法

Nuxt.jsでプロジェクト生成

vue init nuxt-community/starter-template nuxt-pwa

PWAモジュールを追加

  • プロジェクトのルートディレクトリでpwaモジュールを追加
yarn add @nuxtjs/pwa
  • nuxt.config.jsに「modules」と「manifest」を追記
modules: [
  '@nuxtjs/pwa',
],
manifest: {
  name: 'yasutomog nuxt pwa',
  lang: 'ja'
},
  • .gitignoreに追記
sw.*

GitHubの準備

  • 本プロジェクト用のリポジトリ作成
  • masterブランチに生成したファイルとディレクトリをaddしてPush
  • gh-pagesブランチを作成

push-dirを追加

yarn add push-dir
  • nuxt.config.jsに「routerBase」を追記
const routerBase = process.env.DEPLOY_ENV === 'GH_PAGES' ? {
  router: {
    base: '/nuxt-pwa/'
  }
} : {}

module.exports = {
  ...routerBase,
  • package.jsonのscriptsにGitHub Pages用のdeployとgenerateとbuildコマンドを追記
"scripts": {
  "deploy": "push-dir --dir=dist --branch=gh-pages --cleanup",
  "build:gh-pages": "DEPLOY_ENV=GH_PAGES nuxt build",
  "generate:gh-pages": "DEPLOY_ENV=GH_PAGES nuxt generate"
},

PWAの生成とデプロイ

yarn run generate:gh-pages
yarn run deploy

GitHub Pagesを確認