Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
5
Help us understand the problem. What is going on with this article?
@ya_mori

Vue.js + Docker Compose で ホットリロードしながら開発する環境をつくる

More than 1 year has passed since last update.

はじめに

個人の開発用に Vue.js の動作環境を Docker に移行してみたら、とても捗ったのでメモがてら投稿します。

手順

前提

  • Vue.js のプロジェクトはできている
  • npm run serve で、 Vue.js が立ち上がるように設定されている

1. Dockerfile を作成

プロジェクトの直下に作成します。

FROM node:lts-alpine

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

EXPOSE 8080

CMD ["npm", "run", "serve"]

これで、 Vue.js を動作させる Docker Image を作成することができます。

2. docker-compose.yml を作成

こちらもプロジェクト直下に作成します。

docker-compose.yml
version: "3"
services:
  app:
    container_name: web
    build: 
      context: .
      dockerfile: Dockerfile
    ports:
        - 8080:8080
    volumes: 
        - .:/app

volues でプロジェクトを Docker コンテナにマウントさせることで、 npm run serve の Hot Road が利くようになります。

起動する

プロジェクト直下で下記コマンドを実行します。

docker-compose up

localhost:8080 へアクセスすると、 Vue.js が起動しているのが確認できると思います。

終わりに

Dockerはありがたいですね。
少しでもあなたの為になれば幸いです。

5
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
5
Help us understand the problem. What is going on with this article?