dockerファイル作成
ディレクトリを作成
mkdir node
cd node
vim Dockerfile
node.jsを準備
dockerファイルを作成し、そこから各種プログラムを実行できるようにする。
ここではexpress,suquelize-cliの実行環境の構築ができるよう記載。
FROM node:12.13
RUN npm install -g express-generator sequelize-cli
FROM nodeでノードのベースイメージ
RUNコマンドでnpm installを実行しexpressとsepulize-cliをインストールするコマンド
docker イメージを作成
これによりDockerfileが実行される。
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をインストールしていきます。
コンテナにロングインする。
docker exec -it serverapp /bin/bash
docker exec -it <コンテナ名>/bin/bash コンテナにログイン
-it コンテナを継続的に動かすために必要
cd /node
express .
destination is not empty, continue?(空ファイルじゃないけど大丈夫？)と聞かれますが、中にはDockerfaileがあるだけなので[y]で続行する。
sequelizeなどの準備
ここで色々必要になるものの準備を行います。
npm install --save sequelize sqlite3 cors nodemon
npm install
それぞれ簡単解説
ここでは詳しい説明はしませんが、別記事をそれぞれ作成しようと思います。
| 名称 | 説明 |
|---|---|
| sequelize | データベースを管理するツール |
| sqlite3 | 簡易版データベース |
| cors | セキュリティ上のルール |
| nodemon | 自動でサーバーを再起動してくれるツール |
これでローカルフォルダのnode/にファイルが作成できたはず。
sequelizeをセットアップ
sequelize init
ターミナルに戻る
exit
node/config/config.jsonの記載を変更する。
変更点
database mysql → sqliteへの変更
storage "./data/development.sqlite3"の記載をそれぞれに追加
{
"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ファイルを作成。
mkdir node/data
もう一度dockerコンテナにログイン
docker exec -it serverapp /bin/bash
Unable to resolve sequelize package in
sequleize model:createコマンドを使いデータベースに雛形を作成
sequelize model:createコマンドとは？
sequelize model:create --name goal --underscored --attributes goalname:string
Unable to resolve sequelize package inのエラーが出る場合はこちら
マイグレートする
そもそもマイグレートとは、アプリケーションで使うデータベースの定義を自動的に作成・管理する機能です。
sequelize db:migrate
マイグレートが完了したら一度dockerを停止する。
docker stop serverapp
vueの準備
ディレクトリを作成
mkdir vue
vim vue/Dockerfile
作成したfrontapp内のDockerfileに以下の記述をする。
ここではvue/cliの実行環境の構築ができるよう記載。
FROM node:12.13
RUN npm install -g @vue/cli
Dockerfileを元にコンテナイメージを作成。起動し、ローカルのフォルダをマウント。
docker build vue/. -t frontapp:latest
docker run -itd --rm --name frontapp -v $PWD/vue:/vue frontapp:latest
docker run コマンドが正常に動いているか確認。
docker ps
docker exec -it frontapp /bin/bash
コンテナにログイン後以下を実行する。
cd /vue
vue create frontapp
以下のように標準のyarnか高速のnpmどちらかで実行
npmで実行したいため[y]を選択する。
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で一度コンテナからログアウトする
root@701c15dfea18:/# cd vue/frontapp
root@701c15dfea18:/vue/frontapp# vue add vuetify
exit
docker-compose.ymlファイルを準備する。
Node.jsとVue.jsそれぞれのコンテナを起動する際、composeファイルがあると起動/終了が楽なので、
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でページを公開