JSフレームワークのサーバーサイド接続まとめ

JSフレームワークのサーバーサイド接続まとめ:

昨今話題の3大JavaScriptフレームワーク

• Vue.js
• React
• Angular

について各入門書をそれぞれ読んでみて余りにもサーバーサイド(バックエンド)との接続に関する情報が乏しかったので自分なりに調べたまとめ

(本番環境ではビルドして配置してね程度しか書いてない事が多い(特にAngular)…といいつつwebpack-dev-serverの設定でproxyできるのを知ったのはmio先生の「基礎から学ぶ Vue.js」がきっかけだったり)

以下各バックエンドサイドのポートが9000番と仮定して

/apiにサーバーサイドスクリプトを配置していると想定した場合

Vue.jsの場合

Vue CLIで

$ vue init webpack sample-app 

としてプロジェクトを生成した場合

[プロジェクトルートディレクトリ]/config/index.js

にて

index.js

/* 抜粋 */ 
proxyTable: {}, 
↓ 
proxyTable: { 
  "/api":"http://localhost:9000" 
}, 

としてやって

$ npm start 

するだけでOK

Angularの場合

Angular CLIにて

$ ng new sample-app

としてプロジェクトを生成した場合

プロジェクトルートディレクトリにproxy.jsonを以下の内容で作り

proxy.json

{ 
  "/api": { 
    "target": "http://localhost:9000" 
  } 
} 

package.jsonのスクリプト欄を以下のように書き換える

package.json

/* 抜粋 */ 
"scripts": { 
  "start": "ng serve", 
}, 
↓ 
"scripts": { 
  "start": "ng serve --proxy-config proxy.json", 
}, 

あとは同様に以下のコマンドにて起動する

$ npm start 

Reactの場合

これだけは正しい方法ではないと思う

[プロジェクトルートディレクトリ]/node_modules/react-scripts/config/webpackDevServer.config.js

を以下のように書き換える

webpackDevServer.config.js

/* 抜粋 */ 
module.exports = function(proxy, allowedHost) { 
  return { 
    proxy, 
  } 
} 
↓ 
module.exports = function(proxy, allowedHost) { 
  return { 
    proxy { 
       '/api': 'http://localhost:9000' 
    }, 
  } 
} 
 

あとは同様に以下のコマンドにて起動する

$ npm start 

後はバックエンド側でphpが動く場合

[バックエンドのドキュメントルート]/api/index.phpに

index.php

<?php print_r($_REQUEST); ?> 

などを書いて以下のURIで確かにGET値が取得できているかを確認

vue.js→http://localhost:8080/api/?id=1

Angular→http://localhost:4200/api/?id=2

React→http://localhost:8080/api/?id=3

ちなみにVue.jsとReactについてはLaravelを使えば簡単に導入が可能で

デフォルトはVue.js

Reactを使う場合は以下のコマンドで切り替えできる

$ php artisan preset react 
$ npm install && npm run dev 

また

[Laravelプロジェクトルート]/resources/js (5.7系)

[Laravelプロジェクトルート]/resources/assets/js (5.5系)

にあるスクリプトを書き換え時に自動ビルドして

[Laravelプロジェクトルート]/public/js

に配備したい場合サブのターミナルを一つ立ち上げて

$ npm install #(vueでこれを行っていない場合は最初に一回) 
$ npm run watch 

としてやれば対象ファイルを保存したトリガで自動ビルドされる

またRailsでもプロジェクト生成時に

$rails new sampleApp --webpack=vue

$rails new sampleApp --webpack=react

の様なオプションを付ける事で導入できるそうな（未検証）

参考

[Angular] Angular CLIでプロキシを利用する
Webpack はじめの一歩
Laravel Mixとは
Rails 5.1 + Vue.js で開発を行う - part1 環境構築