GAミント至上主義

Web Monomaniacal Developer@ビズオーシャン

Vue + PWAの開発環境をvue-cli3 + pwa plugin + yarnを使ってDocker上で構築する

uyamazak.hatenablog.com
2018年の2月ごろ、VueでPWAの履歴書作成アプリを作り始めて、もうすぐ本番公開だけど改めて調べると環境がすでに大きく変わっていた。
作ったのこれ↓
rirekisho.yagish.jp

半年もたってないけどこの変化だからなるべく早く変更する準備をした方がよさそう。
大きいのは下記4点。

vue-cliのテンプレートではなくプラグインになった

以前使ったテンプレート形式のもの
github.com

新しいvue-cliプラグイン形式
vue-cli/packages/@vue/cli-plugin-pwa at dev · vuejs/vue-cli · GitHub

まだrc版なせいもあるのか、ドキュメントちょっとしか書いてない

WebPack3が4に

せっかく分かってきたところで大きく変わった
yarn.lockを見たらwebpack "^4.8.2"で入っていた

Service WorkerがWorkbox使う形に

テンプレートの時はService Workerのスクリプトは直書きされていたが、プラグインGoogleが開発しているWorkboxというService Workerを使いやすくするライブラリを使用している。
developers.google.com

PWAを推進しているGoogleが作ってるし、これは今後使っていった方が良さげ。

yarn使った方がいいかも

npm歴も浅いので違いがよくわかってないが、いろいろ良いという話は見るので、さっそく使ってみる。

ということで、さっそくDockerを使って環境を作ってみる

Dockerfile

FROM node:9-slim
RUN mkdir /pwa/
RUN apt-get update --fix-missing && apt-get -y upgrade
RUN apt-get install -y \
    git \
    bzip2

WORKDIR /pwa/

EXPOSE 8080
CMD ["bash"]

とりあえずnodeをもとにイメージを作る。
gitとbzip2は以前必要になったのでそのまま。今回はいらないかも。
適当なイメージ名をタグつけてビルドする

sudo docker build -t pwa-201807:latest .

run

作ったファイルを残しておくためappディレクトリを作ってマウント。
あと設定ファイルがホームディレクトリにできるようなので、それもマウントしておく。
rootで実行しているので/root。
本番にはビルドしたファイルのみアップし、このイメージはそのまま使わないのでrootで問題ないと思う。

mkdir app
mkdir root
sudo docker run -it --rm \
        -v `pwd`/app:/pwa/app \
        -v `pwd`/root:/root \
        -p 2106:8080 \
        --name pwa-201807 \
        pwa-201807:latest

yarnアップデート

なんかもともとyarn入ってたけど古いのでアップデートする。
1.7.0になった。

root@e8a2e26d5310:/shanyang# yarn
yarn install v1.5.1
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
info Lockfile not saved, no dependencies.
Done in 0.06s.
root@e8a2e26d5310:/shanyang# npm install -g yarn
/usr/local/bin/yarnpkg -> /usr/local/lib/node_modules/yarn/bin/yarn.js
/usr/local/bin/yarn -> /usr/local/lib/node_modules/yarn/bin/yarn.js
+ yarn@1.7.0
added 1 package in 0.439s
root@e8a2e26d5310:/shanyang#

vue/cliインストール

ドキュメント通り
cli.vuejs.org

root@e8a2e26d5310:/shanyang# yarn global add @vue/cli
yarn global v1.7.0
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.4: The platform "linux" is incompatible with this module.
info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "@vue/cli@3.0.0-rc.3" with binaries:
      - vue
Done in 8.34s.

@vue/cli@3.0.0-rc.3が入った

プロジェクト作る

名前は何でもいいけど、マウントしてあるappで作る

root@e8a2e26d5310:/shanyang# vue create app
Please pick a preset:
  default (babel, eslint)
❯ Manually select features

? Please pick a preset: Manually select features
? Check the features needed for your project:
 ◉ Babel
 ◯ TypeScript
 ◉ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◉ Unit Testing
❯◉ E2E Testing

yarn使うとかいろいろ聞かれるので適当に答える。
デフォルトだとrouterとか入らないので再度やり直して、選択した。
ここにもPWAが出てきたので選択しておく

とりあえず開発サーバー起動

設定したポート(2106)にアクセスすると下記の画面が出た。

f:id:uyamazak:20180709185959p:plain

PWAプラグイン追加

インストールは
各設定をvue.config.jsかpackage.jsonのvueに書き、下記コマンドでいいらしい。

root@e8a2e26d5310:/shanyang/app# vue add @vue/pwa 

逃  Installing @vue/cli-plugin-pwa...

yarn add v1.7.0
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.4: The platform "linux" is incompatible with this module.
info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Saved lockfile.
success Saved 17 new dependencies.
info Direct dependencies
└─ @vue/cli-plugin-pwa@3.0.0-rc.3
info All dependencies
├─ @vue/cli-plugin-pwa@3.0.0-rc.3
├─ babel-runtime@6.26.0
├─ common-tags@1.8.0
├─ json-stable-stringify@1.0.1
├─ lodash.template@4.4.0
├─ lodash.templatesettings@4.1.0
├─ pretty-bytes@4.0.2
├─ workbox-broadcast-cache-update@3.3.1
├─ workbox-build@3.3.1
├─ workbox-cache-expiration@3.3.1
├─ workbox-cacheable-response@3.3.1
├─ workbox-google-analytics@3.3.1
├─ workbox-precaching@3.3.1
├─ workbox-range-requests@3.3.1
├─ workbox-streams@3.3.1
├─ workbox-sw@3.3.1
└─ workbox-webpack-plugin@3.3.1
Done in 3.54s.

✔  Successfully installed plugin: @vue/cli-plugin-pwa

噫  Invoking generator for @vue/cli-plugin-pwa...
逃  Installing additional dependencies...
yarn install v1.7.0
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.4: The platform "linux" is incompatible with this module.
info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 2.24s.

   Successfully invoked generator for plugin: @vue/cli-plugin-pwa
   The following files have been updated / added:

     public/img/icons/android-chrome-192x192.png
     public/img/icons/android-chrome-512x512.png
     public/img/icons/apple-touch-icon-120x120.png
     public/img/icons/apple-touch-icon-152x152.png
     public/img/icons/apple-touch-icon-180x180.png
     public/img/icons/apple-touch-icon-60x60.png
     public/img/icons/apple-touch-icon-76x76.png
     public/img/icons/apple-touch-icon.png
     public/img/icons/favicon-16x16.png
     public/img/icons/favicon-32x32.png
     public/img/icons/msapplication-icon-144x144.png
     public/img/icons/mstile-150x150.png
     public/img/icons/safari-pinned-tab.svg
     public/manifest.json
     src/registerServiceWorker.js
     package.json
     src/main.js
     yarn.lock

   You should review these changes with git diff and commit them.

ところどころ文字がバグってるけどいろいろPWAのファイルができた

src ディレクトリ構成

% tree src
src
├── App.vue
├── assets
│   └── logo.png
├── components
│   └── HelloWorld.vue
├── main.js
├── registerServiceWorker.js
├── router.js
└── views
    ├── About.vue
    └── Home.vue

viewsというディレクトリは所見。router用かな?
今作っているアプリはcomponentsに詰め込んでいるのでrouterで使うのはviewsに入れる形にした方がきれいかもしれない。
でも口で言うとvueと一緒だから紛らわしそう。

build時のディレクトリ構成

root@e8a2e26d5310:/shanyang/app# yarn build
yarn run v1.7.0
$ vue-cli-service build

⠦  Building for production...

 DONE  Compiled successfully in 4395ms                                                                                                                               10:04:03

  File                                      Size             Gzipped

  dist/js/chunk-vendors.217e7126.js         99.37 kb         35.09 kb
  dist/js/app.3bb5f26d.js                   5.93 kb          2.07 kb
  dist/service-worker.js                    0.94 kb          0.53 kb
  dist/precache-manifest.c4b9ea04d7e2938    0.46 kb          0.24 kb
  96813a60dd3863afb.js
  dist/css/app.928b9db9.css                 0.42 kb          0.26 kb

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.

Done in 6.60s.

package.json

root@e8a2e26d5310:/shanyang/app# cat package.json
{
  "name": "app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e"
  },
  "dependencies": {
    "register-service-worker": "^1.0.0",
    "vue": "^2.5.16",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.0-beta.15",
    "@vue/cli-plugin-e2e-cypress": "^3.0.0-beta.15",
    "@vue/cli-plugin-eslint": "^3.0.0-beta.15",
    "@vue/cli-plugin-pwa": "^3.0.0-beta.15",
    "@vue/cli-plugin-unit-mocha": "^3.0.0-beta.15",
    "@vue/cli-service": "^3.0.0-beta.15",
    "@vue/eslint-config-standard": "^3.0.0-rc.3",
    "@vue/test-utils": "^1.0.0-beta.16",
    "chai": "^4.1.2",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.1",
    "vue-template-compiler": "^2.5.16"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

vue ui

今のところ必要ないけどGUIでもいろいろできるようになったみたい
f:id:uyamazak:20180709192035p:plain


で、これから設定を開発中のものと揃えたいのだけれど、webpack系の環境変数とかの設定ファイルが見つからず、どこに書いたらいいかわからないので、今日はここまで