AdonisJS v5 – Webアプリ開発に必要なモジュールや設定を追加する！

はい、皆さんこんにちはこんばんは。
お盆も明けてきて涼しくなることを常日頃から願っています。

さて、今回もAdonis v5についてご紹介していきます。
前回はAdonis v5をインストールして開発サーバーを立ち上げて、サンプルページを表示させるところまでいきました。
今回は今の段階ではホームページを作ることしかできないので、Webアプリを開発する上で必要なモジュールや設定を追加していきたいと思います。

Webアプリの構成について
モジュールのインストール
設定を加える
最後に

Webアプリの構成について

まずは必要なモジュールや設定を追加する前にどのような構成を考えているかを紹介します。
バックエンドに関してはもちろんAdonis(NodeJS)なんですが、フロントエンドをReactで開発していこうと思います。

Adonisのテンプレートエンジンはデフォルトでedgeをサポートしていますので、そのままjQueryなどで開発することもできます。
jQueryやフロントエンドのフレームワークを利用しない方はReactに関する設定はスルーして読み飛ばしてください。

モジュールのインストール

ではさっそく必要なモジュールをインストールしていきましょう。
一旦私の方で最低限必要そうなモジュールは以下です。
※バックエンド周りのモジュールを入れています。

アプリケーション実行時に必要なモジュール

npm install --save @adonisjs/lucid mysql2 axios

1	npm install --save @adonisjs/lucid mysql2 axios

開発に必要なモジュール

npm install --save-dev nodemon

1	npm install --save-dev nodemon

それぞれ簡単に説明していきます。

@adonisjs/lucid

AdonisフレームワークでDBへの応答・書込や読取をサポートしてくれるモジュールです。基本的にAdonisではLucidモジュールを使ってDB周りの処理を行います。
DBを扱うアプリケーションであれば必須のモジュールになります。

mysql2

DBのドライバーモジュールです。MySQLを扱う場合は必須のモジュールです。Adonis v5ではmysql2モジュールをベースに構成されているため、MySQLを使う場合はmysql2をインストールします。

axios

外部へのHTTP通信を行うためのモジュールです。Adonis v5に限った話ではないので割愛します。

nodemon

Nodeサーバーを監視するためのモジュールです。Nodeサーバーの場合、ファイルを更新した時にページをリロードしたとしても変更が反映されません。変更を反映させるためにはNodeサーバーを再起動させる必要があるのですが、手動で毎度再起動するのは面倒なのでnodemonに監視をさせて自動的にNodeサーバーを再起動させます。
※Adonisではaceというコマンドがあり、aceコマンドからNodeサーバーの起動やルート全体の監視ができますが、React導入との兼ね合いで監視対象から外したい部分もあるので今回は使いませんでした。

設定を加える

モジュールのインストールが完了したら、必要な設定を加えていきます。
まずはLucid周りの設定を加えていきます。以下のコマンドを実行してください。

node ace configure @adonisjs/lucid
node ace generate:manifest

1 2	node ace configure @adonisjs/lucid node ace generate:manifest

すると以下ファイル群に設定が作成/追加されます。

# CREATE: config/database.ts
# UPDATE: .env,.env.example
# UPDATE: tsconfig.json { types += "@adonisjs/lucid" }
# UPDATE: .adonisrc.json { commands += "@adonisjs/lucid/build/commands" }
# UPDATE: .adonisrc.json { providers += "@adonisjs/lucid" }

# CREATE: config/database.ts

# UPDATE: .env,.env.example

# UPDATE: tsconfig.json { types += "@adonisjs/lucid" }

# UPDATE: .adonisrc.json { commands += "@adonisjs/lucid/build/commands" }

# UPDATE: .adonisrc.json { providers += "@adonisjs/lucid" }

※.envファイルにDBの設定項目が追加されています。適切変更してください。

また、以下のようなモデルの作成、マイグレーションの作成をするaceコマンドも扱えるようになります。

node ace make:model User
node ace make:migration users

1 2	node ace make:model User node ace make:migration users

これでAdonis側の必要最低限の設定が完了しました。
続いてnodemonの設定を行なっていきます。基本的にはこちらの投稿をベースに作成していきます。
まずはnodemonの設定ファイルを作成します。

touch nodemon.json

1	touch nodemon.json

ファイルの中身は以下のようにしています。

{
    "watch": ["*"],
    "ext": "json,edge,ts,env",
    "ignore": ["database/", "node_modules/", "package.json", "package-lock.json", "public/", "resources/js/*", "resources/sass/*", "webpack.dev.js"]
}

{

"watch": ["*"],

"ext": "json,edge,ts,env",

"ignore": ["database/", "node_modules/", "package.json", "package-lock.json", "public/", "resources/js/*", "resources/sass/*", "webpack.dev.js"]

}

基本的には開発をする上で再起動する必要のないディレクトリを除外対象とし、煩わしさを軽減させるようにしています。
また、nodemonを実行させるscriptsをpackage.jsonに追加します。

{
  "scripts": {
    "dev-serve": "nodemon ace serve"// ←ここを追加する
  }
}

{

"scripts": {

"dev-serve": "nodemon ace serve"// ←ここを追加する

}

追加ができたら以下コマンドを実行してNodeサーバーを起動します。

npm run dev-serve

1	npm run dev-serve

実行するとこのように表示されます。この画面が表示されたらNodeサーバーは起動されていることになります。

これでAdonis側で最低限の開発に必要なモジュールや設定が完了いたしました。

最後に

Adonisでは開発専用のNodeサーバーを立ち上げることができます。
それが以下のコマンドです。

node ace serve --watch

1	node ace serve --watch

これでもファイルを監視してくれるんですが、除外設定などができそうになかったので今回はnodemonで代用することとしました。

また、AdonisではTypeScriptで開発を行なっていきビューテンプレートはedgeを使っていくのが基本です。
私自身ビューテンプレートはPugを使いたかったのですがバージョン5では適用できそうなモジュールがなかったので、今回はedgeで諦めました。
とはいえ、フロントはReactを使う予定なのであまり関係ありませんが…。

今回はAdonisでWebアプリ開発に最低限必要なモジュールのインストールや設定を行いましたので、次回は簡単なログイン機能を作って行こうと思います。

それでは、よいAdonisライフを！