vue.jsをDockerコンテナ上でローカル開発できるようにする

vue.jsをDockerコンテナ上でローカル開発できるようにしてみます！

以下の流れで進めていきます

docker-compose.yml作成
Dockerfile作成
コンテナ起動
コンテナ内でvueプロジェクト作成
サーバ起動

では早速やってみます！

vue.jsのローカル開発環境構築

docker-compose.ymlファイル作成

＜ファイル名＞

docker-compose.yml

＜ファイルの中身＞


services:
  web:
    build: .
    image: vueweb
    volumes:
      - .:/app
    container_name: 'web'
    ports:
      - '8080:8080'
    tty: true

Dockerfile作成

＜ファイル名＞

Dockerfile

＜ファイルの中身＞


FROM node:22
RUN npm install -g @vue/cli
EXPOSE 8080

コンテナ起動

以下のコマンドでコンテナを立ちあげます

docker-compose up --build

コンテナ内でプロジェクト作成します

まず以下のコマンドでコンテナの中に入ります。

docker-compose exec web bash

次に以下のコマンドでプロジェクトを作成します。

vue create sample

サーバ起動

以下のコマンドでサーバ起動します。

cd sample && npm run serve

動作確認

以下のURLにブラウザからアクセスして画面表示されればOKです！

http://localhost:8080/

以下のような画面が表示されるはずですー

docker-compose.ymlの微調整

vueがコンテナ上で正常に動くようになりましたが、このままですと、コンテナ起動のたびにコンテナ内で「cd sample && npm run serve」を実行する必要があります。

これは面倒なので以下のように、docker-compose.ymlに「cd sample && npm run serve」を追加して、コンテナ起動時にサーバ起動するようにします。

修正後のファイルは以下のようになります。

＜ファイル名＞

docker-compose.yml

＜ファイルの中身＞


services:
  web:
    build: .
    image: vueweb
    volumes:
      - .:/app
    command: sh -c "cd sample && npm run serve"
    container_name: 'web'
    ports:
      - '8080:8080'
    tty: true

まとめ

vue.jsのローカル開発環境構築をして、vue.jsをコンテナ上で動かしてみました。

ここから本格的にvue.jsの開発をしていきます！！