menu-icon

Vue.jsで作ったPWAをGithub Pagesで公開する

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を作成します。

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部分を抜き出すと以下のようになります。

package.json
  "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で公開してみました。今回はアプリ部分は一切触っていませんが、これを雛型にすれば、簡単に独自のアプリが作れて便利だと思いました。