環境
- WSL2 （ホストPCのOS： Windows 10 Pro）
- WSL2 に node.js や Vue.jsをインストール済み
やろうとしていること
- フロントエンドを vue.js で立ち上げて、バックエンドを node.js で立ち上げる
- フロントエンドにアクセスし、プロキシ経由でバックエンドにリクエストを送る
- ↑デバッグ環境でフロントエンド側を書き換えるたびにバックエンド側をリビルドするのが大変なので
やってみて失敗したこと
いろいろなサイトで axios を使ってフロントエンドとバックエンドをつなぎ、プロキシでフロントエンドからバックエンドにアクセスできるようにするやり方が掲載されています。
私は知識全くないまま、下記サイトを参考にさせてもらい、以下の通りやってみました。
Code Database
【Express/Vue.js】Express.jsとVue-CLIを統合する方法について解説 | Code Databaseはプログラミングに関する情報を発信しているサイトです。毎週記事をアップしているので是非チェックしてみてください！
code-database.com
まず前提として、バックエンド側を 3333、フロントエンド側を 8888 とします。
1. vue.config.js を以下の通り変更する
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
port: 8888,
proxy: 'http://localhost:3333'
},
})
2. フロントエンドを起動する
$ npm run serve
> hoge@0.1.0 serve
> vue-cli-service serve
INFO Starting development server...
DONE Compiled successfully in 2467ms 9:21:16 AM
App running at:
- Local: http://localhost:8888/
- Network: http://172.27.170.151:8888/
Note that the development build is not optimized.
To create a production build, run npm run build.この状態でフロントエンドを操作してバックエンドにリクエストを送る処理をすると、以下のようなエラーが表示されました。
Proxy error: Could not proxy request /api/hello from localhost:8888 to http://localhost:3333.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).3. ググって調査する
とりあえずググって調査してみましたが、いろいろヒットします。
例えば localhost ではなくIP直打ちするとか、ポート開放していないとか、スラッシュがどうたらとか・・・
しかし一向に解決しませんでした。
結果的に解決した方法は・・・
エラーをそのまま読むと、「http://localhost:3333 というサーバーに接続できない」ということなのですが、このことの意味になかなか気づかなかったです。
つまり、文字通りバックエンドがいなかったのです。
別プロセスで以下のようにバックエンドを立ち上げた状態で、
$ npm run build
$ node server.js改めて npm run serve するとちゃんと動作しました。
つまり、フロントエンド側とバックエンド側をそれぞれ別プロセスで起動する必要があったっぽいです。
それに気づきませんでした・・・
コメント