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.*

• ルートディレクトリ下のstaticディレクトリにアプリアイコンを追加

  • android-chrome-192x192.png
  • android-chrome-512x512.png
  • apple-touch-icon-120x120.png
  • apple-touch-icon-152x152.png
  • apple-touch-icon-180x180.png
  • apple-touch-icon-60x60.png
  • apple-touch-icon-76x76.png
  • apple-touch-icon.png
  • favicon-16x16.png
  • favicon-32x32.png
  • favicon.ico
  • msapplication-icon-144x144.png
  • mstile-150x150.png

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を確認

• https://.github.io/<repository-name>