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などをインストールする。

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の開発サーバ用のポートをそれぞれホスト側でも使用できるようにしておく。

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。