はじめに

最近Vue.jsを利用してwebアプリケーションを作成しているのですが、vue-cliというプロジェクト作成ツールがあったので今回それを利用して実際にリリースするまでやってみたので書いていきたいと思います。

今回リリースはherokuなどいろいろ考えたのですが、GitHubPagesを利用しました。

リリースしたサイト

※サイトの品質、ソースコードの品質はまだまだなのでそこには触れません

Netlifyでもリリースしました！

vue-cliでwebアプリケーションを作って、Netlifyを使って無料で爆速でリリースした話

GitHubPages

GitHubのリポジトリにpushするだけで、簡単にwebページを公開できるサービスです。

リポジトリ毎に公開できたり、アカウントに対して公開できたりします。

例えば下記ページは自分のvue.jsのリポジトリをGitHubPagesを利用して公開しました。

https://theimaginationwasunbroken.com/vue-sample/src/vuex-todo-sample/index.html

vue-sampleというのがリポジトリ名です。

https://github.com/tiwuofficial/vue-sample

公開しているページは、vue-sampleリポジトリのsrcディレクトリ配下のvuex-todo-sample配下のindex.htmlになります。

https://github.com/tiwuofficial/vue-sample/blob/master/src/vuex-todo-sample/index.html

今回はvue-cliで作成したコードをリポジトリにpushし、このGitHubPagesを利用し公開することでリリースとします。

※今回vue-cliメインなのでGitHubPagesの設定方法は書きません。リポジトリ設定画面で設定するだけなので適宜ぐぐって設定をお願いします。

vue-cli

vue-cliのインストール

$ npm install -g vue-cli

グローバルにvue-cliをインストールします。

vue-cliでプロジェクトの作成

vue initコマンドで作成します。

$ vue init <template-name> <project-name>

templateはいくつかあり、公式には下記が書いてありました。

webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.
browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
browserify-simple - A simple Browserify + vueify setup for quick prototyping.
pwa - PWA template for vue-cli based on the webpack template
simple - The simplest possible Vue setup in a single HTML file

webpackやbrowserifyを利用したプロジェクトや、PWAも作れるそうです。

今回は無難にwebpackを採用しました。

例

$ vue init webpack my-project

initコマンドを打つと下記のようにいろいろ聞かれます。

プロジェクト名や、プロジェクトの説明、Author名からVueのbuild形式にvue-router、ESLint、unit testやe2eテストなどなど。

特にカスタマイズしないのならすべてEnterやYesで問題ないと思います。

作成すると下記のコマンドを打てと言われるので、打ってみます。

$ cd my-project
$ npm install
$ npm run dev

npm installで必要なパッケージをインストールして、npm run devでコンパイルと開発サーバーの立ち上げが完了するので、コマンド打ち終わったらhttp://localhost:8080/にアクセスしてみましょう。

上記のように表示されたら成功です。

vue-cliでリリース

これで開発環境は完成しましたが、ではどやってリリースをすればいいのでしょうか？

リリースについては、webpackテンプレートのREADME.mdに書いてあります。

https://github.com/vuejs-templates/webpack

npm run build: Production ready build.

JavaScript minified with UglifyJS v3.
HTML minified with html-minifier.
CSS across all components extracted into a single file and minified with cssnano.
Static assets compiled with version hashes for efficient long-term caching, and an auto-generated production index.html with proper URLs to these generated assets.
Use npm run build --reportto build with bundle size analytics.

どうやらnpm run buildでリリースのためのビルドを行うそうです。

打ってみると下記のようにログがでます。

プロジェクトのディレクトリを見るとdistディレクトリの中にビルドされたファイルがあるのがわかります。

では、ビルドされたものを確認してみたいと思います。

生成されたのはhtmlとjsとcssなので、愚直にindex.htmlを普通に開いてみたいと思います。（file://~~~~/my-project/dist/index.htmlのようにブラウザからアクセス）

すると画面は真っ白です。

開発者ツールを開いてみると、どうやらjsやcssが取得できていません。

パスを見てみると、どうやら絶対パスでファイルを取得しにいっています。

実際にはfile://~~~~/my-project/dist/static/css/~~にあるので、確かにこれでは取得できません。

実はこれで取得できないのは、ビルド時に警告されていました。
※最初自分は見逃しており、ここでハマりました

Tip: built files are meant to be served over an HTTP server.
  Opening index.html over file:// won't work.

httpサーバーで使われるのを想定しているので、file://で開いたら動かないよと言っています。

※ただし、index.htmlに書かれている絶対パスを相対パスにすればfile://でも確認できます。

これは、http://hoge.com/直下にdist配下を置いて使えということです。

そうすれば、http://hoge.com/index.htmlになり、http://hoge.com/static/css/~~となるので、リリースは取得できます。

しかし、問題が有ります。

GitHubPagesではリポジトリ毎に作成すると、リポジトリ名が必ず付きます。

自分の場合だとこの作ったvue-cliのプロジェクトをまるごとリポジトリにpushすると

https://{ドメイン}/{リポジトリ名}/dist/index.html

となります。

jsやcssはhttps://{ドメイン}/{リポジトリ名}/dist/static/~~に置かれるので、index.htmlから取得できず、ローカルで確認したのと同様に真っ白になってしまいます。

毎回ビルドしてからindex.htmlの絶対パスを相対パスに書き換えるという方法もありますが、どうせなら相対パスでビルドしてほしいので設定ファイルを書き換えます。

書き換えるファイルは　config/index.jsです。

ここに、設定がいろいろ書かれています。

修正前

config/index.js

'use strict'
// Template version: 1.2.5
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
  dev: {
     // 省略
  },

  build: {
    // 省略

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    // 省略
  }
}

修正するのはbuildオブジェクト内の、assetsPublicPathです。

どうやら、ビルド時にassetsPublicPathとassetsSubDirectoryを連結させてjsやcssをhtmlのパスに書いています。（<script type=text/javascript src=/static/js/app.6aa71f84979aa8bb8b55.js>）

そのためassetsPublicPathを空にすると、assetsPublicPathとassetsSubDirectoryを連結させた際に<script type=text/javascript src=static/js/app.6aa71f84979aa8bb8b55.js>となり、相対パスになります。

修正後

config/index.js

'use strict'
// Template version: 1.2.5
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')

module.exports = {
  dev: {
     // 省略
  },

  build: {
    // 省略

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '',

    // 省略
  }
}

これで、GitHubPagesでリリースする準備ができました！

あとは、.gitignoreにdistディレクトリを無視する設定が書かれているのでそれを削除して、プロジェクトまるごとリポジトリにpushして、リポジトリの設定画面からGitHubPagesの公開設定をすればリリース完了です！

終わりに

プロジェクトの作成から、リリースまでやってみました。

実は今回リリースしたサイトは、画面読み込み時に画像のパスを生成しているのでビルド時にビルド対象外になったり、パスがおかしかったりいろいろ苦労しました・・・（webpackの理解が浅かった）

個人的な意見ですが物を作るときは開発環境の構築とリリースが難しいと感じています。

しかし、こういった便利なツールがいくつもでて誰でも簡単にできるのはいいなと思います！

じゃんじゃんつくって、公開していきましょう！

vue-cliでwebアプリケーションを作って、GitHubPagesで無料で爆速でリリースした話