はじめに

Windows環境でのVue+Electronアプリ開発においてOracleデータベースへのアクセスに一苦労あったので実現方法を備忘録として残す。

環境

Windows 10
npm 6.14.8
Vue CLI 4.5.4

プロジェクト作成

Vueプロジェクト作成

Vue CLIを利用してVueプロジェクトを作成。Vue 3.x+Typescriptを選択。その他オプションは下記の通り。

>vue create electron-oracle

Vue CLI v4.5.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, TS, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)  No

Electron化

VueプラグインからElectron化する。途中でバージョンを聞かれるので^9.0.0を選択する。

vue add electron-builder

動作確認

ここまでで自動生成されたコードの動作確認をする。
Electronアプリケーション上にVueのいつものページが表示されていればOK。

npm run electron:serve

node-oracledbインストール

ポイント
Electronで利用する場合はElectron独自のパラメータを利用してoracledbビルドする必要があるが、npm経由でインストールした場合はそれがされておらず、またリビルドの対象にもならないため使えないらしい。（参考）

そのため、ソースからインストールする必要がある。

事前準備

ビルドに必要なライブラリを事前にインストールしておく。

windows-build-tools

Windowsの場合はコンパイラセットとしてwindows-build-toolsをインストールする。コンパイラインストール時に管理者権限が必要なので「管理者として実行」したコマンドプロンプトで実行すること。

npm install --g --production windows-build-tools

（Visual C++ build toolsがうまく入らなかったのでVisual Studio Build Toolsから手動インストールした。）

node-gyp

node-gypコマンドが必要になるのでグローバルインストールしておく。

npm install -g node-gyp

インストール後はコマンドとして実行できることが確認できる。

>node-gyp --version
v7.1.0

インストール

GitHubのソースアーカイブを指定してインストールする。URLはリリースノートを参照して必要なバージョンに適宜変更すること。

npm install --save https://github.com/oracle/node-oracledb/releases/download/v5.0.0/oracledb-src-5.0.0.tgz

データベースアクセス実装

基本的な実装方法は公式のサンプルを参照のこと。

ポイント
node-oracledbはNode.jsのライブラリなので、ElectronではMainプロセスで実行する必要がある。
すなわち画面操作からキックする場合はIPC通信によりRenderプロセスからMainプロセスに処理をリクエストする必要がある。
(※RenderプロセスでipcRendererを利用するのに一工夫が必要。今回はローカルで完結するアプリケーションであったため簡単にnodeIntegration: trueとした。)

参考