Vue CLIのプロジェクト作成ではPWA(Progressive Web Apps)のサンプルが簡単に作れます。今回はVue CLIのインストールから、PWAサンプルプロジェクトの作成、作ったPWAをGithub Pagesで公開するまでの手順をメモしておきます。
なお前提としてNode.js環境は構築済みとします。
$ node -v
v12.18.0
$ npm -v
6.14.4
プロジェクト作成
まず、以下のコマンドでVue CLI
をインストールします(グローバルインストールしています)。
$ sudo npm install -g @vue/cli
インストールできたら、プロジェクトを作成します。今回はvue-sample
という名前にしました。
$ vue create vue-sample
コマンドを実行すると、presetの選択を指示されます。Manually select features
を選択します。

次に、Progressive Web App (PWA) Support
を選択状態にします。

後はデフォルトでEnter連打で大丈夫です。
プロジェクトが作成できたら、念のため表示を確認します。
$ cd vue-sample
$ npm run serve
http://localhost:8081/ へアクセスし、以下の画面が表示されれば大丈夫です。

表示を確認できたらGithubでリポジトリを作成して、そちらにpushしておきます。なお、リポジトリ名はGithub PagesのURLの一部として使用されます。今回はvue-sample
としています。

Github Pagesで公開する
サンプルのアプリをGithub Pagesで公開します。公開方法はいくつかありますが、今回は、gh-pages
ブランチを公開する方法を採用しました。
デプロイ用にビルドする
Github Pagesでホスティングする場合、URLがhttps://{ユーザー名}.github.io/{リポジトリ名}/
となります。一方、デフォルトの設定でビルドした場合、各種ファイル読み込み時のパスが/js/app.js
の形となっています。そのため、公開時に各種ファイルが読み込めない状態となります。
この問題を避けるため、コンフィグでpuclicPathの設定をします。プロジェクトのルートディレクトリ直下に、以下の内容でvue.config.js
を作成します。
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/vue-sample/'
: '/'
}
コンフィグが準備できたらビルドします。
$ npm run build
ビルドできたら、dist/index.html
の中身を確認してみます。すると、パスが/vue-sample/js/app.js
の形になっています。これでGithub Pagesで公開した場合に正常に動作するようになります。
gh-pagesを使用して公開する
ビルドしてできたファイル(dist
ディレクトリ下)を公開します。gh-pages
というツールを使用します。以下でインストールします。
$ npm install gh-pages --save-dev
インストールできたら、package.jsonのscriptsに"deploy": "gh-pages -d dist"
を追記します。scripts部分を抜き出すと以下のようになります。
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"deploy": "gh-pages -d dist"
},
準備できたら、デプロイしてみます。
$ npm run deploy
これで、distディレクトリの中身がgh-pages
ブランチとしてリポジトリに存在する状態となります。

Github Pagesで確認する
https://{ユーザー名}.github.io/{リポジトリ名}/
にアクセスして確認します(URLはリポジトリのSettingsでも確認できます)。

正常に表示が確認出来たら、せっかくなのでインストールしてみます。アドレスバーの+マークをクリックすることでインストールできます。

インストールすると、デスクトップにショートカットが作成され、起動すると上のように独立したウィンドウでアプリが開きます。
まとめ
Vue CLIでPWAのサンプルを作って、Github Pagesで公開してみました。今回はアプリ部分は一切触っていませんが、これを雛型にすれば、簡単に独自のアプリが作れて便利だと思いました。