docker on WSL2でVue環境を構築する方法
WSL2の登場でWindowsのWeb開発がとても簡単になりました。Windowsでもdockerがそのまま動作しますし、WindowsからWSL2へのアクセスもしやすくなっています。
ここでは、WSL2を使ってWindows上にVueの開発環境を作成する方法を記載します。簡単なVueプロジェクトを作成し、動作を確認するところまでやってみたいと思います。
環境
ここで作成する環境は以下のような環境です。
- Windows10 + WSL2
- Ubuntu
- docker
- Alpine Linux
- Vue
Windows10のWSL2上にUbuntuを構築し、Ubuntuにdockerをインストールします。そしてdocker上にAlpine Linuxを構築し、Alpine Linux上にVueをインストールします。
手順
WSL2のインストールする
WSL2のインストール手順は以下の記事に記載しています。こちらの記事を参考にインストールをします。
Windows10 20H1 build 18917が登場。注目のWSL2をさっそく使ってみた！
Ubuntuとdockerのインストール&起動
Ubuntuとdockerのインストール手順については以下の記事に記載しています。こちらの記事を参考にインストールします。
Windows10でdockerを使用する方法(docker on WSL2編)
コンテナのファイルを格納するディレクトリを作成する
dockerでコンテナを作成する場合、コンテナごとにフォルダを作成しておくと管理がしやすくなります。
ここでは、/home/<user>/docker/vueディレクトリを作成して管理することとします。
以下のコマンドを実行してディレクトリを作成します。
$ cd
$ mkdir docker
$ cd docker
$ mkdir vue
$ cd vue
Dockerfileとdocker-compose.ymlを作成する
Alpine LinuxとVueを構築するDockerfileとdocker-compose.ymlを作成します。
Dockerfileとdocker-compose.ymlは先ほど作成した/home/<user>/docker/vueディレクトリ配下に保存します。
＜Dockerfile＞
FROM node:10.13-alpine
WORKDIR /app
RUN apk update && \
npm install && \
npm install -g npm && \
npm install -g @vue/cli
CMD ["/bin/bash"]
＜docker-compose＞
version: '3'
services:
web:
container_name: web
build: .
ports:
- 8080:8080
privileged: true
volumes:
- ./server:/app
tty: true
stdin_open: true
command: /bin/sh
portsの左の8080はUbuntuの動作しているポート、右の8080はdockerの動作しているAlpine Linuxのポートを表しています。
コンテナを作成する
Dockerfileとdocker-compose.ymlを作成したら、イメージをビルドします。
$ sudo docker-compose build
コンテナを起動する
コンテナを起動します。
$ sudo docker-compose up -d
Vueのプロジェクトを作成する
コンテナができたらコンテナに入り、Vuewプロジェクトを作成します。
以下のコマンドを実行して、コンテナに入ります。
$ sudo docker-compose exec web sh
※抜けるときはexitコマンド
次に、Vueプロジェクトを作成します。
$ vue create <project name>
最後に、作成したVueプロジェクトを起動します。
cd <project name>
npm run serve
以上で、Vueプロジェクトの作成が完了です。
動作確認
作成したVueプロジェクトにWindows上のブラウザからアクセスできるか確認してみます。
ブラウザを立ち上げアドレスにlocalhost:8080に入力し、以下が表示されれば無事Vueプロジェクトを作成できました。
※Windows10 build18945以降ではWSL2のホストへlocalhostでアクセスできるようになりました。build18945より前のビルドではlocalhostの代わりに、UbuntuのIPアドレスを入れてください。
最後まで読んでいただきありがとうございます。
また読んでくださいませ。
そんじゃーね。