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）にアクセスすると下記の画面が出た。
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.vueviewsというディレクトリは所見。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"
]
}
