未熟学生エンジニアのブログ

TetsuFeの個人開発ブログ

TetsuFeはテツエフイー と読みます。FlutterやWeb周り全般、チーム開発について語るブログ

Nuxt.jsサイトをTravis CI経由でGitHub pagesにデプロイする

やりたいこと

  • Nuxt.jsを使って作ったサイトをGithub Pagesで公開したい
  • レポジトリ名が「ユーザ名.github.io」以外のレポジトリでgithub pagesを使いたい
    • 最終的なルートURLはhttps://ユーザ名.github.io/レポジトリ名
  • masterにpushしたとき、Travis CIで自動デプロイしたい

Nuxt製サイトを作る

普通にNuxt製サイトを作りましょう

設定ファイルを書く

設定ファイルだけをいじります

package.json

{
  "name": "名前",
  "version": "1.0.0",
  "description": " A Nuxt.js Github.io site",
  "author": "ユーザ名",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },
  "dependencies": {
    "nuxt": "^1.0.0",
    //"vue-carousel": "^0.14.0",
    //"vue-scrollto": "^2.13.0"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.1",
    "eslint": "^4.15.0",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-vue": "^4.0.0"
  }
}

nuxt.config.js

module.exports = {

  /*
  ** Headers of the page
  */
  head: {
    title: 'タイトル',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: ' A Nuxt.js Github.io site' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  router: {base: '/レポジトリ名/'},
  /*
  ** Customize the progress bar color
  */
  loading: { color: '#3B8070' },
  /*
  ** Build configuration
  */
  build: {

    // vendor: ['vue-carousel', 'vue-scrollto'],
    /*
    ** Run ESLint on save
    */
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    },
      publicPath: '/レポジトリ名/_nuxt/',
  },

    plugins:
    [
      { src: '~/plugins/vue-carousel.js', ssr: false },
      '~/plugins/vue-scrollto.js',
    ]

}
if (process.env.DEPLOY_ENV === 'LOCAL') {
    module.exports['router']={base: '/'}
}

.travis.yml

language: node_js
node_js:
- "8"

cache:
  directories:
  - "node_modules"

branches:
  only:
  - master

install:
- npm install
- npm run generate

script:
- echo "Skipping tests"

deploy:
  provider: pages
  skip-cleanup: true
  github-token: $GITHUB_ACCESS_TOKEN #travisの環境変数GITHUB_ACCESS_TOKENにgithubのトークンを登録してください
  target-branch: gh-pages
  local-dir: dist
  on:
    branch: master

注意:ローカルで動かすときは $ DEPLOY_ENV=LOCAL nom run dev のように、環境変数を渡して起動してください。

重要な点

基本的には、nuxt.config.jsだけがちょっと特殊です。重要なところだけ抜き出します。

   // 略

 router: {base: '/レポジトリ名/'},

  // 略

 build: {
      // 略
      publicPath: '/レポジトリ名/_nuxt/',
  },

まず、今回はレポジトリ名が「ユーザ名.github.io」以外のレポジトリでgithub pagesを使いたいので、最終的なルートURLはhttps://ユーザ名.github.io/レポジトリ名 となります。つまり、ルートディレクトリが / ではなく、/レポジトリ名 となるのです。この場合、デフォルトの設定だと、パスが解決できなくなります。

具体的には、index,.html, jsファイルなどが見つけられなくなります。なので、以下のように設定を変更します。これで、https://ユーザ名.github.io/レポジトリ名 にアクセスしても普通にアクセスできます。

router: {base: '/レポジトリ名/'},

また、これだけだとjs, 画像ファイル等には依然としてアクセスできません。以下のように設定を変更します

 build: {
      // 略
      publicPath: '/レポジトリ名/_nuxt/',
  },

これで画像ファイル等にもアクセスできるようになります!