タイトル通りですが、WSL2のUbuntu20.04にDocker＋Vue.jsの開発環境を作成する方法を紹介します。
今回目指すのは開発環境の構築なので、webサーバはwebpackに同梱されているwebpack-dev-serverを利用します。NginxやApacheといったwebサーバは利用しません。
また、他の人の記事ではDocker+Vueの環境構築にdocker copmoseをよく利用していますが、この記事で紹介する方法ではdocker composeは利用しません。
docker composeは複数のコンテナを起動するときには便利ですが、一つしかコンテナを使わないなら使う必要はないと考えているからです。Vueの開発環境を作るためには、Vueが動くためのコンテナが一つあれば十分です（本番環境用は別の話です）。
Dockerのインストール、Dockerfileの作成、コンテナの起動、Vueプロジェクトの作成という流れで紹介していきます。
WSLは本当に便利になりましたよね。Windows+Linuxのデュアルブートをしていた頃が懐かしいですね。
利用する環境やツール
この記事を書くときに動作確認したときの環境やツールは下記です。
- Windows10 (OSビルド21364)
- WSL2, Ubuntu20.04
- docker
- Vue.js v2.x, Vue CLI
- Node.js v14.x
- Webpack
- Yarn
自分はWindows Insider Programに登録していてDevチャンネルのビルドバージョンを利用しています。ただ、今回の内容はDevチャンネルである必要もInsider Programに入る必要もないので、安心してください。
あと、今回はパッケージマネージャとしてnpmではなくてyarnを利用します。別にどちらでも構わないので、npmに慣れている方はnpmを利用してください。
Docker Desktop for Windowsのインストール
それでは環境構築を始めていきます。まず、WSLにdockerをインストールしましょう。
ここでのポイントは、操作するのはWindows側ということです。WSLにdockerをインストールするのでWSL側で操作すると思いきや、Windows側を操作していきます。
WindowsにDocker Desktop for Windowsをインストールしましょう。インストール方法はMicrosoftが提供しているドキュメント（WSL2でのDockerリモートコンテナーの概要）通りです。ソフトウェアをダウンロードしてインストールウィザードに従ってインストールするだけなので、非常に簡単です。
Windowsにdockerを入れるだけでWSLにもdockerが入るのは非常に楽ですね！
Vue用のdockerイメージを作成
VueとVue CLIを利用できるdockerコンテナを作成していきます。
ディレクトリの作成
まず、ルートディレクトリを作成してDockerfileを作成します。
# wsl内のディレクトリ(/home/user/hoge/...)に配置してください。
$ mkdir project_root
$ cd project_root
$ touch DockerfileDockerfileの編集
Dockerfileの中身は下記です。単純に必要なパッケージをインストールしているだけです。nodeのバージョンは適宜要件に合わせて変更してください。
FROM node:14.16.1-alpine
WORKDIR /app
RUN apk update && \ npm install && \ npm install -g npm && \ npm install -g @vue/cli && \ npm install -g @vue/cli-initイメージの作成
Dockerfileからdockerイメージをビルドしましょう。
# wsl側でイメージをビルド。<image name:tag>は適宜変更
$ docker build -t vue_app:1.0 .Vueアプリケーションの作成と起動
vue-cliを利用して、サンプルプロジェクトを作成していきます。ポイントは下記二つです。
- コンテナ起動時にproject_rootディレクトリをrwモードでマウントする
- コンテナ起動時にポートフォワーディングの設定を行う
project_rootディレクトリをマウントする理由は、コンテナ内の編集をホストに反映させるためです。
また、ポートフォワーディングは結構忘れがち（自分だけ？）ですが、dockerでwebサーバを立ち上げるときには必要なので気を付けましょう。
# project_rootへのパスを環境変数にいれる
$ export PROOT=/path/to/project_root
$ cd $PROOT
# $PROOTをrwモードでマウントしてコンテナ起動
# ポートフォワードの"-p 8080:8080"オプションを忘れないこと
$ docker run -it --rm -p 8080:8080 --volume="${PROOT}:/app:rw" --name="vue-app" vue_app:1.0 sh
# ここから先はコンテナ内の処理
# プロジェクトの作成（yarn registryに関する質問は"Y"で良い）
/app # vue create vue_project --default
/app # cd vue_project
/app # yarn serve
... App running at: - Local: http://localhost:8080/
...コンテナ上で、yarn serveでビルドが成功したらサンプルプロジェクトの作成は成功しています。
あとはWindowsのブラウザからhttp://localhost:8080にアクセスして、下記の画面がでれば正常です。
デフォルトでホットリロードも有効になっているはずです。これで開発できますね。
おまけ：利用するポートとhostを変更する
デフォルトのlocalhostと8080を変更したい時は、作成されたvue_projectディレクトリの下にvue.config.jsを作成します。
# vue.config.jsを作成する
$ cd vue_project
$ touch vue.config.js// hostが'0.0.0.0'で、ポートが5000の例
module.exports = { devServer: { port: 5000, host: '0.0.0.0', }
}まとめ
この記事では、WSLにDocker+Vueで開発環境を作成する方法を紹介しました。あまり難しいことはないかなと思います。
自分がはまったのは、dockerの起動時にポートフォワードのオプションを付ける部分です。ついつい忘れてしまうんですよね。気を付けましょう。
グーグルで調べていると開発環境の構築でもdocker composeを利用する方法がたくさんでてきますが、コンテナが一つの場合は利用する必要はないと思います。Dockerfileに加えてdocker-compose.ymlも管理しないといけなくなるので、ちょっとめんどくさくなります。
ただ、本番環境での運用においてはnginxやapacheを利用することになると思うので、そのときにはdocker composeが便利だと思います。
Nginxを利用した本番環境用の環境構築も記事にしたので、興味のある方は下記をご覧ください。
