• 概要
• ファイル構成
• コンテナ立ち上げに必要なファイルを用意
• コンテナのビルド・立ち上げ
• Vueプロジェクトを作成
• サーバーの立ち上げ・起動確認
• TypeScriptを有効にする
• コンテナの停止
• 最後に
• 参考

1. 概要

Vue 2と3で書き方の違いを確認するため、今回はDockerでVue 2と3 + TypeScriptの環境構築を行います。

2. ファイル構成

(root)
  ├ vue2/
  ├ vue3/
  ├ docker-compose.yml
  └ Dockerfile

3. コンテナ立ち上げに必要なファイルを用意

3-1. docker-compose.yml

version: "3.8"
services:
  vue2:
    container_name: vue2
    build: .
    volumes:
      - ./vue2:/app
    working_dir: /app
    ports:
      - "8080:8080"
    tty: true

  vue3:
    container_name: vue3
    build: .
    volumes:
      - ./vue3:/app
    working_dir: /app
    ports:
      - "8081:8080"
    tty: true

3-2. Dockerfile

FROM node:22-alpine

WORKDIR /app

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

CMD ["/bin/sh"]

4. コンテナのビルド・立ち上げ

docker compose up -d --build
docker ps

5. Vueプロジェクトを作成

docker exec -it vue2 sh
docker exec -it vue3 sh
vue create front

片方はVue 2、片方はVue 3を選択

Use NPMを選択（ここは案件や好みによりけりです）

/app/frontにVueの各ファイルが生成されていることを確認

6. サーバーの立ち上げ・起動確認

vue2、vue3に対して下記コマンドでサーバーを立ち上げる

cd front
npm run serve

localhost:8080（Vue2）、localhost:8081（Vue3）にアクセスし、どちらもVueのデフォルト画面になればOK！

7. TypeScriptを有効にする

vue add typescript

いくつか聞かれるが、特に理由がなければ全てYesにする

再度サーバーを立ち上げ、localhost:8080、localhost:8081にアクセスし、問題ないことを確認（TypeScriptが追加されている）

8. コンテナの停止

docker compose stop

9. 最後に

今回はVue2と3の違いを勉強するため、簡易的に環境構築を行いました。

次回は具体的に学んだことを記事にしていきます。

10. 参考

• Docker環境でVue3+TypeScriptの環境を構築する

投稿者プロフィール

KatoShingo

学んだことをアウトプットしていきます！
好きなこと：音楽鑑賞🎵 / ドライブ🚗 / サウナ🧖

最新の投稿

• 【PHP】2024年6月13日【PHP】PHP7から8への移行のために知るべきこと
• 【PHP】2024年6月10日【PHP】PHP8の新機能を具体的なコードで理解する
• 【Docker】2024年6月4日【Docker】Vue2と3 + TypeScript開発環境を構築する
• 【Docker】2024年5月30日【Docker】てっとり早くPHP8環境を構築する