GPT-3は、イーロン・マスク氏が共同会長を務める非営利のAI研究企業であるOpenAIが開発した大規模自然言語処理モデル。文章の次の言葉を予測する訓練を重ねており、少ない学習量で人間が書いたような文章を生成できる。関数名やコメントからコードを自動補完する米GitHubのAIプログラミング機能「GitHub Copilot」の基盤システムなどにも使われている。
OpenAIは2020年6月にAPIとして外部からの利用を可能にしたが、使用には人数制限をかけていた。
⇧ 門戸が広がるのはありがたいですね。
今回は、「Vue.js」と「Spring Boot」の連携についてです。
結論としては、上手く連携できていない状態なので、お時間のある方のみご照覧ください。
2021年11月21日（日）追記：↓ ここから
「Vue.js」と「Spring Boot」については、上手く連携できました。
ただ、データベースとの連携は未着手です。
2021年11月21日（日）追記：↑ ここまで
レッツトライ～。
Vue.jsとSpring Bootを連携してみる
Eclipseも動くようになってので、「Vue.js」と「Spring Boot」を連携してみました。
⇧ 上記サイト様を参考にさせていただきました。
ちなみに、自分の環境では、「Vue CLI」のインストールに必要な「npm」や「yarn」なんかを利用するために必要な「Node.js」のバージョン管理をするために「nvm-winodws」をインストールして、「nvm-windows」経由で「Node.js」をインストールしています。
というわけで、まずは、先に「Spring Boot」のプロジェクトを作成すれば良いらしいので、Eclipseを起動して、「ファイル(F)」>「新規(N)」>「その他(O)...」より、
「Spring Boot」>「Spring スターター・プロジェクト」を選択し、「次へ(N)>」を押下。
とりあえず、「Gradle」の「依存関係」は、
- Spring Data JPA
- PostgreSQL Driver
- Spring Web
を追加しておきました。
「Spring Boot」のプロジェクト（ビルドツールは「Gradle」）が作成できました。
「Shiftキー」を押しながら右クリックで、「パスのコピー」を選択。
で、コマンドプロンプトなどで、ディレクトリを移動して、「Vue CLI」をインストール。
⇧ 「Vue CLI」のバージョンは表示されたので、「Vue CLI」はインストールされた模様、ただし、「-g」オプションを付けずにインストールしたので、「node_module」は「vue_in_spring_boot」内にだけできる感じですかね。
で、「g」オプションを付けないと、「Vue CLI」にパスが通らないということで、Windows環境だと、「Vue CLI」をnpmでインストールした場合は、作成される「node_module」フォルダの中の「.bin」フォルダってところに「Vue CLI」の実行ファイルが配置されるらしい、分かり辛い...
というか、やんごとなき「g」オプション付きのインストールの情報ばかりなのが解せぬ...
実際の開発現場とかでは、複数バージョンとか使い分けを考慮する必要はないってことなんかな？
で、実行ファイルまでのフルパスを指定すれば「Vue CLI」のコマンドは実行できる模様。
では、「Vue.js」のプロジェクト作成で。自分は「Vue.js」のバージョン 2系を使っている環境なので、「Default （[Vue 2] babel, eslint）」を選択して「Enterキー」を押下。
「Vue.js」のプロジェクトが作成できたようです。
で、参考サイト様の通りにファイルを作成・編集します。
参考サイト様の説明にあるように「[Vue.jsのプロジェクトのファルダ]/package.json」を編集して、「src/main/resources/static」に、「Vue.js」のプロジェクトをビルドした後に作成されるファイル群が配置されるようにもしておきます。
で、「Vue.js」側のファイルをビルドするも、エラー。
で、少ししてから、もう一回、ビルドしたら、成功...
エラー起きてから、何も手を加えていないのに、謎過ぎる...
「npm build run failed issue」とかで調べても、皆さん言ってることが千差万別で、よう分からんな...PCのメモリ使用率が逼迫してることが原因で、ビルド失敗することがあるって情報があったので、自分の場合のビルド失敗ケースは、それに近いのかな？
で、Eclipseの「パッケージ・エクスプローラー」側を「F5キー」押して更新すると、「src/main/resources/static」直下に、「Vue.js」のプロジェクトをビルドした結果作成されるファイル群が配置されてました。
で、「Spring Bootプロジェクト」と「Vue.jsプロジェクト」を1つにまとめた「jar」ファイルが作成できるように、「[Spring Bootプロジェクト]/build.gradle」に「Gradle タスク」を追加して、
cd [Spring Bootのプロジェクトのルートディレクトリ]
gradlew bootJar
⇧「[Spring Bootプロジェクト]/build/libs」フォルダに、「jar」ファイルが配置されました。
で、「jar」ファイルの実行がなかなか上手くいかなかったのだけど、
なんか、「jar」ファイルまでのフルパスを指定して、実行したら動きました。
でもって、「Spring Boot」でエラー。
⇧ どうやら、「gradle.build」の「依存関係」に「Spring Data JPA」とか追加してるから、「データベース」の「接続設定」とかは必ず設定していないといけないらしい。
とりあえず、自分の場合は、最近、「PostgreSQL」という「RDBMS（Relational Database Management System）」で「データベース」を作成しているので、その「データベース」に接続するための設定を、「application.properties」ファイルに記載することにしておきます。
「ポート番号」とかは、デフォルトだと「5432」とかですが、自分の環境では、「PostgreSQL」を3つインストールしてることもあり、「ポート番号」変えてます。
で、再び、「jar」ファイルを作り直しで。
で、「jar」ファイルを実行で。
「ファイアーウォール」の警告が出たら、「アクセスを許可する(A)」を押下。
「Spring Boot」内蔵の「Apache Tomcat」という「アプリケーションサーバー」が起動した状態になるので、
ブラウザで「http://localhost:8080」にアクセスしてみるも、何も表示されませんと。
どうやら、「Vue CLI」で普通に「vue create [プロジェクト名]」とかして「Vue.js」のプロジェクトを作成しただけだと、
- Vue Router
- Vuetify
という「ライブラリ」はインストールされないらしい。
別途、自分でインストールが必要みたいね...初見の人間には分からんですな...
⇧ 上記サイト様を参考に「ライブラリ」をインストールしていきます。
で、おそらく、「Vue.js」のプロジェクトに作成されてる「node_modules」のほうにインストールされるようにすれば良いと思われるので、「Vue.jsのプロジェクトのルートディレクトリ（今回だと『vue_src』ディレクトリ）」に移動して、「npm install 〇〇」ってコマンドを実行すれば良いかと。
というわけで、コマンドプロンプトで「Ctrlキー」+「C」を押下で、「Spring Boot」内蔵の「Apache Tomcat」を停止して、「「Vue.jsのプロジェクトのルートディレクトリ」に移動して、
「Vue.jsのプロジェクトのルートディレクトリ」内にある「node_modules」フォルダに「vue-router」が追加されたようです。
続きまして、「Vuetify」ですが、
Vuetifyの現在のバージョンはVue 3をサポートしていません。 Vue3に対応する Vuetify v3 がリリース予定です。 新しいプロジェクトを作成する場合は、Vue CLI プロンプトから Vue 2 を選択したか、既存の Vue 2 プロジェクトにインストールすることを確認してください。
⇧ という情報があるのも、気にはなりつつも、問題はそんなことではなくて、
- Vue CLIによるインストール
- Vue UIによるインストール
- Nuxtでのインストール
- Webpackでのインストール
ってな感じで、インストールの方法がいろいろあり過ぎて、困惑しますと...
⇧ 上記サイト様を参考に、「npm install vuetify」でインストールしてみることに。
⇧「Vue.jsのプロジェクトのルートディレクトリ」内にある「node_modules」フォルダに「vue-router」が追加されたようです。
そしたらば、「[Vue.jsのプロジェクトのルートディレクトリ]/src/plugins/vuetify.js」を作っていく必要があるので、まずは「plugins」フォルダを作成で。
「フォルダ名(N):」を「plugins」として「完了(F)」を押下。
続いて、いま作成した「plugins」フォルダに「vuetify.js」を作成します。
「vuetify.js」を編集。
「main.js」にも変更が入りますと。（一番初めに参考にさせていただいたサイト様だと、だいぶ情報が端折られてたのね...必要な情報を端折られると自分のように前提知識の無い初見の人間には辛いなかな...）
というわけで、再び、「npm run build」して
⇧ ビルドはできたらしいけど、警告が気になりますな。
⇧ ということで、いずれの記事でも「webpack.config.js」で設定するのが良いとのことですが、現状、「webpack.config.js」ファイルが存在せずというね...
ここで、更なる混乱が...
⇧ 上記サイト様によりますと、「Vue CLI」を使って「Vue.js」の「プロジェクト」を作成している場合、「webpack.config.js」ではなく、「vue.config.js」を作成して設定していくことになるらしい...カオス過ぎる...
というわけで、「vue.config.js」を作成で。
「vue.config.js」を編集。
ただ、変わらず警告が出るのよね...
ちょっと、今回は、ビルド自体はできてるんで、時間ある時に「vue.config.js」の設定は確認するとして、警告を消す対応は飛ばします。
で、「jar」を再作成。
「jar」を実行。
ページは依然として、真っ白というね...
「router.js」の配置場所が間違ってました。「package.json」と同じ階層に配置されてないといけないようでした。
で、再度「npm build run」「gradlew bootjar」して「jar」ファイルを実行してみるも、初期画面が同様にして、真っ白のまま。
試しに、JavaのControllerクラスにリクエストしてみたら、レスポンスは返ってきてるようなので、「Vue.js」側が上手いこと機能してない模様。
ちょっと、時間の関係上、後日調査ですかね...
毎回思うのは、ちゃんと動作するのに必要な情報を端折らずに公開して欲しいのよね...
モヤモヤ感が半端ない...
2021年11月20日（土）23:40 追記：↓ ここから
⇧ 上記サイト様を参考に、以下のように「router.js」を「router/index.js」となるように配置し、「main.js」で「router/index.js」を読み込むように記載したら、「Vue.js」側も機能しました。（修正した後は、「npm run build」「gradlew bootjar」を再度行ってます。）
で、「jar」ファイルを実行して、ブラウザでアクセス。
「BLOG」ボタン押下したら、エラー出てるけど...
⇧ なんか、該当箇所を確認してみると、「this.axios.get("/blog/entries/latest")」って処理でエラーになってるらしい。
「axios」って何なのか調べてみたところ、「ライブラリ」の1つらしく、インストールしなくても使えるんかな？って思ったところ、
⇧ 上記サイト様によりますと、「axios」って「ライブラリ」をインストールする必要があるらしい...。
というわけでインストール。
⇧ インストールされた模様。
で、更に参考させていただいたコーディングで「Promise」を使ってるらしく、「Vue.js」で「Promise」使うには、「vue-axios」って「ライブラリ」も必要らしい。
というわけで、
「main.js」を編集。
で、再度「npm run build」「gradlew bootjar」を実行して、「jar」ファイルを作成したら、「jar」ファイルを実行。
で、ブラウザでアクセスして、「BLOG」ボタンを押下したら、無事、URLの遷移が行われページの内容が更新されました。
最終的に、「Vue.js」側には以下のようなファイルが作られました。
それにしても、ブログなんかで紹介されてる記事が、本当に動作確認してるのか気になりますな...
まぁ、せめて、インストールが必要な「ライブラリ」ぐらいは端折らずに説明して欲しいかな...
2021年11月20日（土）23:40 追記：↑ ここまで
2021年11月21日（日）追記：↓ ここから
最終的に「Vue.js」側のプロジェクトに追加でインストールした「ライブラリ」を記しておきます。
- Vue Router
- Vuetify
- axios
- vue-axios
となりました。
2021年11月21日（日）追記：↑ ここまで
今回はこのへんで。
