Nuxt.jsサイトをTravis CI経由でGitHub pagesにデプロイする
やりたいこと
- Nuxt.jsを使って作ったサイトをGithub Pagesで公開したい
- レポジトリ名が「ユーザ名.github.io」以外のレポジトリでgithub pagesを使いたい
- 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/', },
これで画像ファイル等にもアクセスできるようになります!