Zenn
🔪

Docker×Vueでサクッと作る（前編）〜環境構築〜

2023/07/15に公開
Docker
JavaScript
Vue.js
frontend
frontend
tech

背景

最近はReactやモバイルアプリを触ってばっかりでしたが、仕事で半年ぶりくらいにVueを触ることになったので、リハビリがてらかっこいい感じのフロントを作ってみようと思い立ちました。
（めんどくさすぎて記事を書くのが億劫なので、この思い立った勢いで書いてます。）
というわけでこの記事では、まずハロワまでサクッとやっていきたいと思います!

筆者の環境

Dockerだからあまり関係ないとは思うが一応。

  • MacBook Air(M1 chip)
  • OSバージョン 13.4.1

構成

フロント、バック、データベースをそれぞれ別コンテナにします。
フロントエンドはホスティングサービスを使ってバックエンドはAPIサーバ、DBはDBサーバみたいなイメージです。

Dockerの構築

今回立てるのは以下の3つのコンテナ。
分かりやすくするために名前をつけておく。

  • db-container
  • api-container
  • web-container
    （webという名前にしちゃったのはミスですね...）

ディレクトリ構成は以下。

DBコンテナとAPIコンテナ(バックエンド)は見ての通りシンプルなmySql×apachenなので割愛。
今回はvue-cliでサクッと作るところが本題です。

web-containerのdockerFile

FROM node:18.1-alpine

WORKDIR /app

RUN apk update && \
    npm install -g npm && \
    npm install -g vue-cli

EXPOSE 8080

docker-compose.ymlの中身

version: '3'

services:
  web:
    container_name: 'web-container'
    build: ./docker/web
    environment:
      - NODE_ENV=development
    volumes:
      - ./web-container/app:/app
    ports:
      - '8080:8080'
    tty: true

  api:
    container_name: 'api-container'
    build: ./docker/api
    environment:
      - NODE_ENV=development
    volumes:
      - ./api-container/www:/var/www
      - ./docker/web/apache/default.conf:/etc/apache2/sites-enabled/000-default.conf
    ports:
      - '8000:80'
    tty: true

  db:
    container_name: 'db-container'
    build: ./docker/db
    environment:
      - MYSQL_ROOT_PASSWORD=root
      - MYSQL_DATABASE=local_db
      - MYSQL_USER=docker_user
      - MYSQL_PASSWORD=docker_pass
    ports:
      - '3306:3306'
    volumes:
      - ./docker/db/mysql/:/var/lib/mysql/
      - ./docker/db/init:/docker-entrypoint-initdb.d

DBコンテナとAPIコンテナはなんでもいいのでいつものやつの使いまわしですw

  • db-container(mySql)
  • api-container（Laravel）
  • web-container(Vue3)

以下を実行してコンテナを3つ建てる

docker-compose up --build

Vueプロジェクトを作る

今回は何も考えずに（？）サクッと作りたいので、vue-CLIを使う。
コンテナを起動したら、DockerデスクトップのUIでターミナルアイコンをクリックして、CLIを起動する。


CLIの黒い画面で以下を実行。

vue create vue-sample

この時に以下で怒られる場合は言われた通りにする。

npm uninstall -g vue-cli && npm install -g @vue/cli

再度コマンドを実行。

vue create vue-sample

なんか聞かれるので、vue3を選択する。
そして我々Macユーザが好きなyarnを選択。

以下が表示されれば成功。

# 確認
言われた通りにやれば見れる。

cd vue-sample && yarn serve

終わり

マジでサクッとできるなぁ。
ここからかっこいい画面を作っていくぞ〜。
果たして後半は出るのか！？
記事が書けますように。（がんばれ未来の自分。）

Discussion