修正: serve-and-syncを機能させる #739
Conversation
package.json
Outdated
| "start": "docker-compose up --remove-orphans watch-aio", | ||
| "start": "which docker-compose >/dev/null && compose=docker-compose || compose='docker compose'; $compose up --remove-orphans watch-aio", | ||
| "build-watch-aio": "which docker-compose >/dev/null && compose=docker-compose || compose='docker compose'; $compose build --no-cache watch-aio", |
There was a problem hiding this comment.
以前は別バイナリのdocker-composeだけだったようですが、最近のインストールではDocker CLIに含まれているようです。
ビルドだけのコマンドを追加しました。イメージを削除してからyarn startしても、Dockerfileに変更がないラインまでのキャッシュレイヤーがあると、キャッシュでビルドしてしまうようなので、--no-cacheにしました。
There was a problem hiding this comment.
docker compose コマンドは存在することを前提にしていいかもしれませんね
| copyFile(`/aio-ja/${path}`, `/origin/aio/${path}`, err => { | ||
| if (err) console.error(err.message, `(${path})`); | ||
| }); |
There was a problem hiding this comment.
Debianベースのcpコマンドのときからそうなのですが、docs-watch(watchr.js)のリスナーが、1ファイル当たり数回更新すると以降は呼ばれなくなりました。コピーは成功しているのですが、以降はF5でもページが更新しません。
Node.jsのコードにすると解決しました。
関係は不明ですが、cpコマンドのときはコピー先のファイルパーミッションが変更(664=>640)されてました。
There was a problem hiding this comment.
例のマウント環境ではCHOKIDAR_USEPOLLING=true yarn startにしないと、watch-aio.mjsのchokidarが反応せず、コピーが発生しないことに注意です。
| await $`yarn serve-and-sync --host=0.0.0.0 --disableHostCheck`; | ||
| await $`export npm_execpath=$(yarn config get yarn-path); yarn serve-and-sync --host=0.0.0.0 --disable-host-check`; |
There was a problem hiding this comment.
/origin/aio/package.json
"serve-and-sync": "run-p \"docs-watch --watch-only\" \"start {@}\" --",修正前イメージでもコンテナシェルで直接yarn serve-and-syncのコマンドを打つとrun-pは動作したのですが、npx zx watch-aio.mjs経由だとdocs-watchとstartを呼べないエラーになりました。
- なぜか
/origin/aio/startを呼ぼうとするエラー(docs-watchも同様)
angular-ja-watch-aio-1 | Error: Cannot find module '/origin/aio/start'
angular-ja-watch-aio-1 | at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
angular-ja-watch-aio-1 | at Function.Module._load (node:internal/modules/cjs/loader:778:27)
angular-ja-watch-aio-1 | at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
angular-ja-watch-aio-1 | at node:internal/main/run_main_module:17:47 {
angular-ja-watch-aio-1 | code: 'MODULE_NOT_FOUND',
angular-ja-watch-aio-1 | requireStack: []
angular-ja-watch-aio-1 | }
原因は$npm_execpathの違いのようです。
- Node.js経由の
yarn:/usr/local/lib/node_modules/npm/bin/npx-cli.js - シェルで直接
yarn config get yarn-path:/origin/.yarn/releases/yarn-1.22.17.cjs
run-p --npm-pathの指定は英語リポジトリ側になるため、環境変数で対応しました。
| FROM node:16.16.0 | ||
| FROM node:16.16.0-alpine |
There was a problem hiding this comment.
Debianに依存しているわけではなさそうなので、軽いAlpineにしました。
最後に--live-reloadが機能しない件のログです。
# 何度も編集しても同じハッシュでチェンジなし、でもF5で解決
angular-ja-watch-aio-1 | ✔ Browser application bundle generation complete.
angular-ja-watch-aio-1 |
angular-ja-watch-aio-1 | 21 unchanged chunks
angular-ja-watch-aio-1 |
angular-ja-watch-aio-1 | Build at: 2022-08-18T10:46:05.084Z - Hash: 53c762b44674710f - Time: 434ms
angular-ja-watch-aio-1 |
angular-ja-watch-aio-1 | ✔ Compiled successfully.
# ブラウザコンソールも
[webpack-dev-server] Live Reloading enabled.
[webpack-dev-server] App updated. Recompiling...
[webpack-dev-server] Nothing changed.
コメントは以上です、よろしくお願いいたします。
|
Visit the preview URL for this PR (updated for commit e4d6676): https://angular-ja--pr739-docker-s3ngvztv.web.app (expires Fri, 30 Sep 2022 03:10:05 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 |
|
@big-stream 修正ありがとうございます！
|
|
ところで、そもそもdocker化したのをやめたほうがいいのではないかという気もしています。 もしそうするとこの変更は大部分が取り消されてしまいますが、その可能性があることはご了承ください。 |
|
#741 試しにdockerをやめてみています。問題なさそうであれば、この路線で改修しようと思います（せっかくdockerで改善してくれたのに申し訳ないです） |
|
訂正しました。 |
|
@big-stream せっかくの修正ですがこのPRはcloseさせていただきます。dockerをやめた状態でUbuntuでの翻訳作業に支障があればまた遠慮なく教えていただきたいです！ |
修正
関連Issue
動作確認は、ホストUbuntu 22.04、仮想マシンはmultipass環境でUbuntu22.04です。
リポジトリはホストで
git cloneして翻訳しつつ、仮想マシンでマウント(multipass mountコマンド)してDockerする状況です。この環境では以前から#717 は発生していませんが、別の複数の問題で動作しなかったため、修正しました。
docker-composeよりもdocker composeの件serve-and-syncからのrun-pがdocs-watchとstartを実行できない件docs-watchで1ファイル当たり数回までしか更新できない件ついでに下記を変更・追加してみました。
yarn build-watch-aio追加詳しくはコード部分にコメントしますので、ご確認をお願いいたします。
最後に、今回の修正後でも
ng serveの--live-reload(デフォルト)が最初の1回とかしか機能しないです。原因を特定できていませんが、これは前からだったような気がしますし(当方の環境)、自分のタイミングでF5でページ更新できますし、むしろ--live-reload falseでも私は支障がないです。