Help us understand the problem. What is going on with this article?

docker-composeを使ってVue.jsのプロジェクトを作成して、Dockerで動かしてみた

More than 1 year has passed since last update.

docker-composeを使ってVue.jsのプロジェクトを作成して、Dockerで動かしてみました。

プロジェクトを作成するディレクトリを作成する

directory
/hoge_directory

プロジェクトを作成するためのdocker-compose.ymlを作成する

directory
/hoge_directory
    |_ docker-compose.yml
docker-compose.yml
version: '3'
services:
  node:
    image: node:12.7.0-alpine
    volumes:
      - .:/vuejs

今回はコンテナ内で作成したVue.jsプロジェクトを、ホストに同期させて作るので、
ホスト側のhoge_directoryとコンテナ内の/vuejsをマウントする

    volumes:
      - .:/vuejs

docker-composeでサービスを起動して、コンテナ内に入る

sh
$ docker-compose run node sh

マウントされている/vuejsに移動する

sh
/ # cd vuejs/

Vue CLIをインストールする

今回はVue CLIを使用して、プロジェクトを作成するので、Vue CLIをインストールする

sh
/vuejs # yarn global add @vue/cli

Vue.jsのプロジェクトを作成する

sh
/vuejs # vue create .

上記のコマンドを実行すると、対話式でプロジェクトの設定をしていく

YESを選択
?  Your connection to the default yarn registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? (Y/n) Y
YESを選択
? Generate project in current directory? (Y/n) Y
defaultを選択
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint) 
  Manually select features
Yarnを選択
? Pick the package manager to use when installing dependencies: (Use arrow keys)
❯ Use Yarn 
  Use NPM 

コンテナ内と、ホスト側に、プロジェクトが作成される

コンテナ
/vuejs
    |_ node_modules
    |_ public
    |_ src
    |_ .gitignore
    |_ babel.config.js
    |_ docker-compose.yml
    |_ package.json
    |_ README.md
    |_ yarn.lock
ホスト
/hoge_directory
    |_ node_modules
    |_ public
    |_ src
    |_ .gitignore
    |_ babel.config.js
    |_ docker-compose.yml
    |_ package.json
    |_ README.md
    |_ yarn.lock

プロジェクトの作成完了!!!

dockerVue.jsを動かす

Dockerfileを作成する

directory
/hoge_directory
    |_ node_modules
    |_ public
    |_ src
    |_ .gitignore
    |_ babel.config.js
    |_ docker-compose.yml
    |_ package.json
    |_ README.md
    |_ yarn.lock
    |_ Dockerfile <- 作成
Dockerfile
FROM node:12.7.0-alpine

WORKDIR /myapp

COPY package.json ./
COPY yarn.lock ./

RUN yarn install

docker-compose.ymlを修正する

docker-compose.yml
version: '3'
services:
  view:
    build: .
    command: yarn run serve
    volumes:
      - .:/myapp
      - /myapp/node_modules
    ports:
      - "8000:8080"

Vue.jsプロジェクトをマウントした場合に、
コンテナ側のnode_modulesが上書きされて、削除される場合があるので、
マウントされないようにする

volumes:
      - ./vuejs:/myapp
      - /myapp/node_modules <- マウントで上書きされなくなる

(プロジェクトが作成される時に作成される.gitignoreでは、
node_modulesはデフォルトで無視されているので、Gitで共有していると、
コンテナが立ち上がらなくなる)

サービスを起動して、コンテナを立ち上げる

sh
$ docker-compose up -d

アクセスする

URL
http://localhost:8000/

スクリーンショット 2019-07-28 13.19.29.png

終わり

マウントした時に、node_modulesが上書きされて、削除されるのは、
なかなかハマりました...

https://github.com/tubutubumustard/vuejs_docker

tubutubu_mustard
Dockerとか便利なものが好き
sorich
SORICHはWebシステム開発を主軸に、デザイン・Web制作・アプリ開発・IoTまで、クライアントの幅広いニーズに対応する技術者集団です。
https://www.sorich.jp/
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.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした