【Vue.js】Docker Composeで開発環境を構築する
Dockerは事前にMacにインストールされていることを前提とします。
手順
Vue.jsの開発環境を構築して起動するまでの手順です。
- Node.jsのバージョンを確認
- DockerHubを確認
- Dockerfileの作成
- docker-compose.ymlの作成
- コンテナの起動
- コンテナ内の作業
Node.jsのバージョンを確認
Node.jsを利用するため、利用するバージョンを見てみます。色々あるバージョンの中でも、公式サイトを見て推奨版であるLTSを確認します。LTSとはLong-term Supportの略で、長期の保守運用が約束されたバージョンです。
CURRENTもありますが、CURRENTとは最新版だけど安定性を約束しないことで、機能追加を盛り込んだバージョンのことです。
DockerHubを確認
Node.jsのimageは、DockerHubから探します。DockerHubとは、ユーザーが作成したコンテナをアップロードして公開・共有できるサービスです。その中でも、Dockerのコンテナ用によく使われる軽量LinuxディストリビューションのAlpine Linuxを使います。
今回は、node:14.17.1-alpineを使うことにします。
Dockerfileの作成
Dockerfileとは、Dockerイメージを作成するための一連の手順が含まれたファイルです。
FROM node:14.17.1
WORKDIR /src
RUN yarn global add @vue/cli
FROMはコンテナで使うimageを指定します。RUNには実行したいコマンドを指定します。RUNの設定を見るとVue CLIをグローバルインストールしていることが分かります。ちなみにnode14のimageには最初からyarnが入っているためyarn installをする必要はありません。
Dockerfileの必要性
Dockerfileは状況によって不要な場合があります。すでに公開されているimageのみで構成できるのであればDocekerfileは不要です。
今回はNodeのimageにVueを追加したいため、Dockerfileを用意しました。もし、Vueを使わずにNode.jsのimageをそのまま使うのであれば、Dockerfileは作成せずにdocker-compose.ymlに直接imageを指定するだけで良いです。
docker-compose.ymlの作成
Docker Composeは複数のコンテナをまとめて管理するためのツールです。単体のコンテナだけであれば、Docker Composeは不要ですが、今後複数のコンテナを管理したいケースを想定して、docker-compse upで起動出来るようにします。
touch docker-compose.yml
version: '3.8'
services:
app:
build: .
container_name: vue-project
ports:
- '8080:8080'
volumes:
- ./:/src
stdin_open: true
tty: true
version
Docker Composeのバージョン情報を記載します。versionは古い定義の記法を使いたいなどの理由がなければ、最新バージョンを指定します。バージョンの確認はこちらです。version: 3 のように小数点を省略すると3.0として扱われるため、正しく書きます。
services
起動するコンテナの定義を行います。今回はVue.jsしか入れないため、appのみ定義しました。他によく見るパターンはweb nginx db mysqlなどですが、必要に応じて定義してください。
image
imageはアプリケーションを動かすための環境です。例えばCentOSやAlpineなどのOS、NginxやMySQLのようなミドルウェア、PHPやRubyのようなランタイムなどの環境を提供してくれます。imageにはdocker buildの実行情報を書きます。定義した情報を元にDockerをビルドし、そのビルドしたimageを使用してコンテナを起動します。
container_name
コンテナ名を指定します。指定しない場合はDocker Composeで勝手に決められます。
ports
ポートの開放を行います。左にホスト側のポートを、右にコンテナ内のポートを指定します。例えばservicesをdbにし、mysqlのportをデフォルト設定の3306にした場合、mysqlはコンテナ内にあるため、右側のポートをmysqlの設定と同じ3306にする必要があります。ただし、今回はmysqlのようなミドルウェアの設定はないため、任意のポート8080を設定しています。
volumes
ボリュームのマウントを行います。ボリュームとはデータを永続化できる場所のことで、外部HDDに近いイメージです。コンテナは破棄すると消えてしまうため、データを永続化したいときは、コンテナの外にデータを置く必要があります。そしてマウントとは、ホスト側（コンテナの外）にあるディレクトリやファイルを、コンテナの中から利用できるようにすることです。volumesの指定は、コロンを堺に左にホストのパスを、右にコンテナのパスを指定します。
stdin_open
標準入力を開き続けてくれます。CLIでコンテナに入って操作したい場合に必要です。
docker runコマンドの場合、-iオプション（または--interactive）に相当します。stdinとはstandard inputを略したもので、コンピュータの標準入力のことです。
公式サイトからの引用
-i フラグは双方向に接続できるようにするため、コンテナの標準入力 (STDIN)を取得します。
tty
コマンドラインでの操作や、コマンドの出力結果を対話的に行うためのインターフェースで、これがないとdockerを起動しても正常終了してしまいます。TTYを割り当てることで、起動し続けてくれます。Cronで一時的に起動したい時などはTTYは不要です。
docker runコマンドの場合、-tオプション（または--tty）に相当します。
公式サイトからの引用
-t フラグは、新しいコンテナの中に疑似ターミナル (pseudo-tty) を割り当てます。
コンテナの起動
-dオプションで、コンテナをバックグラウンドで起動します。バックグラウンドで起動することで、ターミナルを閉じてもコンテナは起動し続けます。
docker-compose up -d
コンテナの起動状況は、docker-compose psで確認してください。ログを見たい場合はdocker-compose logsで確認します。docker-compose psを実行した時にStateがUpになっていれば、コンテナの起動は完了しています。
コンテナ内の作業
コンテナ内に入ります。
docker-compose exec app /bin/bash
Vueの雛形を作成します。色々質問されますので、設定はよしなに選んでください。
root@812319f6b13c:/src# vue create .
// 省略
Done in 53.05s.
🎉 Successfully created project src.
👉 Get started with the following commands:
$ yarn serve
インストールが完了したら「以下のコマンドで始めてみましょう。 $yarn serve」と言われますので実行します。
yarn serve
http://localhost:8080/ にアクセスします。
これで完了です。
コンテナ内に入らずにVueを起動
Vueを起動するだけなのに、毎回コンテナ内に入るのは面倒です。そのため、docker-compose up -dをした状態で、以下のコマンドを実行するとコンテナ内に入らなくても起動できます。
docker-compose exec app yarn serve
imageの作成・削除
imageはもう使わないという場合は、以下の手順を行います。
docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
vue-project_app latest c37448187176 3 hours ago 1.27GB
docker rmi c37448187176
参考
Discussion