これはG* Advent Calendar 2017の7日目の記事です。

この記事は、以下の5つの投稿で成り立っています。

Grails/Vue.jsでTodoアプリ（環境構築）
Grails/Vue.jsでTodoアプリ（CRUD）
Grails/Vue.jsでTodoアプリ（認証） 1/2
Grails/Vue.jsでTodoアプリ（認証） 2/2
Grails/Vue.jsでTodoアプリ（Deploy as war）

初めに

Grails 3から非常に簡単にRESTful APIを提供できるようになりました。
しかし、React.jsやAngular.jsなどはGrails 3でいい感じに扱うプラグインなどが有るようですが若干Vue.jsが蚊帳の外っぽい印象です。
そこで今回、5回に渡ってGrailsとVue.jsを連携させるサンプルアプリケーションを作ってみます。
なお、Vue.js自体は非同期通信のための機能を提供していないので、ココではaxiosを利用します。

Grailsの準備（APIサーバの構築）

とりあえず現時点で最新のGrails 3.3.1を利用しました。
プロジェクト名はgvtodoとして普通にGrailsアプリケーションを作成します。

[koji:grails]$ grails create-app gvtodo

インタラクティブモードに入ります。例のごとく初回はライブラリがダウンロードされるのでしばし待機。

[koji:grails]$ grails

完了したら今回利用する2つのドメイン（ToDoとTag）を生成します。

grails> create-domain-class todo
grails> create-domain-class tag

そして、生成されたそれぞれのファイルの内容を以下のようにします。

gvtodo/grails-app/domain/gvtodo/Todo.groovy

package gvtodo

import grails.rest.Resource

@Resource(uri = "/todo")
class Todo {

    String title

    static hasMany = [tags: Tag]


    static constraints = {
    }
}

gvtodo/grails-app/domain/gvtodo/Tag.groovyTag.groovy

package gvtodo

import grails.rest.Resource

@Resource(uri = "/tags")
class Tag {

    String title

    static constraints = {
        title(unique: true)
    }
}

最後に、application.ymlの先頭のgrailsの部分に、CORSを有効化するべく、以下のように追記します。

grails: #以下の2行を追記
    cors:
        enabled: true

CORSを有効にすることで、Grailsがポート8080、Vue.jsアプリケーションがポート8081で動いているような場合でも、Vue.jsからGrailsにRESTful APIでアクセスすることが出来るようになります。

これにて準備は完了です。
run-appでGrailsを起動します。

grails> run-app
| Running application...
Grails application running at http://localhost:8080 in environment: development
grails>

ブラウザでhttp://localhost:8080/ にアクセスすれば、Grailsの起動ページが表示されます。
しかしやはりGrailsはサクサク開発できて気持ち良いですね！

そしてなにより、Grails3から強化されたRESTful API対応のおかげで、既にRESTful APIサーバが出来上がっています！試しに、http://localhost:8080/todo/、http://localhost:8080/tags/にアクセスしてみてください。

何やら表示されます。当然何もデータがないので空っぽです。
ではテストデータをcurlを使って適当に登録してみます。

[koji:grails]$ curl -X POST -H "Content-Type: application/json" -d '{"title": "my first todo"}'  localhost:8080/todo
{"id":1,"title":"my first todo","tags":null}%

[koji:grails]$ curl -X POST -H "Content-Type: application/json" -d '{"title": "my second todo"}' localhost:8080/todo
{"id":2,"title":"my second todo","tags":null}%

では再度http://localhost:8080/todo/にアクセスしてみてください。
なんと既にデータが登録されていますね！
特定のデータにアクセスしたいときはhttp://localhost:8080/todo/1のように末尾にIDを付与します。普通のRestful APIですね。

こんなに簡単にRESTful APIサーバが構築出来る上に、上記のデータは正真正銘データベースに登録されています。
さらにデフォルトではGrailsを再起動すればデータは消えるので、初期開発時に非常に重宝します。

Vue.jsの準備

さて、ビューに関しては全部サーバサイドでゴリゴリ！という時代ではないようですので、Vue.jsを使ってみます。
今回、SPAとしてVue.jsアプリケーションを作成していきますので、vue-cliをインストールます。
すでにインストールしている方は以下の手順は必要ありません。

なお、自分はグローバルにvue-cliをインストールしたくないので、適当なディレクトリにてvue-cliをインストール、そしてその中でvueコマンドを使ってVueアプリケーションを作成する、というスタンスです。

ということで、本当にどこでも良いので適当なディレクトリで以下を実行します。

[koji:hoge]$ yarn add vue-cli

これで準備は完了です。
実際にVueアプリケーションを作るのですが、当然フロントエンドなのでGrailsとは別のディレクトリに設置してもいいのですが、今回は作成したGrailsのディレクトリ直下に作成することにします。
私の環境では/home/koji/work/grails/gvtodoがGrailsのプロジェクトトップなので、この直下にfrontendという名前でVueアプリケーションを作成します。

yarn run vue init webpack /home/koji/work/grails/gvtodo/frontend

すると以下のような対話シェルが起動されますので、？で始まっている部分の質問に答える必要が有ります。基本的には一番最初のProject nameに適当な名前を付けるだけで後はデフォルトでいいと思います。

[koji:hoge]$ yarn run vue init webpack /home/koji/work/grails/gvtodo/frontend
yarn run v1.2.1
warning package.json: No license field
$ /home/koji/work/grails/hoge/node_modules/.bin/vue init webpack /home/koji/work/grails/gvtodo/frontend

? Project name gvtodo
? Project description A Vue.js project
? Author Koji
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "/home/koji/work/grails/gvtodo/frontend".

   To get started:
   
     cd /home/koji/work/grails/gvtodo/frontend
     npm install
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack

Done in 70.39s.
[koji:hoge]$

これでVueアプリケーションが作成できました。
今後は、/home/koji/work/grails/gvtodo/frontend以下にフロントエンド用のVueアプリケーションを記述していきます。
（vue-cliインストールに利用した適当なディレクトリは削除してOKです。）

なお、Vue.jsはあくまでViewのためのツールなので、サーバとの通信用に別途ライブラリが必要です。
今回はaxiosを利用することにします。
Grailsプロジェクト配下のVueアプリディレクトリに移動して、axiosをインストールします。

[koji:frontend]$ cd /home/koji/work/grails/gvtodo/frontend
[koji:frontend]$ yarn add axios

これで完了！と言いたいところなのですが、Vueアプリケーションも自分自身でWebサーバをポート8080で起動するため、Grailsと被ってしまいます。
なので、このポートを別のもの（今回は8081）に変更しておきます。

frontend/config/index.jsに、port: process.env.PORT || 8080,という記述があるので、8080を8081に変更するだけでOKです。

これで準備完了です！
frontendディレクトリ内で、以下のコマンドを実行してVueアプリケーションを起動してください。

[koji:frontend]$ yarn run dev
yarn run v1.2.1
$ node build/dev-server.js
> Starting dev server...


 DONE  Compiled successfully in 11774ms
> Listening at http://localhost:8081

これでブラウザでhttp://localhost:8081にアクセスすればVue.jsアプリケーションが動作していることが確認できます。

まとめ

とりあえずコレでGrailsをVue.js/axiosそれぞれの環境構築が出来ました。
次回から実際にGrailsをVue.sj/axiosを連携させてToDoアプリケーションを作成していきます。

saba1024のブログ

どうでも良い思いついた事とかプログラミング関係のメモとか書いていきます。

Grails/Vue.jsでTodoアプリ（環境構築）

初めに

Grailsの準備（APIサーバの構築）

Vue.jsの準備

まとめ