はじめに
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とした。)