【Docker】Vue2と3 + TypeScript開発環境を構築する

Docker

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:8080localhost:8081にアクセスし、問題ないことを確認(TypeScriptが追加されている)

8. コンテナの停止

docker compose stop

9. 最後に

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

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

10. 参考

投稿者プロフィール

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

関連記事

  1. 【Docker】初めてのDocker#2(Hello World~コン…

  2. 【Docker】初めてのDocker#3(docker-compose…

  3. Docker

    【Docker】てっとり早くPHP8環境を構築する

  4. Docker

    WSL2上のUbuntuの中でDockerを動かすには?

  5. 【Docker】初めてのDocker#1(環境構築)

  6. Docker

    【Docker】DockerでMySQLを起動

最近の記事

  1. PHP
  2. PHP
  3. TypeScript
  4. Docker
  5. AWS
  6. Docker

制作実績一覧

  1. Checkeys