Dockerを用いてVue環境を作り、いい感じのフォームを作成しながらVueを学習していく。
Dockerざっくりした理解
Dockerコンテナ
→ アプリケーションの実行環境
ホストOS上に論理的な区画を作ったもの。OSやIPアドレスなどのシステムリソースをコンテナが見かけ上占有できる。
コンテナに必要なモジュールのみを詰めてアプリケーションを実行できる。
Dockerイメージ
→ コンテナを構成するための設計図。
DockerHubを介して種々のイメージを共有できる。
Dockerコマンドの利用
よくあるDockerの練習としてnginxを用いたサーバー構築がある。
$ docker pull nginx //DockerHubからイメージ取得
$ docker run --name webserver -d -p 80:80 nginx //起動。デーモン化。ブラウザからアクセスできるようになる。
$ docker ps //プロセス確認
$ docker stop webserver //停止
$ docker rm webserver //削除
Dockerfile
→ DockerfileはDockerイメージを構成するための構成情報ファイル。
上の練習ではDockerHub上のイメージを取得し、そのまま起動させるものだが、実際の開発では、内部の構成に手を加え、独自のイメージを創り、コンテナを生成することとなる。
コマンドで環境を構築してもよいが、本格的な開発となった場合に以下のような構成情報を別途ドキュメントとして残す必要が出てしまう。
- 元となるDockerイメージ
- コンテナ内で実行するコマンド
- 環境変数などの設定値
こうした構成情報を記述しておくファイルがDockerファイルであり、docker buildコマンドを用いると、このDockerfileを元にしてDockerイメージを作成できるため無駄やミスがない。
Docker Compose
これまでのDockerは1つのコンテナを用いる話だった。先述の通りコンテナは論理的に１区画を創るものであり、複数のコンテナを生成することもできる。複数のコンテナを生成し、それらをコンテナ内部のネットワークで繋ぐこともできる。
これらを束ねるのがdocker-composeであり、その設定ファイルがdocker-compose.ymlである。
vue環境の構築
参考→https://cloudpack.media/43078
正直この通りやっていけばできる。複数選択のものはスペースで選択できる。
設定は少し変更あり。
FROM node:10.8.0-stretch
RUN npm install --global @vue/cli
WORKDIR /projects
version: '3'
services:
app:
build: .
ports:
- "8080:8080"
volumes:
- ".:/projects"
tty: true
$ docker-compose up -d
$ docker-compose exec app bash
# vue create app
Vue CLI v4.0.5
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Basic（一番目を選択）
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: Mocha
? Pick a E2E testing solution: Cypress
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies: NPM
構築が終わったらappディレクトリに移行して下のコマンドを実行。ブラウザからlocalhost：8080にアクセスして確認。
# cd app
# npm run serve
ctrl+Cで終了し、exitでDockerから抜けた後$ docker-compose downでコンテナごと終了。