Web用のView基盤の作成 #3

hrkmr-tech · 2021-04-09T14:31:21Z

ストーリー

開発者として、Web用のViewの基盤が欲しい. なぜなら今後の開発でUIの開発が円滑にできるからだ
https://app.clubhouse.io/chubachipt21/story/80/web-view-ui

やったこと

View用のDockerfileの作成
docker-compose.ymlへの組み込み
TypeScript on React.jsプロジェクトの初期化

補足事項

http://localhost:13000 にアクセスするとReact.jsの初期画面が表示される

shortcut-integration · 2021-04-09T14:31:23Z

This pull request has been linked to Clubhouse Story #80: 開発者として、Web用のViewの基盤が欲しい. なぜなら今後の開発でUIの開発が円滑にできるからだ.

Mod12d · 2021-04-10T01:57:43Z

@hrkmr-tech
早速ありがとうございます！
コードはLGTM なのですが👍🏻

dokcer-compose upした際に下記エラーでweb側が立ち上がらず、、、
もしローカルで散見されておりましたら解決策を知りたいです 🙇🏻

error Could not write file "/home/app/yarn-error.log": "EACCES: permission denied, open '/home/app/yarn-error.log'"
error An unexpected error occurred: "EACCES: permission denied, mkdir '/home/app/node_modules'".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
paddle_web_1 exited with code 1

これですかね、、https://qiita.com/Hibikine_Kage/items/e59cd59258d977a7e5f9

Mod12d · 2021-04-10T02:40:41Z

docker-compose.yml

+      context: ./web
+    stdin_open: true
+    tty: true
+    volumes:


ログ書き込み系のエラーが出まして、以下のtipsにのっとり8~9行目を削除して、解消しました。
ご参考まで。 🙇🏻

もしかしたらdockerのversionの関係もあるかも（？） yokoteru@yokosemominoMBP ~ % docker-compose -v docker-compose version 1.23.2, build 1110ad01 yokoteru@yokosemominoMBP ~ % docker version Client: Docker Engine - Community

My best practice is to remove the VOLUME definition f
https://stackoverflow.com/questions/52815624/permission-denied-when-web-app-tries-to-write-log-file-to-docker-volume

手元のMac3台でgit cloneから始めてすべて成功しました。私の手元では再現できません…

hrkmr-tech · 2021-04-10T08:37:50Z

Windowsユーザの場合は yarn install --no-bin-links にしないと失敗する？(経験則)

Mod12d · 2021-04-11T04:49:14Z

Moriさんとの環境際差異はdocker-engineのversionかなと思いましたので、20~に上げてからもう一度試そうと思います🧶

-```

error Could not write file "/home/app/yarn-error.log": "EACCES: permission denied, open '/home/app/yarn-error.log'"
error An unexpected error occurred: "EACCES: permission denied, mkdir '/home/app/node_modules'".


結果変わらず、、、（`yarn install --no-bin-links`も残念ながら、、もう少し調べてみます）
`yokoteru@yokosemitsuominoMacBook-Pro paddle % git diff
yokoteru@yokosemitsuominoMacBook-Pro paddle % git branch
* 3820/ch80/web-view-ui
yokoteru@yokosemitsuominoMacBook-Pro paddle % docker version
Client: Docker Engine - Community
 Version:           20.10.5
`

Mod12d · 2021-04-11T05:17:20Z

（ご参考）おっしゃる通りyarn関連の事象でありそうです
yarnpkg/yarn#4794

mr-myself

/web にまとめてるの良いですね！ちょっと紹介し忘れてしまっていましたが（すみません、、）、このProjectは下記のstructureをbaseに作ってるので、それとも合っています！

https://github.com/golang-standards/project-layout/blob/master/README_ja.md#web-application-directories

mr-myself · 2021-04-11T12:20:35Z

docker-compose.yml

+    volumes:
+      - ./web:/home/app
+    ports:
+      - 3000:3000


3000番がRails標準なので可能であればちょっとでか目の数字にして外していただけると助かります笑

13000に変更します。

mr-myself · 2021-04-11T12:23:21Z

web/Dockerfile

@@ -0,0 +1,14 @@
+FROM node:14.16-alpine3.13 AS web


Dockerfileを web/Dockerfile にも用意したのって何か理由ありますか？？rootのDockerfileにnodeも追記する感じで、jsはcompileして配布って感じかなと思っていました。そうするとDockerfileで yarn start するみたいなことをしなくて良いかと思います。

開発中にコードの変更を検知して自動リロードを走らせるために yarn start でプロセスを走らせておきたいという話です。docker-compose up したときに起動に時間が掛かるのでcomposeからも外して、別起動させた方が良さそうと思いつつあります。

dev: NODE_ENV=development yarn run webpack --watch --colors --progress --mode=development

webpack --watch でhot reloadができます。なのでdev時はこれを呼ぶ感じにしておけば良いかなと思います。 buildは時間多少かかるかもですが、 docker-compose up 自体で時間がかかるのことは経験上あまりない印象ですがどうですかね（うちの会社も手伝ってる会社もcomposeに含めてます）。

react-scripts でやったことないのですが、それがhot reloadに対応してないんですかね

Dockerfileは本番用ビルドに使用し、docker-compose.yml はCMDを上書きして開発用に使用するという認識で合っていますか？私がどういう方針で行けば良いのか迷子になっています。

あっています。（一時的にdeploy -> EC2で docker-compose up でいく可能性はありますが）
なので、それ用のDockerfileで yarn start しないでbuildしてcompile済みstatic fileを特定のdirectoryに配置の方が良いのではないかと思っています

これは start がhot reload対応です。

react-scripts でやったことないのですが、それがhot reloadに対応してないんですかね

mr-myself · 2021-04-11T12:33:27Z

web/README.md

+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).


このREADMEは削除して必要であればrootのREADMEに追記するで良いかと思いました！

こちら削除します。

mr-myself · 2021-04-11T13:27:52Z

FYI: 私の環境ではlocalhostでの立ち上げは問題なくできました

hrkmr-tech · 2021-04-11T14:36:10Z

Dockerfile

@@ -22,3 +22,19 @@ USER app
 COPY --chown=app:app ./ $APP_DIR

 CMD go run main.go
+
+
+FROM node:14.16-alpine3.13 AS web


別ファイルにしていたweb用のDockerfileを削除し、ルートにあるDockerfileをマルチステージビルドに修正しました。

ありがとうございます、、追加のerrrorが発生したため調査中です 🙇🏻 (docker-versionの問題だと思いますが)

yokoteru@yokosemominoMBP paddle % docker-compose up ERROR: The Compose file './docker-compose.yml' is invalid because: services.go.build contains unsupported option: 'target' services.web.build contains unsupported option: 'target' yokoteru@yokosemominoMBP paddle % git log commit b06d14e19a74d9120ae491dd8613b0e1a5a048e3 (HEAD -> 3820/ch80/web-view-ui, origin/3820/ch80/web-view-ui) Author: Hiroki Mori <xxx.bvb.taylor@gmail.com> Date: Sun Apr 11 23:32:48 2021 +0900 docker multi-stage buildに変更

docker-composeのバージョンが古い？
https://matsuand.github.io/docs.docker.jp.onthefly/compose/compose-file/compose-versioning/#version-23

docker-compose -v？

これですな。。
yokoteru@yokosemominoMBP paddle % docker-compose -v docker-compose version 1.23.2, build 1110ad01

yokoteru@yokosemominoMBP paddle % cd web yokoteru@yokosemominoMBP web % ls -la total 2184 drwxrwxrwx 12 yokoteru staff 384 4 12 01:01 . drwxr-xr-x 17 yokoteru staff 544 4 12 01:00 .. drwxr-xr-x 2 yokoteru staff 64 4 12 01:01 .cache -rw-r--r-- 1 yokoteru staff 310 4 11 23:40 .gitignore -rw-r--r-- 1 yokoteru staff 116 4 11 23:40 .yarnrc drwxrwxrwx 22 yokoteru staff 704 4 12 01:03 node_modules -rwxrwxrwx 1 yokoteru staff 976 4 11 23:40 package.json drwxrwxrwx 8 yokoteru staff 256 4 11 23:40 public drwxrwxrwx 11 yokoteru staff 352 4 11 23:40 src -rwxrwxrwx 1 yokoteru staff 535 4 11 23:40 tsconfig.json -rwxrwxrwx 1 yokoteru staff 533809 4 12 01:10 yarn-error.log -rwxrwxrwx 1 yokoteru staff 509485 4 11 23:40 yarn.lock

ゴリ押してweb配下の権限を変更していくとログも変化しているので、解決できそうな感じがします。
chomod -R 777 web/実行後
error An unexpected error occurred: "EACCES: permission denied, mkdir '/home/app/node_modules/@pmmmwh/react-refresh-webpack-plugin/node_modules'".

rm -r ./web/node_modules rm ./web/yarn-error.log docker-compose up

node_modules配下削除したところ、別箇所で修正必要のようでそちら直します。
T```
requests.exceptions.ConnectionError: ('Connection aborted.', FileNotFoundError(2, 'No such file or directory'))

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
File "docker-compose", line 3, in
File "compose/cli/main.py", line 81, in main
File "compose/cli/main.py", line 199, in perform_command
File "compose/cli/command.py", line 60, in project_from_options
File "compose/cli/command.py", line 152, in get_project
File "compose/cli/docker_client.py", line 41, in get_client
File "compose/cli/docker_client.py", line 170, in docker_client
File "docker/api/client.py", line 197, in init
File "docker/api/client.py", line 221, in _retrieve_server_version
docker.errors.DockerException: Error while fetching server API version: ('Connection aborted.', FileNotFoundError(2, 'No such file or directory'))
[7907] Failed to execute script docker-compose

お騒がせしました、web側の立ち上げに関するエラーについて解消しました 🙇🏻

【解決法】
・nodemodules配下のファイル削除(不要かもですが)
・Virtualbox->docker for Mac

Mod12d

👍🏻

mr-myself

LGTM!

mr-myself · 2021-04-12T13:34:26Z

これ私がstatus checkを入れたせいでmergeできない感じですよね、、一度オフにしてmergeしましょうか

mr-myself · 2021-04-12T13:34:59Z

あ、adminなら強制mergeできるのでそれでしていただいて大丈夫ですね！

Mod12d · 2021-04-12T13:37:17Z

mergeします 👍🏻

Mod12d · 2021-04-12T13:40:55Z

(と思いましたがMoriさんにmergeしていただくのが良いかもですね　メンバーを全員adminに変更したかと)

Web用のView基盤の作成

Web View UI [ch80]

82bbec9

hrkmr-tech added the enhancement New feature or request label Apr 9, 2021

hrkmr-tech requested review from mr-myself, Mod12d, ladypuipui, yasuda0320 and yanliling255 April 9, 2021 14:31

Mod12d reviewed Apr 10, 2021

View reviewed changes

mr-myself reviewed Apr 11, 2021

View reviewed changes

Merge branch 'main' into 3820/ch80/web-view-ui

bf978c9

hrkmr-tech added 3 commits April 11, 2021 22:53

README.mdの削除

71e3ba5

ポート変更 3000 → 13000

f22ff0a

docker multi-stage buildに変更

b06d14e

hrkmr-tech commented Apr 11, 2021

View reviewed changes

docker-compose.yml version 3 to 3.8

5625d5e

Mod12d approved these changes Apr 11, 2021

View reviewed changes

mr-myself approved these changes Apr 11, 2021

View reviewed changes

hrkmr-tech merged commit 56b5062 into main Apr 13, 2021

hrkmr-tech deleted the 3820/ch80/web-view-ui branch April 16, 2021 19:08

yasuda0320 pushed a commit that referenced this pull request May 31, 2021

Merge pull request #3 from ChubachiPT21/3820/ch80/web-view-ui

56c04dc

Web用のView基盤の作成


		You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).

		To learn React, check out the [React documentation](https://reactjs.org/).

Web用のView基盤の作成 #3

Web用のView基盤の作成 #3

Conversation

hrkmr-tech commented Apr 9, 2021 • edited Loading

ストーリー

やったこと

補足事項

shortcut-integration bot commented Apr 9, 2021

Mod12d commented Apr 10, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hrkmr-tech commented Apr 10, 2021

Mod12d commented Apr 11, 2021 • edited Loading

Mod12d commented Apr 11, 2021

mr-myself left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mr-myself commented Apr 11, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Mod12d Apr 11, 2021 • edited Loading

Choose a reason for hiding this comment

hrkmr-tech Apr 11, 2021 • edited Loading

Choose a reason for hiding this comment

Mod12d Apr 11, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Mod12d left a comment

Choose a reason for hiding this comment

mr-myself left a comment

Choose a reason for hiding this comment

mr-myself commented Apr 12, 2021

mr-myself commented Apr 12, 2021

Mod12d commented Apr 12, 2021

Mod12d commented Apr 12, 2021

hrkmr-tech commented Apr 9, 2021 •

edited

Loading

Mod12d commented Apr 10, 2021 •

edited

Loading

Mod12d commented Apr 11, 2021 •

edited

Loading

Mod12d Apr 11, 2021 •

edited

Loading

hrkmr-tech Apr 11, 2021 •

edited

Loading

Mod12d Apr 11, 2021 •

edited

Loading