Q&A
Webサーバとブラウザの関係を理解出来てなさそうですが説明した方が良いですか？
スマホから手入力なので、乱文失礼します。
やりたい事
ローカルでnodeでwebサーバ(vue.js)を立ち上げ、
ボタンを押すとseleniumが動くようにしたい。
環境
windows
node 16.15.1
vue 3.2.13
やった事
npm i @vue/cli -g vue create myapp cd myapp npm i selenium-webdriver npm i chromedriver -g npm run serve
→webサーバ起動
./src/main.jsに下記を追記
JavaScript
1import { Build } from 'selenium-webdriver'
→この時点でエラー
fsなど既に入っているモジュールが無い旨のエラー(can't resolve xxx in 'filename')が大量に出ます。
ググった結果で、package.jsonで
"browser": { "fs": false }
など入れましたが駄目でした。
ログを乗っけれなくてすみません。
似たような事をnuxt.jsでも行い、尽く失敗しています。
(その場合、またログが異なるのですが、環境がなく貼り付けられない……)
そもそもアプローチの方法が違う気がしており、方向性の確認だけでもさせて貰いたいと思い質問しました。
回答1件
0
できないのはNode,jsとブラウザ上で動作するJavaScript(以下JS)は明確に違う存在だからです。
先にNode.jsの誕生の歴史をかいつまんで紹介します。
元々ブラウザはWebサーバからHTMLファイルを受け取り
CSS、JS、画像ファイルを追加で受け取りながら画面を描画していきます。
この描画する為にメモリ空間上に蓄えるものが「DOMツリー」
JSはDOMツリーを後から編集して画面の更新を促す機能として用意されています。
しかしJSの権限を大きくしすぎると、悪意のWebサイトにアクセスしただけで
ローカルのファイルにアクセスしてファイルを持ち逃げするような事も可能になってしまいます。
なので、ブラウザ達はJSには「お前DOM以外は触らせてやらねえからな」というシビアな成約を施しています。
そのJSがGoogle Map等の活躍により一躍人気言語となったため、
ライアン・ダール氏(Node.jsの開発者)が
「ブラウザ上だけじゃなくて、自前のパソコン上で自由に実行したい」と願うようになります。
このブラウザ上だけで動作するJSは「ドメイン固有言語」でしたが、
RubyやPythonみたいな「汎用スクリプト言語」として動かしたいと言ってるわけですね。
しかしJSはDOMツリーを編集する事しか能の無い言語、
ファイルアクセスや自由なインターネット接続という機能がなく、汎用スクリプト言語としては使えません。
彼はC++で自作のモジュールを開発して、オープンソースとして公開されているV8エンジンに組み込みました。
この魔改造の末に汎用スクリプト言語の要件を満たして生まれたのがNode.jsです。
以上がNode.jsの誕生の歴史です
ここから言える重要な事は
Node.jsは「パソコン上で独自に動く汎用スクリプト言語」を新しく用意しただけです。
Chrome等のブラウザ上に搭載されているJSは何も変化しません。
fsなど既に入っているモジュールが無い旨のエラー(can't resolve xxx in 'filename')が大量に出ます。
JSはNode.jsではないので、fs等のC++製モジュールなんてありません。
なのでfsに限らずNode.jsの為にC++で補強してあるモジュールは利用できません。
npmで紹介されているモジュールには、JSでは使えないものが大量にあります。
この辺はプロジェクトの説明書きや、JSで可能な範囲を考えれば大抵理解出来るようになっています。
判別できないものは使わない方が良いでしょう。
ローカルでnodeでwebサーバ(vue.js)を立ち上げ、
ボタンを押すとseleniumが動くようにしたい。
「ローカル」とは、1台のパソコン上でWebサーバとアクセスするブラウザを立ち上げる事を指しますか？
それとも、LANで構築された環境内で端末AでWebサーバを立ち上げて、端末Bでアクセスすることを想定していますか？
後者の内、端末Bでseleniumを実行したいという用途は不可能です。
理由は先程述べた通り、JSなのでセキュリティ目線での厳しい制限がついてくるからです。
それでもやりたいなら「Chrome スキーマ 実行ファイル」等のワードで調べてみてください。
前者のやり方
JSには追加のHTTPリクエストを送信する機能が備わっています。
参考記事: Fetch API - MDN
Node.jsのWebサーバ側にSeleniumを起動してあれこれやってもらう機能を実装します。
そしてWebサーバの特定URLにアクセスしたら機能を実行させるコードを記述しましょう。
後はJSのFetch APIの機能を使って特定URLにアクセスして実行させるだけ。
前者の場合、Webサーバとブラウザが同じ端末だから、
どちらがSeleniumを起動させて操作しても同じように目的を達成することが可能というわけです。
投稿2022/06/29 07:08
総合スコア21158
回答ありがとうございます。
ブラウザとサーバで混同されてるんだろうなといえのはググって何となく理解してましたが、
お陰様でだいぶ明確にわかってきました(cのくだりなど勉強になります)
ただ「selenium関連はサーバ側でしか使わない」というのをvue.jsにわからせる方法がわからない、という次第です。
seleniumを使う目的は業務の自動化なのですが、認証が少し複雑でブラウザを介す必要がある為、fetchでは難しいです。
> 「ローカル」とは、1台のパソコン上でWebサーバとアクセスするブラウザを立ち上げる事
これが目的です。
ブラウザの操作を自動化し、その操作と結果表示をwebサーバにさせたいです。
vue.js, seleniumはどちらも単体では動くことを確認しており、
後はwebサーバでトリガーを受け取ったらseleniumを起動させるだけだと思ったら、
エラーが出て進めなくなってしまいました。
これはどのように解決すれば良いでしょうか？
あなたの回答
tips
プレビュー
