Zenn
💨

DockerでVue.js環境を構築（VueCli）

2021/11/19に公開
Docker
TypeScript
Vue.js
Vue CLI
tech

今回はDockerでVue.js環境構築します！
VueCliを使って構築をするため、構築時のオプションの説明もしています！

環境構築準備

まず任意のディレクトリにDockerfileとdocker-compose.ymlを作成します。

touch Dockerfile
touch docker-compose.yml

次にDockerfile内を編集します！

Dockerfile
FROM node:14.13.1
WORKDIR /app

次にdocker-compose.ymlを編集します！

docker-compose.yml
version: '3'
services:
  node:
    build:
      context: .
    tty: true
    environment:
      - NODE_ENV=development
    volumes:
    - ./:/app
    command: sh -c "cd hello-vue && npm run serve"
    ports:
    - "8080:8080"

これだけでDockerの準備は完了です！
簡単ですね！！

Vue.jsアプリを作成

次はもうコマンドを使用して作成します！
ターミナルに下記を入力します。

docker-compose run --rm node sh -c  "npm install -g @vue/cli @vue/cli-init && vue create hello-vue"

しばらくするとターミナルに下記の内容が開くと思います。

Vue CLI v4.5.15
? Please pick a preset: (Use arrow keys)
  Default ([Vue 2] babel, eslint) 
  Default (Vue 3) ([Vue 3] babel, eslint) 
 ❯ Manually select features

これは予め用意されているデフォルトの設定か自身で選択して設定をするのか決められます。
今回は自身で選択するためManually select featuresを選択します。

次に使用するライブラリ等を選択します。

Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Choose Vue version
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

この画面の選択方法は下記の通りです。

  • 1~9の数字で選択可能
  • spaceでの選択も可能
  • iを押すと現在の選択と未選択が反転
  • aを押すと全選択

簡単に上から説明したいと思います。

  • Choose Vue version
    　Vue.jsのバージョンを指定する（指定しない場合は最新）
  • Babel
    　JavaScriptのES6をES5にしてくれるコンパイラのBabelを使用する
  • TypeScript
    　TypeScriptを使用する
  • Progressive Web App (PWA) Support
    　PWAを使用する
  • Router
    　ルーティングを制御するためのVue Routerを使用する
  • Vuex
    　Vue.jsの状態管理パターンのライブラリであるVuexを使用する
  • CSS Pre-processors
    　SassやStylusなどのCSSプリプロセッサーを使用する
  • Linter / Formatter
    　コードの記述ルールを統一するLinterやFormatterを使用する
  • Unit Testing
    　ユニットテストを使用する
  • E2E Testing
    　E2E（End to End）テストを使用する

今回は全てを選択しました。

次はvueのバージョン指定です。
最新の3.ｘを選択します。

Vue CLI v4.5.15
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Un
it, E2E
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
❯ 2.x 
  3.x

そうするとcalass-styleを使用するのか聞かれます。
TypeScriptを使用する場合defineComponent関数を使用して記述するそうですのでNを入力して次に進みます。

? Use class-style component syntax? (y/N)

次はBabel alongside TypeScriptを使うか聞かれるのでYを選択します。Nを選択した場合はインストール後にbabel.config.jsファイルがプロジェクトディレクトリに作成されません。

? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)

次はRouterのモード設定です。
Yを選択するとページのリロード無しに URL 遷移を実現するhistory.pushState APIを利用したルーターのhistoryモードを使うことができます。

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

次はcssの選択です。
dart-sassが推奨みたいですので、そちらを選びます！

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
❯ Sass/SCSS (with dart-sass) 
  Sass/SCSS (with node-sass) 
  Less 
  Stylus

次はLintとFormatter周りの設定です。
良く聞く'ESLint + Prettier'を選択しました。

? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
  ESLint + Prettier 
  TSLint (deprecated)

次はLintをどのタイミングで実行するかを聞かれます。

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit

ファイルのセーブ時のみで良いきがするのでこのまま次に進みます。

次にユニットテストで使用するツールを聞かれます。

? Pick a unit testing solution: (Use arrow keys)

王道のJestを選択しました。

E2Eテストで使用するライブラリを選択します。

? Pick an E2E testing solution: (Use arrow keys)
❯ Cypress (Chrome only) 
  Nightwatch (WebDriver-based) 
  WebdriverIO (WebDriver/DevTools based)

自分はCypressを選択しました。

次は設定ファイルを選択します。

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files 
  In package.json

package.jsonが王道だと思うので、そちらを選択します。

次に今回の設定を保存しておくか聞かれるので好きな方を選択します。

 Save this as a preset for future projects? (y/N)

今回はNを選択しました。

次にインストール方法です。

? Pick the package manager to use when installing dependencies: (Use arrow keys)
❯ Use Yarn 
  Use NPM

自分はYarnを選択しました。

ここまで選択すると作成が始まります。

作成が完了したら起動してみます！

docker-compose up -d

http://localhost:8080/にアクセスしてみると

無事表示されました！！

やったー！！

終わり

簡単に構築ができましたね!!
VueCliが色々と指定ができるのでとても便利でしたし新鮮でした！

ここまで見てくださりありがとうございました！！

Discussion