Vue で作成した Web アプリを GitHub Pages で公開

GitHub では Git を使ったソースコードの管理のほか、html／css／js 等で作成した Web アプリケーションを公開することもできます。Vue オンリーで作成したプロジェクトはこの条件を満たすので GitHub で公開できます。

前回、vue-cli を使用してプロジェクトの作成から GitHub への Push までを行いました。
www.shookuro.com

今回はこの Web アプリ（といっても vue create で作成される初期のアプリ）を Git Pages で公開する手順をメモしておきたいと思います。

GitHub Pages の 2 つの公開方法

アカウントに紐づくページ

アカウントごとに作成するページです。URL は「https://username.github.io」のようになります。（username はアカウント名）

開発者の自己紹介ページに利用されることが多いようです。

プロジェクトに紐づくページ

アカウントは複数のプロジェクト（＝リポジトリ）を持つことができます。

そのプロジェクトごとに作成するページです。URL は「https://username.github.io/repository」のようになります。（repository はリポジトリ名）

この記事ではこの「プロジェクトに紐づくページ」を公開したいと思います。

ビルド設定の変更

参考になりました。
vue-cliで作ったアプリをGithub Pagesにデプロイ - Qiita

ただこちらの記事は vue-cli2 用の記事です。vue-cli3 系では設定ファイル vue.config.js を新規で作成してあげる必要があります（最初設定ファイルが見つからなくってあせったw）。また、プロパティ名なども変わっているようなので注意してください。

まず、ビルド後のモジュールの出力フォルダですが、デフォルトだと /dist になります。
　
GitHub Pages の仕様として、プロジェクトフォルダ直下もしくは /docs フォルダにビルド後の index.html が置かれている必要があります。
　
したがって、出力フォルダを /dist から /docs に変更します。

もう一点、デフォルトだと js／css などリソースへのリンクが絶対パスで指定されてしまいます。これを相対パスに変更してやる必要があります。

上記を踏まえ新規作成した vue.config.js です。

module.exports = {
  outputDir: 'docs',
  assetsDir: './',
  publicPath: './'
}

ビルドします。成功しました。

C:\yyama\sample>npm run build

> sample@0.1.0 build C:\yyama\sample
> vue-cli-service build


-  Building for production...

 DONE  Compiled successfully in 4845ms


  File                                      Size             Gzipped

  docs\js\chunk-vendors.e85c779c.js         81.07 KiB        29.21 KiB
  docs\js\app.5288779e.js                   5.40 KiB         1.93 KiB
  docs\service-worker.js                    0.94 KiB         0.53 KiB
  docs\precache-manifest.c171b4841613173    0.54 KiB         0.27 KiB
  6ba5eb952bf4094a4.js
  docs\css\app.de1079fa.css                 0.33 KiB         0.23 KiB

  Images and other types of assets omitted.

 DONE  Build complete. The docs directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

GitHub に Push する

では commit して push しましょう。次のコマンドを打ちます。

git add .
git commit -m "docsフォルダへデプロイ先を変更。およびビルドした。"
git push

コマンド実行および出力結果はこのようになりました。

C:\yyama\sample>git add .

C:\yyama\sample>git commit -m "docsフォルダへデプロイ先を変更。およびビルドした。"
[master b97858e] docsフォルダへデプロイ先を変更。およびビルドした。
 26 files changed, 244 insertions(+)
 create mode 100644 docs/css/app.de1079fa.css
 create mode 100644 docs/favicon.ico
 create mode 100644 docs/img/icons/android-chrome-192x192.png
 create mode 100644 docs/img/icons/android-chrome-512x512.png
 create mode 100644 docs/img/icons/apple-touch-icon-120x120.png
 create mode 100644 docs/img/icons/apple-touch-icon-152x152.png
 create mode 100644 docs/img/icons/apple-touch-icon-180x180.png
 create mode 100644 docs/img/icons/apple-touch-icon-60x60.png
 create mode 100644 docs/img/icons/apple-touch-icon-76x76.png
 create mode 100644 docs/img/icons/apple-touch-icon.png
 create mode 100644 docs/img/icons/favicon-16x16.png
 create mode 100644 docs/img/icons/favicon-32x32.png
 create mode 100644 docs/img/icons/msapplication-icon-144x144.png
 create mode 100644 docs/img/icons/mstile-150x150.png
 create mode 100644 docs/img/icons/safari-pinned-tab.svg
 create mode 100644 docs/img/logo.82b9c7a5.png
 create mode 100644 docs/index.html
 create mode 100644 docs/js/app.5288779e.js
 create mode 100644 docs/js/app.5288779e.js.map
 create mode 100644 docs/js/chunk-vendors.e85c779c.js
 create mode 100644 docs/js/chunk-vendors.e85c779c.js.map
 create mode 100644 docs/manifest.json
 create mode 100644 docs/precache-manifest.c171b48416131736ba5eb952bf4094a4.js
 create mode 100644 docs/robots.txt
 create mode 100644 docs/service-worker.js
 create mode 100644 vue.config.js

Warning: Your console font probably doesn't support Unicode. If you experience strange characters in the output, consider switching to a TrueType font such as Consolas!

C:\yyama\sample>git push
Username for 'https://github.com': yyama694
Password for 'https://yyama694@github.com':
Counting objects: 15, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (14/14), done.
Writing objects: 100% (15/15), 157.40 KiB | 0 bytes/s, done.
Total 15 (delta 1), reused 0 (delta 0)
remote: Resolving deltas: 100% (1/1), completed with 1 local object.
To https://github.com/yyama694/sample
   2a3ecc8..b97858e  master -> master

GitHub プロジェクトの設定変更

公開するプロジェクト（リポジトリ）のトップページで「Settings」を選択します。
f:id:yyama1556:20190202153701p:plain

Settings のページに移動するので、タイトルが GitHub Pages のところまで下にスクロールします。Source のところがデフォルトでは None になっています。公開するために変更します。
f:id:yyama1556:20190202172539p:plain

選択肢として、master プランチ直下か master ブランチの /docs ディレクトリ配下が選べます。
f:id:yyama1556:20190202154333p:plain

今回は master ブランチの /docs ディレクトリを選択します。これで master ブランチ /docs 配下の index.html が（ソースだけでなく）Web ページとして公開されるはずです。選択したら Save ボタンを押しましょう。
f:id:yyama1556:20190202172648p:plain