Zenn
📦

Docker + Bun + Vue3の環境構築

2024/06/20に公開
Docker
Vue.js
docker-compose
Bun
tech

モチベーション

Bunを触ってみたいと思い、複数端末で開発できるようにDockerで環境構築を行いました。

環境

  • Kernel : 6.9.3-arch1-1
  • docker : 26.1.4
  • docker compose : 2.27.1

Dockerfile, compose.yamlの記載内容

Dockerファイルは下記のように記載します。
Dockerfile内でBunをインストールし、パスも設定することでビルド後にすぐにBunコマンドが使えるようになります。

Dockerfile
FROM debian:latest

# add bun dependencies
RUN apt-get update && apt-get install -y \
    curl \
    unzip \
    zip

# add bun
RUN curl -fsSL https://bun.sh/install | bash 
ENV PATH="/root/.bun/bin:${PATH}"

WORKDIR /app

compose.yamlファイルの記載は下記です。
特別な記載は行っていませんが、docker-compose.ymlで書かれることが多いところをdocker composeの推奨ファイル名であるcompose.yamlにしています。
また、yamlファイルにて記載するversionに関しては現在は記載しなくても最新のものを使用するみたいなので記載を削除しています。

compose.yaml
services:
  frontend:
    image: awesome/webapp
    build:
      context: .
      dockerfile: Dockerfile
    working_dir: /app
    volumes:
      - ./:/app 
    ports:
      - '5173:5173'
    expose:
      - '5173'
    tty: true

実際に環境を作成する

Dockerfileに全部記載すればよいのですが、一旦簡単のために初回起動とサーバー起動は手動で行います。(いつかここもDockerfileに統合したい

  1. コンテナをビルドし、環境内へ入る
terminal
docker compose up -d --build
docker compose exec frontend bash
  1. (初回のみ)コンテナ内でvue環境を作成(手順はVue.jsの公式クイックスタートを参照)
    Project nameからAdd Vue DevTools 7...はお好みで設定してください。
terminal
bun create vue@latest
✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Addhttps://vuejs.org/guide/quick-start Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

cd <your-project-name>
bun install
  1. Vue.jsのサンプルを起動
    下記コマンド実行後、localhost:5173にアクセスしてVueのサンプルページが出れば成功です。
terminal
bun run dev

さいごに

Docker自体久しぶりに触ったら、version記載が不要になっていたりと見ないうちに仕様はどんどん変わるので気になる技術は触らなくてもキャッチアップしていく必要があるのだと思った。

参考

Discussion