概要
Docker上でVue.jsの開発ができるようにする手順です。
Vue-Cliでプロジェクト作成する場合、TypeScriptやSCSS、Vuexなどを追加できるので便利です。
GitHubのリポジトリにUPしていますので、興味のある方はご参照ください。
https://github.com/kai-kou/vue-js-typescript-on-docker
手順
Dockerファイルの作成
> mkdir 任意のディレクトリ
> cd 任意のディレクトリ
> vi Dockerfile
> vi docker-compose.yml
Dockerfile
FROM node:10.8.0-stretch
RUN npm install --global @vue/cli
WORKDIR /projects
docker-compose.yml
version: '3'
services:
app:
build: .
ports:
- "8080:8080"
volumes:
- ".:/projects"
tty: true
設定ファイルが準備できたらDockerコンテナを作成・実行して入ります。
> docker-compose up -d
> docker-compose exec app bash
Vueアプリの作成
vue create コマンドを実行するとPlease pick a preset と聞かれますので、Manually select features を選択して、必要なものを指定します。
ここではすべての機能を選択、設問は初期選択のままとしました。
コンテナ内
> vue create app
Vue CLI v3.0.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): SCSS/SASS
? Pick a linter / formatter config: TSLint
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Mocha
? Pick a E2E testing solution: Cypress
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies: (Use arrow keys)
❯ Use Yarn
Use NPM
ライブラリなどのインストールもされますので、環境によってはだいぶ時間がかかります。
お茶でも飲んで、まったりしながらお待ちください🍵
動作確認
プロジェクトが用意できたら、立ち上げてブラウザからアクセスしてみます。
コンテナ内
> cd app
> yarn serve
> open http://localhost:8080
やったぜ。
それでは良きVue.js開発ライフを^^
Vue.js+TypeScriptで開発するときの参考記事まとめ
https://qiita.com/kai_kou/items/19b494a41023d84bacc7