この記事では、Windows10のWSL2 Ubuntu20.04を利用して、Docker+Vue+Nginxの環境を整える方法を紹介します。
前回はDocker＋Vueの開発環境を整える方法を紹介しましたが、今回は本番運用を見据えてDocker+Vue+Nginxな環境を作成します。
この記事ではDockerのインストール方法やVueプロジェクトの作成方法はあまり触れませんが、そのあたりは前回の記事にまとめているのでそちらを参考にしてください。
利用する環境やツール
今回利用する環境やツールは下記の通りです。
- Windows10 (OSビルド21364)
- WSL2 Ubuntu20.04
- docker, docker compose
- Vue.js v2.x, Vue CLI
- Node.js v14.x
- Nginx
- webpack
今回は2つのコンテナ（Nginx用とVue用）を利用するので、docker composeを利用したコンテナ管理を行います。
apacheを使いたいとか、docker composeを使いたくないという方もいると思いますが、基本的な部分は同じなので参考にはなると思います。
プロジェクトの作成
今回利用するプロジェクト全体のディレクトリ構造を示した後、それぞれのファイル・ディレクトリについて説明していきます。
ディレクトリ構造
大まかに2つのディレクトリに分かれていて、Dockerの設定ファイルを入れるディレクトリ(containers)とプログラムのソースコードを入れるディレクトリ(vue_project)です。
また、docker-compose.ymlも用意します。
$ pwd
/path/to/project_root
# 一部省略しています
$ tree
.
|-- containers
| |-- nginx
| | |-- Dockerfile
| | `-- nginx.conf
| `-- vue_app
| `-- Dockerfile
|-- docker-compose.yml
`-- vue_project |-- README.md |-- build |-- config |-- dist |-- index.html |-- node_modules |-- package-lock.json |-- package.json |-- src |-- static `-- testcontainersディレクトリ
containersディレクトリには、Dockerfileとdocker用の設定ファイルを入れます。それぞれのファイルの中身を紹介していきます。
それぞれ最小限の設定しかいれていませんが、設定についてわからない場合はそれぞれ調べてみてください。
【vue用のDockerfile】
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【nginx用のDockerfile】
FROM nginx:1.19.10
RUN apt-get update && \ apt-get install -y vim less【nginxの設定ファイル】
user nginx;
events { worker_connections 2048; multi_accept on; use epoll;
}
http { charset UTF-8; server { listen 80 default; server_name localhost; root /var/www/html/dist; index index.html; charset utf-8; }
}vue_projectディレクトリ
こちらは、vueプロジェクトのソースコードを入れるディレクトリです。
vue create vue_projectで自動生成されたものをそのまま利用しています。vue createでプロジェクトを作成する方法は、冒頭で紹介した前回の記事で扱っているので、そちらを参考にしてください。
重要なのは、vue createで作成したプロジェクトを一度ビルドしてdistディレクトリを作成することです。
# vue createが実行できるコンテナ等を利用する
$ vue create project_root
$ cd project_root
$ yarn buildyarn buildでdistディレクトリが出来上がっていたら大丈夫です。
docker-compose.ymlファイル
docker composeの設定ファイルです。
version: "3.8"
services: nginx: build: ./containers/nginx container_name: nginx ports: - '8080:80' volumes: - ./vue_project:/var/www/html - ./containers/nginx/nginx.conf:/etc/nginx/nginx.conf vue-app: build: ./containers/vue_app container_name: vue-app volumes: - ./vue_project:/app tty: trueここは、各項目について簡単に補足します。
| 設定項目 | 内容 |
|---|---|
| services | アプリケーションを動かすための要素であるサービスを記述するフィールドのこと |
| build | Dockerfileの存在するディレクトリを指定 |
| container_name | コンテナ名を指定（docker runの–nameオプション） |
| ports | ポートフォワードの設定。ホスト：コンテナの順番で設定する |
| volumes | ホストとコンテナで共有するディレクトリを指定する |
| tty | docker compose upした後にもコンテナを起動し続けるときにtrueを指定する |
難しい設定は入れていないので、なんとなくわかるかと思います。
Docker composeによるアプリケーションの起動
ようやく最後です。docker composeコマンドでコンテナを起動し、接続確認を行います。
$ cd /path/to/project_root
$ docker compose up --build
# バックエンドで動かしたい時
$ docker compose up --build -d上記コマンドを実行後、Windows側のブラウザでhttp://localhost:8080にアクセスしてください。下記のようなページが表示されていれば成功です。
まとめ
WSL2のUbuntu20.04にDocker + Vue + Nginxの開発環境を整える方法を紹介しました。本番環境での運用を見据えたときには、NginxやApacheを利用することが選択肢にはいってきますよね。
今回紹介した方法では、ビルドしないとソースコードの変更が反映されない（ホットリロードができない）です。ホットリロードな開発環境を作りたい場合は前回の記事を参考にしてみてください。
Dockerの利用は環境を汚さないだけではなく、クラウドへのデプロイも簡単になりますよね。最初の環境構築がめんどくさいですが、この記事が参考になれば幸いです。
