Docker, vue-CLI3でVue.jsのHello,World

・docker-composeでNode.jsの環境を用意

・vue-CLI3をインストールし、vueプロジェクトを作成しブラウザに表示させる

(Dockerはすでにインストールされているとする)

Dockerfile

FROM node:10.14.1-alpine

# カレントワーキングディレクトリとして 'app' フォルダを指定する
WORKDIR /app

RUN npm install -g @vue/cli

docker-compose.yml

version: '3'

services:
  app:
    build: . # buildに書かれているパスのDockerfileを参考にしてイメージを構築
    command: sh -c "cd my-app; npm run serve"
    ports:
      - 8070:8080 # vueの開発用サーバーのデフォルトポートは8080
    volumes:
      - .:/app

Dcokerイメージを作成

docker-compose build

省略

+ @vue/cli@3.2.1
added 670 packages in 64.507s
Removing intermediate container ed09095acb4c
 ---> 70e656d86d3d
Successfully built 70e656d86d3d
Successfully tagged vue_app1_app:latest

vueプロジェクトを作成プロジェクト名はmy-appにしています。

作成時に選択する箇所があるので
・デフォルト
・NPMを選択しました。

docker-compose run app vue create my-app

省略


🎉  Successfully created project my-app.
👉  Get started with the following commands:

 $ cd my-app
 $ npm run serve

docker-composeでコンテナ起動

docker-compose up

Creating vue_app1_app_1 ... done
Attaching to vue_app1_app_1
app_1  | Dockerfile
app_1  | docker-compose.yml
app_1  | my-app
app_1  | 
app_1  | > my-app@0.1.0 serve /app/my-app
app_1  | > vue-cli-service serve
app_1  | 
app_1  |  INFO  Starting development server...
app_1  |  98% after emitting CopyPlugin DONE  Compiled successfully in 43541ms00:24:46    
app_1  | 
         
app_1  |   App running at:
app_1  |   - Local:   http://localhost:8080/ 
app_1  | 
app_1  |   It seems you are running Vue CLI inside a container.
app_1  |   Access the dev server via http://localhost:<your container's external mapped port>/
app_1  | 
app_1  |   Note that the development build is not optimized.
app_1  |   To create a production build, run npm run build.

ブラウザで確認

docker-compose.ymlで8070ポートと8080ポートをつなぐように設定したのでhttp://localhost:8070/にアクセス

Web開発
スポンサーリンク
hid3をフォローする
踊りながらWebサービスを個人開発している人のブログ
タイトルとURLをコピーしました