Skip to content

Instantly share code, notes, and snippets.

@yamacraft
Created November 10, 2017 09:33
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yamacraft/646c2acbf69cbb98ed3e81fcce793476 to your computer and use it in GitHub Desktop.
Save yamacraft/646c2acbf69cbb98ed3e81fcce793476 to your computer and use it in GitHub Desktop.
Vue-cliとDockerを使った環境構築

Vue-cliとDockerを使った環境構築

参考元: Vue.js + vue-routerでシングルページアプリケーション(SPA)を作ってみる | Maaarklog

Firebaseプロジェクトで作り、最終的にdeploy-dockerでデプロイするまでを目標とする。

環境の構築

他のディレクトリを汚さないように、 vue フォルダ内で作ることを前提とする

FROM node:6.11-alpine

RUN npm install -g vue-cli

RUN mkdir /app
WORKDIR /app

#RUN npm install
#CMD npm run dev

まずはプロジェクトを作るところから始めたいので、下2行はコメントアウトする。

version: '2'
services:
  vue:
    build:
      context: ./
      dockerfile: vue.dockerfile
    volumes:
      - ./vue:/app
    ports:
      - '8887:8080'

完了したらイメージをビルドし、プロジェクトを作成する。

$ docker-compose -f vue-compose.yml build
$ docker-compose -f vue-compose.yml run --rm vue vue init webpack .

今回はFirebase+FirebaseUIを使いたいので、新たに追加する

$ docker-compose -f vue-compose.yml run --rm vue npm install --save-dev firebase firebaseui

これでプロジェクトの作成は完了。

開発時の動作チェック

vue.dockerfile の下2行のコメントアウトを外し、docker-compose -f vue-compose.yml up -dとすれば、localhost:8887で開発版にアクセス可能となる。

いちおうファイルを変更すれば、リアルタイムで読み直してくれるがたまに反映されないので、その都度restartする必要があるかもしれない…。

Firebase-UIでのログインが表示されず悩み中…。フロントエンドつらい…。

FirebaseUI for Webを日本語化してVue.jsで使う - uphy’s tech blog

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment