【環境構築】dockerでvue.js+Typescript+vuetify+express+Sequelizeの環境構築

13432 ワード
TypeScript Express Vuetify Vue.js Docker Express テキストリンク

dockerファイル作成

ディレクトリを作成

console
mkdir node
console
cd node
vim Dockerfile

node.jsを準備

dockerファイルを作成し、そこから各種プログラムを実行できるようにする。
ここではexpress,suquelize-cliの実行環境の構築ができるよう記載。

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

FROM nodeでノードのベースイメージ
RUNコマンドでnpm installを実行しexpressとsepulize-cliをインストールするコマンド

docker イメージを作成

これによりDockerfileが実行される。

console
docker build node/. -t serverapp:latest

-tオプションを付けていることで、名前（serverapp）とタグ名（latest）を指定している。

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

オプションの説明

-itd コンテナを継続的に動かすために必要
--rm　コンテナ終了時自動的に削除。
--name　serverappというコンテナ名前で作成
-v ホスト側のディレクトリ：コンテナ側のマウントポイント
今回の場合は$PWDで現在いるディレクトリの/nodeがホスト側、/node serverapp:latestがマウントポイントとなる。

express,sequelizeをインストールする

ドッカーコンテナにログインしexpressをインストールしていきます。
コンテナにロングインする。

console
docker exec -it serverapp /bin/bash

docker exec -it <コンテナ名>/bin/bash　コンテナにログイン
-it コンテナを継続的に動かすために必要

root
cd /node
express .

destination is not empty, continue?(空ファイルじゃないけど大丈夫？)と聞かれますが、中にはDockerfaileがあるだけなので[y]で続行する。

sequelizeなどの準備

ここで色々必要になるものの準備を行います。

root
npm install --save sequelize sqlite3 cors nodemon
npm install
それぞれ簡単解説

ここでは詳しい説明はしませんが、別記事をそれぞれ作成しようと思います。

名称 説明
sequelize データベースを管理するツール
sqlite3 簡易版データベース
cors セキュリティ上のルール
nodemon 自動でサーバーを再起動してくれるツール

これでローカルフォルダのnode/にファイルが作成できたはず。

sequelizeをセットアップ

root
sequelize init

ターミナルに戻る

root
exit

node/config/config.jsonの記載を変更する。
変更点
database mysql　 →　sqliteへの変更
storage　"./data/development.sqlite3"の記載をそれぞれに追加

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
  }
}

nodeファイルの中にconfig.jsonで指定したdataファイルを作成。

console
mkdir node/data

もう一度dockerコンテナにログイン

console
docker exec -it serverapp /bin/bash

Unable to resolve sequelize package in
sequleize model:createコマンドを使いデータベースに雛形を作成
sequelize model:createコマンドとは？

root
sequelize model:create --name goal --underscored --attributes goalname:string

Unable to resolve sequelize package inのエラーが出る場合はこちら

マイグレートする

そもそもマイグレートとは、アプリケーションで使うデータベースの定義を自動的に作成・管理する機能です。

root
sequelize db:migrate

マイグレートが完了したら一度dockerを停止する。

terminal
docker stop serverapp

vueの準備

ディレクトリを作成

console
mkdir vue
console
vim vue/Dockerfile

作成したfrontapp内のDockerfileに以下の記述をする。
ここではvue/cliの実行環境の構築ができるよう記載。

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

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

console
docker build vue/. -t frontapp:latest

console
docker run -itd --rm --name frontapp -v $PWD/vue:/vue frontapp:latest

docker run コマンドが正常に動いているか確認。

console
docker ps

console
docker exec -it frontapp /bin/bash

コンテナにログイン後以下を実行する。

root
cd /vue
vue create frontapp

以下のように標準のyarnか高速のnpmどちらかで実行
npmで実行したいため[y]を選択する。

root
Your connection to the default yarn registry seems to be slow.
Use https://registry.npm.taobao.org for faster installation?

以下のメッセージに従いvueをインストールしていく。
今回はマニュアルでtypescriptなどもインストールしていく。


これでvueのインストールは完了です。

vuetifyの環境

frontappに移動し、vuetifyのプラグインを追加する。
インストールはデフォルトで行った。
インストール終了後はexitで一度コンテナからログアウトする

console
root@701c15dfea18:/# cd vue/frontapp
root@701c15dfea18:/vue/frontapp# vue add vuetify
exit

docker-compose.ymlファイルを準備する。

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

docker-compose.yml
version: "3"
services:
  node:
    build: node/.
    volumes:
      - ./node:/node
    working_dir: /node
    command: ["npm", "start"]
    ports:
      - "3000:3000"
  vue:
    build: vue/.
    volumes:
      - ./vue:/vue
    working_dir: /vue/frontapp
    command: ["npm", "run", "serve"]
    ports:
      - "8080:8080"

一度バックグランドで実行しそれぞれ表示を確認する。

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

localhost:8080でアクセス

localhost:3000でアクセス

参考記事

とてもお世話になりました。ありがとうございました
Vue.js + Express + Sequelize + DockerでCRUD搭載のTodoリストを作ってみる
【環境構築】Docker + Rails6 + Vue.js + Vuetifyの環境構築手順
GitHub PagesにDocker+Vue.js+Vuetifyでページを公開