方法

まずvue.jsプロジェクトにてルートディレクトリに vue.config.js があるかどうか確認。ない場合は新規作成で空のファイルを作る

ファイルを開いて次を追加。

module.exports = {
  publicPath: './',
}

注意： publicPath ではなく baseUrl で指定しているサイトが散見されますが、現在は publicPath での指定が推奨されています。公式リンク

vue.jsをビルド

npm run build

ルートディレクトリに出力される dist フォルダをコピー（ここにビルドが出力されている）

Gatsbyのstaticディレクトリにペースト

フォルダ名は自由に変更してよい。

これでGatsbyをNetlifyにプッシュしてビルド

これで完成。

staticフォルダはそのまま公開されるフォルダなので既にビルドしてあるものがダイレクトに公開される仕組み。

ホームのurl / ディレクトリ名 でvue.jsが動く。

vue.config.jsを設定しないと

アクセスはできるがなにも表示されない。パス関係がうまく解決しないようだ。

Gatsbyに限った話ではない

これはGatsbyに限った話ではなく静的なサーバーであればvue.config.jsさえ指定してあればアップロードしてアクセスさえできればvue.jsのwebアプリが起動できる。

なんならビルドしたローカルのディレクトリを開いてhtmlファイルをダブルクリックでも起動する。

bitFlyerの板可視化テストをデプロイした

前回の記事で作成した板の可視化プログラムを試しにGatsby配下にデプロイした。次のURLからアクセスできる。

https://ultra-noob.com/bitflyer/

vue.jsから直接bitFlyerのRealtime APIにsocket.ioで接続するようにコードを変更した。

データ通信は各自のブラウザから行われるため私のNetlifyサーバーへの負担はほぼないと思ってもらえば良いが高速なデータ通信が行われるので各自自己責任で使ってほしい。

実はCORS Originの制約によりアクセスが弾かれるかと思ったがなんの対策もなく私の環境から接続できている。

このあたりは何がダメで何が良いのかよく分かっていない。終わりよければ全て良しだ。

さいごに

これによりvue.jsで作るアプリもGatsbyブログ上で公開できそうだ。