Gatsby(React)の中にvue.jsを入れてNetlifyにデプロイする方法

March 29, 2020

とっても簡単な方法でGatsbyのなかにvue.jsのプロジェクトを入れることができる。

方法

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

vue-config.js

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

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

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

vue.jsをビルド

npm run build

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

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

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

 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ブログ上で公開できそうだ。

この記事をシェア:

author icon

仮想トイレ @CrypticToilet
プログラミングや仮想通貨のシステムトレードに関する情報を更新中!どんな情報を流しても詰まらないトイレ。