header
HikariBlog
Webエンジニア向けブログ
フロントエンド

push-dirを使ってNuxtJSのプロジェクトをGitHub Pagesで公開する!

nuxtjs-github-pages

Nuxtのプロジェクトの動作確認をするのにAWS使うのはちょっとめんどくさいなって思ったときにGitHub Pagesの存在を思い出しました。

そこで今回はNuxtJSのプロジェクトをGitHub Pagesで公開する方法について解説していきます!

push-dirをインストール

指定したディレクトリ配下を指定したブランチにプッシュしてくれるpush-dirをインストールします。

# npmの場合
$ npm install --save-dev push-dir

# yarnの場合
$ yarn add --dev push-dir

deploy用のコマンドを追加

package.jsonのscriptsにdeployコマンドを追加します。

  "scripts": {
    ︙
    "deploy": "nuxt generate && push-dir --dir=dist --branch=gh-pages --cleanup"
  }

「distを正常に生成できたらdist配下をgh-pagesというブランチにプッシュする」というコマンドです。

もし出力するディレクトリを変更している場合はdist部分を変更してください。

ベースパス(BASE_URL)の修正

そのまま反映するとパスが違ってファイルを参照できないので設定を変更しておきます。

GitHub Pagesを使うのは1つの環境だけだと思うので環境ごとにベースパスを設定できるようにしました。

envファイルの作成

まずは環境変数を設定するファイルを作成します。

GitHub Pagesを利用する環境のBASE_URLにはリポジトリ名を指定します。

今回はsample-repositoryという名前のリポジトリで、開発環境としてGitHub Pagesを利用する想定です。

作成済みの場合はBASE_URLだけ定義してください!

module.exports = {
  BASE_URL: '/'
}
module.exports = {
  BASE_URL: '/sample-repository/'
}
module.exports = {
  BASE_URL: '/'
}

利用する環境だけBASE_URLを指定します。

nuxt.config.tsの設定変更

定義したenvファイルをnuxt.config.tsから読み込みます。(ついでに環境情報をログに出力しちゃう)

const environment = process.env.NODE_ENV || 'local'
// eslint-disable-next-line @typescript-eslint/no-var-requires
const env = require(`./env/${environment}.ts`)

// eslint-disable-next-line no-console
console.log(`Run Mode: ${environment}`)

faviconとrouterの設定を変更。

    link: [
      { rel: 'icon', type: 'image/x-icon', href: `${env.BASE_URL}favicon.ico` }
    ]
  router: {
    base: env.BASE_URL
  }

修正を加えると全体はこんな感じにあります。

import type { NuxtConfig } from '@nuxt/types'

const environment = process.env.NODE_ENV || 'local'
// eslint-disable-next-line @typescript-eslint/no-var-requires
const env = require(`./env/${environment}.ts`)

// eslint-disable-next-line no-console
console.log(`Run Mode: ${environment}`)

const config: NuxtConfig = {
  build: {},
  buildModules: [
    '@nuxtjs/composition-api/module',
    '@nuxt/typescript-build'
  ],
  css: [],
  env: {},
  head: {
    title: 'nuxt-community/typescript-template',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'A boilerplate to start a Nuxt+TS project quickly' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: `${env.BASE_URL}favicon.ico` }
    ]
  },
  loading: { color: '#0c64c1' },
  modules: [],
  plugins: [
    '~/plugins/truncate'
  ],
  router: {
    base: env.BASE_URL
  }
}

export default config

デプロイして公開!

最後にdeployコマンドを実行!

変更差分はコミットしておかないとエラーになります!

発生するエラーについてはこちら。

# npmの場合
$ npm run deploy

# yarnの場合
$ yarn deploy

完了したら、GitHubのSettingsのPagesから確認してみてください。

デプロイされている資材はgh-pagesブランチにプッシュされています。

あとがき

正直にお伝えするとPrivateリポジトリで行ったため表示までは確認できていないのですが、エラーは出ていないので問題ないと思ってます。

もし動かなかったら参考文献や他の方の記事を参照していただければと…

参考文献

https://upd.world/nuxtjs-deploy-gh-pages/

https://qiita.com/Ancient_Scapes/items/fe18bae043e4d35f1e39