IT研修でVuePress+Nuxt on Dockerでシ ステムを作成した話
2019/10/122018/04/29投稿ではてなブログから移行した内容です.
雑談
前回の投稿から1ヵ月...
入社して1ヵ月が経ち,現在はIT研修を受けている日々.
今回は,そのIT研修で作成したブログシステムについて話していく.
最終成果物はこちら
ソースコードはGitHubのこちら
この記事で話す内容
- このシステムはどんな構成で,どういう形で動いているのか
- これを作成するに当たり,ぶつかった大きな4つの壁
- リアルタイム性のあるDocker環境を作成できない
- Docker環境で立ち上げたNuxtがホスト側からアクセスできない
- VuePressのサイドバーは自分で設定しないといけない
- Windows特有のDockerエラー
- このシステムを作ってみて,わかったことなど所感
技術構成
VuePressで記事を表示.
Nuxtで管理画面を表示し,記事を登録した際に,ExpressにPostして,
ExpressがVuePressのdocsにフォルダと記事の内容が書いてあるREADME.mdを作成.
編集画面を開くと,NuxtからExpressにGetし,ExpressがVuePressのdocsフォルダから情報を取得.
という流れ.
フォルダ構成
root/
├ docs/ ←VuePress
│ ├ .vuepress/
│ │ ├ public/
│ │ └ config.js
│ ├ about/←記事
│ ├ back/ ←記事
│ └ README.md
│
├ nuxt/ ←Nuxt
│ ├ Nuxtのフォルダなど(省略)
│ └ Dockerfile
│
├ docker-compose.yml
├ Dockerfile
└ index.js ←Express
リアルタイム性のあるDocker環境を作成できない
最初は,DockerfileでホストのrootをDocker環境にCOPYコマンドでコピーを行っていた.
しかし,これだと複数の問題点がある.
- ホスト側を修正してもDocker側には影響がないため,コンテナを立て直す必要がある
※これだと毎回コンテナが立ち上がる時間を待つ必要があり,結果をすぐ見ることができない.
- Docker環境側のファイルを修正する
※これだとコンテナを落とすと編集したものが消えてしまう.
解決策としてDocker環境のファイルをホスト側にコピーする.
これはとてもナンセンス
解決策
マウント機能を使う.
docker-compose.yml内で
volums:
- ホスト側:Docker側
Dockerコマンドの引数で指定できるみたいだが,面倒だったのでDocker Composeを導入した.
Dockerfile
FROM node:9.1.0
RUN useradd --user-group --create-home --shell /bin/false app
ENV HOME=/home/app
COPY package.json $HOME/press/
RUN chown -R app:app $HOME/*
USER app
WORKDIR $HOME/press
RUN yarn
CMD ["yarn", "start"]
docker-compose.yml
version: "3"
services:
press:
build: .
ports:
- '8080:8080'
- '3000:3000'
volumes:
- .:/home/app/press
- /home/app/press/node_modules
container_name: 'press'
Node.jsでの開発の主流?はこういう流れっぽい(適当)
- ホスト側のpackage.jsonをDocker環境へコピー
- Docker環境内でpackage.jsonに記述されているモジュールをインストール (npm install)
- Docker環境下にホストの環境をマウント
- node_modulesがホスト側に作成されないように,volumesでDocker環境内に閉じ込める
Docker環境で立ち上げたNuxtがホスト側からアクセスできない
Docker環境でNuxtを立ち上げると,ちゃんと127.0.0.1:3000で立ち上がったと出てくる.
しかし,ホストで立ち上げたようにブラウザにlocalhost:3000にアクセスしても表示されない...
解決策
127.0.0.1は自分のIPを指してる(詳しくは調べてね)ので,Dockerfileに0.0.0.0を設定してあげる.
実際のNuxt用のDockerfile
FROM node:9.1.0
RUN useradd --user-group --create-home --shell /bin/false app
ENV HOME=/home/app
COPY package.json $HOME/nuxt/
RUN chown -R app:app $HOME/*
USER app
WORKDIR $HOME/nuxt
RUN yarn
ENV HOST 0.0.0.0
CMD ["yarn", "dev"]
※追記 2018年5月3日
Nuxt on Docker for Windowsの場合,ホットリロードがうまくいかない.
なので,nuxt.config.jsに記述してあげる必要がある.
watchers: {
webpack: {
poll: true
}
}
VuePressのサイドバーは自分で設定しないといけない
VuePressは,サイドバーに表示する内容を,root/docs/.vuepress/config.js
に書き込まないといけない.
でも,今回は管理者画面からフォルダとREADME.mdを作成するというものになっているため,
サイドバーに表示する内容は自動で行う必要がある.
解決策
サイドバーの情報をArray型の変数にする.
その変数に,ディレクトリ情報を取得して,名前を入れていく形
config.js
const fs = require('fs');
const path = require('path');
var dirpath = "./docs"
var dirs = fs.readdirSync(dirpath).filter((f) => {
return fs.existsSync(dirpath + "/" + f) && fs.statSync(dirpath + "/" + f).isDirectory()
})
let sidebarItems = ((dirs) => {
let items = ['/']
dirs.forEach((d, index) => {
if (d !== '.vuepress' && d !== 'admin') {
items.push('/' + d + '/')
}
})
return items
})(dirs)
module.exports = {
title: 'Death March',
description: '社内ドキュメントを管理',
themeConfig: {
sidebar: sidebarItems,
nav: [
{
text: 'about',
link: '/about/',
},
{
text: 'admin',
link: 'http://localhost:8888'
}
],
}
}
Windows特有のDockerエラー
エラー
ERROR: Service 'press' failed to build: Get https://registry-1.docker.io/v2/: net/http: request canceled while waiting for connection (Client.Timeout exceeded while awaiting headers)
解決策
- タスクバー?のDockerアイコンを右クリック
- Settings...をクリック
- Networkタブに移動
- DNS ServerをFixedにチェック
- 8.8.8.8に設定
他にも,何のエラーが出るのか忘れたが,DaemonタブのExperimental featuresにチェックが入っていると,
これもWindows特有の悪さをするみたいなので,チェックを外しておこう.
所感
2週間でブログシステムを作るという課題で, 自分が初めての技術も取り入れつつ, 完成させることができたのは本当によかった.
Dockerfileを使う側から作る側にも慣れたし, VuePressというまだ情報が少ないもの(リリース2週間)も使うことができたし, とてもエンジニアらしい感じのことができて満足.
これから, どんどん新しい知識を入れていきたいと思います.
IT研修でブログシステムを作るってのがあり、VuePress+Express+Nuxt on Dockerで作ったら、他の研修生にドン引きされ、発表会では自社の先輩に趣味全開にしすぎと注意されてしまいました...https://t.co/wWw0Hiicqb
— 高木徹 (@TTrpbm) April 29, 2018
Twitterフォロー待ってます!