webpackでgithub pagesをdeployする際のハマりどころ(vue.js)

対象

jsプロジェクト自体を
$ vue init webpack my-projectのようにcliでwebpack利用で生成し、
すぐに

• yarn run dev
• yarn run build
  などの開発が進められる状態。
  つまりwebpackほぼ触らずに開発始めた方向けです。

github pagesとは

サーバー用意しなくても公開できるページです。便利ー。
公開方法については公式よくできているので一読おすすめ。

公開方法

公開ページをgh-pagesブランチにpushが一番楽そうです。

参考
npm run deploy で GitHub Pages にお手軽デプロイ

masterブランチにdocsフォルダ作ってcommit荒らすのも辛いですしね。

手順

# gh-pagesインストール
$ yarn add -D gh-pages

package.jsonを下記変更。

"scripts": {
    ..
    // "build": "node build/build.js",
    "build": "node build/build.js && gh-pages -d dist/",
    ..
  }

実行

# build & deploy
$ yarn run build

これでgh-pages ブランチが生成され
settingページにてgithub pagesのsource targetがgh-pages branch選択になり、
github pagesが公開されます。
(もしくはgh-pagesブランチの選択が可能になります。)

公開完了です。

ハマりどころ

404ページ

うまくdeployが反映されてないようです。

下記参考に、blanchの削除やらで対応が可能です。
How to fix page 404 on Github Page?

# 1. I deleted the gh-pages branch on github
$ git push origin --delete gh-pages

# 2. I deleted the gh-pages branch on local
$ git branch -D gh-pages

# 3. I reinitialized git
$ git init
..

# 追記: 再デプロイ
$ yarn run deploy

これでhtmlまでは表示されてほしい。

css & js リンクエラー

html自体は表示されているものの、css & jsのリンクが正しくない状況になっています。

なお、gh-pagesブランチに書き出されるdist/配下のファイル構成は

になっています。

原因

自分はgithub pagesのprojectページを作成する際に遭遇しました。
サーバ上のroot dirがhttps://USER_NAME.github.io/となっているので

<script type="text/javascript" src="/static/js/manifest.389f1daa6b4c0a2dd1d0.js"></script>

と指定しても、https://USER_NAME.github.io/static/js/xxxを読み込みに行ってまい、うまくいかない状態です。

解決方法

config/index.js あたりのbuild設定を調整しましょう。

module.exports = {
  build: {
    env: require('./prod.env'),
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    // assetsPublicPath: '/',
    assetsPublicPath: '',
    productionSourceMap: true,
...

上記のようにassetsPublicPath: '',に変更で

<script type="text/javascript" src="/static/js/manifest.389f1daa6b4c0a2dd1d0.js"></script>
↓
<script type="text/javascript" src="static/js/manifest.389f1daa6b4c0a2dd1d0.js"></script>

に変更され、正しく取得できます。

理屈的にはassetsPublicPath: '/PROJECT_NAME/',でもいいのですが、使い回せないので却下としました。

おわり

github pagesはしばらくアクセスしないと404ページになるという噂があったり、deployがうまくいかなかったりするのですが、それを差し引いても便利なのでハマりどころ抑えていきましょう。

次は、
vue-routerのgithub-pages用設定