DockerでVue.jsとApacheの環境を作成する

Vue.jsとApacheの環境をDockerで作成する手順をまとめておく。

環境

Docker Desktop（Windows10 Pro）。
PS > docker --version Docker version 20.10.6, build 370c289 PS > docker-compose --version docker-compose version 1.29.1, build c34c88b2

Dockerイメージ

Docker HubにあるDocker公式のApacheイメージ（httpd:2.4）を使う。Docerfileを用意してこのイメージにnode.jsやVue.jsなどをインストールする。

Dockerfile

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

FROM httpd:2.4   WORKDIR /app   # node.jsなどをインストール RUN apt-get update \  && apt-get -y install --no-install-recommends \     nodejs \     npm \     curl \  # キャッシュ削除  && apt-get clean   # node.jsを最新にする RUN npm install -g n \  && n stable \  && apt purge -y \     nodejs \     npm   # Vue.jsとCLIインストール RUN ["/bin/bash", "-c", " \     source ~/.bashrc \      && npm install vue \      && npm install -g @vue/cli \  "]   EXPOSE 80 8080

docker-compose.ymlの用意

docker-composeでコンテナを起動するためにdocker-compose.ymlを用意する。Dockerfileでイメージをビルドするようにし、ApacheとVue.jsの開発サーバ用のポートをそれぞれホスト側でも使用できるようにしておく。

docker-compose.yml

1 2 3 4 5 6 7 8 9 10 11 12

version: "3" services:   vue:     container_name: vue     build:       context: .       dockerfile: Dockerfile     environment:       TZ: 'Asia/Tokyo'     ports:     - 80:80     - 8080:8080

Vue.jsプロジェクトを作成する

コンテナを起動してプロジェクトを作成する。まずはコンテナの起動。

PS > docker-compose up -d

次にコンテナに入る。

PS > docker-compose exec vue bash

Vue.jsプロジェクトを作成する。

# vue create sample

開発サーバを起動。

# cd sample # npm run serve

ブラウザでhttp://localhost:8080にアクセスすると次のサンプルページが表示される。

開発サーバで確認ができたらビルドしてApacheで表示してみる。

# npm run build # cd dist # cp -a * /usr/local/apache2/htdocs/

ブラウザでhttp://localhostにアクセスして開発サーバのときと同じ画面が表示されればOK。