Vue.js + Express + Sequelize + DockerでCRUD搭載のTodoリストを作ってみる

この記事に書いてあること

Expressの実装例
Vue.jsの実装例
実行環境として利用するDockerコンテナの作り方
Sequelizeの導入方法、簡単な使い方
拙い日本語

しがないエンジニアが人生初アドベントカレンダー参加となりますので、諸々ご容赦頂けますと幸いです。

対象者

細かい説明は割愛していますが、初心者向けに書いてます。

「ゴリゴリにDocker使った環境構築が知りたい！」とか、
「俺はSequelizeなんか使わずにSQLを一つずつ組むね！」とか、
「ここどうなってるかもうちょい細かく説明してほしい」みたいな人にはあまり適してません。

あくまで、
記事をなぞっていくだけで手軽にCRUDがVue.js＋Expressが体験できる

っていうのを目的にしています。

各種バージョン

Docker for mac 19.03.5
Node.js 12.13.0
express 4.16.1
Sequelize-cli 5.5.1
vue-cli 4.0.5

DBはsqlite3を利用(なんでもいいけど)

作るもの

CRUD機能を搭載した簡単なTodoリストを作ります。
完成イメージはこんな感じです。

各種説明

Docker

言わずと知れたコンテナマン。コンテナの概念やメリットの説明は割愛。今回環境はこれで構築。

(ベストプラクティスを知りたい)

Vue.js

みんな大好きフロントフレームワーク。特に難しいことはしません。
(vue-cliを使って雛形を作成)

Node.js

みんな大好きサーバーサイドで動くJavaScript。特に難しいことはしません。

Sequelize

Nodeで使えるORM。RailsのActiveRecordみたいな物だと思ってもらえればOK。
特に難しいことはしません

全体的なファイル構成

ファイル構成はこんな感じ。
rootディレクトリ配下をコンテナごとに区切り、後々コンテナにマウントしてあげる。

rootDir/
 ┣ docker-compose.yml
 ┣ vue/
 ┃  ┣ Dockerfile
 ┃  ┗ frontapp/
 ┃      ┗ Vue.jsの雛形ファイル群が入ってくる
 ┗ node/
    ┣ Dockerfile
    ┗ Expressの雛形ファイル群が入ってくる

全体構成

全体構成はこんな感じです。
基本Vue.jsコンテナがリクエストを受けて、axiosでNode.jsコンテナにサーバ通信しています。
SQLiteを使っているので、DBアクセスはNode.jsコンテナ内で処理されるようなイメージ。

Node.jsの準備

早速開始、と行きたいところですが、まずは実行環境を構築。
Dockerhubから引っ張ってきてもいいのですが、せっかくなのでDockerfileを書いてあげましょう。
今回はとりあえず各種プログラムが実行できる環境が前提なので、コンテナ内は環境のみ。
ソースファイルはコンテナイメージに含めず、docker-composeを使って後でマウントしてあげることにします。

node/Dockerfile

FROM node:12.13RUN npm install-g express-generator sequelize-cli

Dockerfileの記述が終わったら一旦、Dockerfileからコンテナイメージを作成。
コンテナ起動時にローカルのディレクトリをマウントし、コンテナ内のデータが永続化できるようにします。

docker build node/. -t serverapp:latest
docker run -itd--rm--name serverapp -v$PWD/node:/node serverapp:latest

コンテナの起動が完了したら、コンテナ内にログインする。

docker exec-it serverapp /bin/bash

コンテナログイン後、expressコマンドを実行し、雛形ファイル群を作成。

cd /node
express .
npm install--save sequelize sqlite3 cors nodemon
npm install

docker runを実行した際にローカルのフォルダをマウントしているので、
ローカルのnode/以下にexpressの雛形ファイル群ができているはず。

続いて、DBを作成するためにコンテナに入ったままsequelize initを実行し、
CRUDに必要なtaskモデルを作成する準備をします。

sequelize init

init実行後、一旦コンテナからログアウトし、ローカルでconfig/config.jsonを下記のように修正。

config/config.json

{"development":{"username":"root","password":null,"database":"database_development","host":"127.0.0.1","dialect":"sqlite","storage":"./data/development.sqlite3","operatorsAliases":false},"test":{"username":"root","password":null,"database":"database_test","host":"127.0.0.1","dialect":"sqlite","storage":"./data/test.sqlite3","operatorsAliases":false},"production":{"username":"root","password":null,"database":"database_production","host":"127.0.0.1","dialect":"sqlite","storage":"./data/production.sqlite3","operatorsAliases":false}}

Sequelizeのデータが保存される./dataを作成する。

mkdir data

もう一度コンテナにログインし、taskモデルを作成します。

docker exec-it serverapp /bin/bash
sequelize model:create --name task --underscored--attributes taskname:string
sequelize db:migrate

マイグレーションが無事に成功すればtaskモデルが作成されます。
これでNode.jsの準備は完了。雛形準備に利用したコンテナは停止します。

docker stop serverapp

続いてフロントVue.js側を準備します。

Vue.jsの準備

Node側と同様にDockerfileを記述。

vue/Dockerfile

FROM node:12.13RUN npm install-g @vue/cli

Dockerfileを元にコンテナイメージを作成。起動し、ローカルのフォルダをマウント。

docker build vue/. -t frontapp:latest
docker run -itd--rm--name frontapp -v$PWD/vue:/vue frontapp:latest

Node側同様、Vue.jsの雛形ファイル群を作成するため、一度コンテナ内にログインします。

docker exec-it frontapp /bin/bash

コンテナログイン後、下記コマンドを実行。オプションは defaultで問題ありません。
その後の選択肢としては、yarnとnpmが出てくるけど、個人的にはnpmのが使いやすいのでそちらで。

cd /vue
vue create frontapp

以上でVue.js側の準備は終了。Node.js側同様に、一度コンテナは停止します。

docker stop frontapp

docker-compose.ymlの準備

Node.jsとVue.jsそれぞれのコンテナを起動する際、composeファイルがあると起動/終了が楽なので、
docker-compose.ymlを下記のように記入。

docker-compose.yml

version:"3"services:node:build:node/.volumes:-./node:/nodeworking_dir:/nodecommand:["npm","start"]ports:-"3000:3000"vue:build:vue/.volumes:-./vue:/vueworking_dir:/vue/frontappcommand:["npm","run","serve"]ports:-"8080:8080"

プロジェクトのカレントディレクトリで、docker-composeコマンドを実行し、
Node.jsのコンテナとVue.jsのコンテナを起動する。

docker-compose up -d# コンテナ終了は docker-compose down

ブラウザで3000ポートにアクセスしExpressの画面、8080ポートにアクセスしVue.jsの画面が表示されれば、開発用コンテナの構築は完了です。

localhost:3000

localhost:8080

docker-composeコマンドで初回起動時にコンテナイメージが再ビルドされ、 docker runで起動した時のコンテナイメージとは別の名前でイメージ化されるため、 docker runコマンドで起動した時のコンテナイメージは不要のため削除します。

docker rmi serverapp:latest
docker rmi frontapp:latest

実行環境の作成はこれにて終了。次から各種機能の実装に入っていきます。

Node.js

まずはサーバサイドの処理から実装します。
処理実装に入る前に、ソースコード変更時に自動的にNodeが再起動されるように少しだけ工夫。
app.jsとdocker-compose.ymlを修正します。

node/app.js

...varindexRouter=require("./routes/index");varusersRouter=require("./routes/users");varcors=require("cors");varapp=express();app.use(cors());...app.listen(3000,function(){console.log("Node server is started");});module.exports=app

docker-compose.yml

...working_dir:/nodecommand:["./node_modules/.bin/nodemon","app"]ports:...

Node.jsの初期状態だとVueからのリクエストを受けられない(エラーがでてしまう)ので、
インストールしたcorsモジュールを追加して、corsを許可する必要があります。
また、nodemonを利用しファイル変更を検知、ファイルが変更されたら自動でサーバが再起動されるようにします。
設定を反映するため、一度コンテナ再起動を実行。

docker-compose down
docker-compose up -d

コントローラーの新規追加がめんどくさいので最初から用意されているindex.jsを利用します。
実装内容としてはこんな感じ。

node/routes/index.js

varexpress=require("express");varrouter=express.Router();constdb=require("../models/index");// Readrouter.get("/",asyncfunction(req,res,next){try{constresult=awaitdb.task.findAll({});res.send(result);}catch(err){res.status(500).send(err);}});//Createrouter.post("/task",asyncfunction(req,res,next){try{constresult=awaitdb.task.create({taskname:req.body.task});res.send(result);}catch(err){res.status(500).send(err);}});//Updaterouter.put("/task/:id",asyncfunction(req,res,next){try{constresult=awaitdb.task.update({taskname:req.body.task},{where:{id:req.params.id}});res.send(result);}catch(err){res.status(500).send(err);}});//Deleterouter.delete("/task/:id",asyncfunction(req,res,next){try{constresult=awaitdb.task.destroy({where:{id:req.params.id}});res.send({result:result});}catch(err){res.status(500).send(err);}});module.exports=router;

送られてきたパラメータをそのままDBに登録するっていう簡単なCRUD処理の一覧です。
一つずつ説明していきます。

// Readrouter.get("/",asyncfunction(req,res,next){try{constresult=awaitdb.task.findAll({});res.send(result);}catch(err){res.status(500).send(err);}});

getで/にアクセスされた際に、taskテーブルから全てデータを引っ張ってくるように実装。
DBのtaskテーブルから全てデータを引っ張ってくるのに、sequelizeのfindAllというメソッドを使用します。
取得したデータをres.sendを使用して、リクエスト元に戻してあげます。

router.post("/task",asyncfunction(req,res,next){try{constresult=awaitdb.task.create({taskname:req.body.task});res.send(result);}catch(err){res.status(500).send(err);}});

postで/taskにアクセスした際に、リクエストのbody内容をDBのtaskテーブルに登録。
sequelizeのcreateというメソッドを利用します。

router.put("/task/:id",asyncfunction(req,res,next){try{constresult=awaitdb.task.update({taskname:req.body.task},{where:{id:req.params.id}});res.send(result);}catch(err){res.status(500).send(err);}});

putで/task/:idにアクセスした際に、idに紐づくレコードをupdateする処理。
sequelizeのupdateメソッドを利用し、リクエストのbody内容でデータを更新します。

router.delete("/task/:id",asyncfunction(req,res,next){try{constresult=awaitdb.task.destroy({where:{id:req.params.id}});res.send({result:result});}catch(err){res.status(500).send(err);}});

deleteで/task/:idにアクセスした際に、idに紐づくレコードを削除する処理。
sequelizeのdestroyメソッドを利用。

Node.js側CRUDの処理は実装完了です。続いて、Vue.js側の実装。