サンプルコードから基礎を学ぶ！Vue.js入門講座！【テンプレート構文編】
野田竣介
フェルメール株式会社
push-dirを使ってNuxtJSのプロジェクトをGitHub Pagesで公開する！
野田竣介
Nuxtのプロジェクトの動作確認をするのにAWS使うのはちょっとめんどくさいなって思ったときにGitHub Pagesの存在を思い出しました。
そこで今回はNuxtJSのプロジェクトをGitHub Pagesで公開する方法について解説していきます！
Contents
push-dirをインストール
指定したディレクトリ配下を指定したブランチにプッシュしてくれるpush-dirをインストールします。
# npmの場合
$ npm install --save-dev push-dir
# yarnの場合
$ yarn add --dev push-dirdeploy用のコマンドを追加
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を利用する想定です。
module.exports = {
BASE_URL: '/sample-repository/'
}
利用する環境だけ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リポジトリで行ったため表示までは確認できていないのですが、エラーは出ていないので問題ないと思ってます。
もし動かなかったら参考文献や他の方の記事を参照していただければと…
