Google App Engine Java スタンダード環境 の Spring BootでVuetify導入からクロスドメインAjax通信
Webアプリ(およびWebサービス)の基盤環境を、GAE Java(Spring Boot) + Vueで作成していく。
- Google App Engine Java Standard 環境で手っ取り早くSpring Boot アプリケーションを開発する
- GooGoogle App Engine Java スタンダード環境 の Spring BootでVue.jsを利用する
とりあえず、上記までの動作確認まで。
1.Vuetify導入
1.1 Vue CLIのインストールとVueプロジェクトの作成とVuetityの適用
Vue の開発ツール、Vue CLI をインストール
- > npm install -g @vue/cli
プロジェクトの作成
- > vue create my-app-name
- > cd my-app-name
Vuetifyの適用、これで、VueプロジェクトでVuetifyが適用される
- > vue add vuetify
1.2 ビルドの出力先を変更
サーバー側とまとめて、GAEに上げたいので、Eclipse上で完結できるといいのだが、近ごろのJavascript開発はそうもいかなさそう。Visual Studio Code でUIがわのVuetify を編集して、GAEのsutaticリソースディレクトリにビルド結果を出力するようにするために、Vue Configを編集
Vue Configuration リファレンス https://cli.vuejs.org/config/
vue.config.js を編集
- module.exports = {
- outputDir: '../FavPhrase/src/main/resources/static',
- indexPath: '/index.html',
- devServer: {
- host: '0.0.0.0',
- port: 8081
- }
- }
outputDir で、GAEプロジェクトの スタティックディレクトリを指定、devServerで、GAEと異なるポートを指定して、開発時には、同時に実行Vuetify から GAEにアクセスできるようにする。
1.3 実行とビルド
実行
- > npm run serve
ビルド
- > npm run build
1.4 Vuetify チュートリアル
以下のyoutubeチャンネルが秀逸。
VuetiVuetify Tutorial(youtube)
2.Vuetify から GAE(Spring Boot)へREST接続
上記で、GAEとVuetifyをポート自害で同時に実行できるようになったので、Vuetifyを実行して、GAE(Spring Boot)のREST APIにアクセスさせる。
2.1 Spring Boot 側 REST API
- @RestController
- public class ApiController {
- @GetMapping("/api/hello")
- public String hello() {
- return "Hello GAE Java std env with Spring boot !";
- }
- }
2.2 Vuetify側
(1) axios のインストール
ajax ライブラリ axios をインストール
- npm install axios --save
(2) Vuetify から axios を利用して、GAE(Spring Boot)のREST APIを呼び出す
- <template>
- <v-container>
- <v-btn @click="sampleAjax">Ajax</v-btn>
- </v-container>
- </template>
- <script>
- import axios from 'axios';
- export default {
- name: 'FavPhrase',
- methods: {
- sampleAjax : function() {
- axios.get("http://localhost:8080/api/hello")
- .then((res) => {
- alert("status=" + res.status + ":" + res.data);
- });
- }
- }
- }
- </script>
- <style>
- </style>
と、以下のエラーとなる
localhost/:1 Access to XMLHttpRequest at ‘http://localhost:8080/api/hello’ from origin ‘http://localhost:8081′ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
2.3 クロスドメイン(CORS)対応
エラーメッセージ中の、CORS(Cross-Origin-Resource-Sharing)の対応を行う。
https://dev.classmethod.jp/etc/about-cors/
その概要は、クロスドメインアクセスされるサーバー側でアクセスを制御するルールを設定し、ブラウザとサーバー側でHTTPヘッダを使ってアクセス制御に関する情報をやりとりしながらドメインをまたいだアクセスをするというもの
(1) GAE(Spring Boot)側で対応を行う。
レスポンスヘッダーを返す
- @RestController
- public class ApiController {
- @GetMapping("/api/hello")
- public ResponseEntity
hello(@RequestHeader("Origin") String origin) { System.out.println(origin); HttpHeaders headers = new HttpHeaders(); headers.add("Access-Control-Allow-Origin", origin); String body = "Hello GAE Java std env with Spring boot !"; return new ResponseEntity<>(body, headers, HttpStatus.OK ); } }
3.REST API 呼び出し
呼び出しが、成功して、メッセージボックスに REST APIからの結果が表示された。
HTTP のやり取り。リクエストヘッダーに、
Origin: http://localhost:8081
が含まれ、レスポンスヘッダーに、
Access-Control-Allow-Origin: http://localhost:8081
が含まれることが確認できる。
これで、UIとWebサービス側の開発準備ができた。