DockerでWSL上にVue＋Nginxな環境を整える

この記事では、Windows10のWSL2 Ubuntu20.04を利用して、Docker+Vue+Nginxの環境を整える方法を紹介します。

前回はDocker＋Vueの開発環境を整える方法を紹介しましたが、今回は本番運用を見据えてDocker+Vue+Nginxな環境を作成します。

この記事ではDockerのインストール方法やVueプロジェクトの作成方法はあまり触れませんが、そのあたりは前回の記事にまとめているのでそちらを参考にしてください。

4月 25, 2021 WSL2のUbuntu20.04で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
    `-- test

containersディレクトリ

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 build

yarn 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

ここは、各項目について簡単に補足します。

難しい設定は入れていないので、なんとなくわかるかと思います。

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の利用は環境を汚さないだけではなく、クラウドへのデプロイも簡単になりますよね。最初の環境構築がめんどくさいですが、この記事が参考になれば幸いです。