Google App Engine Java スタンダード環境 の Spring BootでVuetify導入からクロスドメインAjax通信

Webアプリ(およびWebサービス)の基盤環境を、GAE Java(Spring Boot) + Vueで作成していく。

とりあえず、上記までの動作確認まで。

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>

と、以下のエラーとなる

vuetify_rest

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からの結果が表示された。

vuetify_rest_success

HTTP のやり取り。リクエストヘッダーに、

Origin: http://localhost:8081

が含まれ、レスポンスヘッダーに、

Access-Control-Allow-Origin: http://localhost:8081

vuetify_rest_success_fiddler

が含まれることが確認できる。

これで、UIとWebサービス側の開発準備ができた。