chore: 開発モードでフロントエンドとバックエンドを独立して起動するようにする #12452

fruitriin · 2023-11-25T14:01:07Z

What

Misskeyの開発において、フロントエンドとバックエンドの単体での起動が可能になります。
これは pnpm dev で起動した場合のみで、 pnpm start の場合、今までと動作は変わらない想定です。

pnpm dev でバックエンドと疎通するには .config/default.yml で hostを https://localhost:3000/ にする必要があります
プロジェクトルートで pnpm dev をすると、フロントエンドとバックエンドのローカル開発環境が立ち上がります

http://127.0.0.1:5173/ ← viteのパスをブラウザで開いてください注意：localhost:5173 ではいけません
また、バックエンドのポートである :3000 でもありません。

Note: フロントエンドとバックエンドを別々のシェルで起動したい

一つのシェルで frontendディレクトリに移動して pnpm dev、
もう一つのシェルでbackendディレクトリに移動してpnpm devでもよいです。

＊プロジェクトルートのpnpm dev は、すべてのworkspaceでpnpm devします
＊ backendには postgresqlとredisが起動している必要があります

Why

HMRが有効になり、開発体験が向上します。
（もはや、フロントエンドの変更を確認するのに都度ビルドする必要はありあません！）

BackendとFrontendを別々に起動/再起動した場合、 packages/backend, packages/frontend 配下でpnpm dev すればいつでもそれらのプロセスを個別にとめて再起動することができます

Additional info (optional)

PostgresqlとRedisを用意するのがめんどくさいのでこれらだけDockerでやりたい

postgresqlとredisだけ起動するdocker-compose.yml を同梱しました。

docker compose -f docker-compose.local-db.yml up

redisとpostgresqlだけ立ち上がります

テスト観点など

私の手元で何度か環境を作り直してうまく動いているように見えますが、少なからずビルドチェーンに手を加えているため多くの開発者によって検証するほうが良いでしょう。

Checklist

Read the contribution guide
Test working in a local environment
(If needed) Add story of storybook
(If needed) Update CHANGELOG.md
(If possible) Add tests

cssの読み込み順序とCSP設定の変更

設定画面からUI言語を変更したらブラックアウトする

…alone-frontend

This reverts commit 582601e. # Conflicts: # packages/frontend/vite.config.ts

codecov · 2023-11-25T14:02:38Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (e42c91d) 78.93% compared to head (35d90db) 78.83%.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #12452      +/-   ##
===========================================
- Coverage    78.93%   78.83%   -0.10%     
===========================================
  Files          957      958       +1     
  Lines       104165   104229      +64     
  Branches      8361     8331      -30     
===========================================
- Hits         82218    82171      -47     
- Misses       21947    22058     +111

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

fruitriin · 2023-11-25T14:01:34Z

.config/dev-local.yml

+
+# Final accessible URL seen by a user.
+# dev-local では identiconのCORS問題の解決のため 127.0.0.1 である必要があります
+url: http://127.0.0.1:5173/


このファイルの主な違いはここだけです

fruitriin · 2023-11-25T14:02:40Z

docker-compose.local-dev.yml

@@ -0,0 +1,42 @@
+version: "3"
+


このファイルでは redisとpostgresのみを起動するために作りました。
webのサービスが消え、そのdependencyがなくなり、ホストマシンからアクセスできるように portsが加えられています。

fruitriin · 2023-11-25T14:03:17Z

package.json

@@ -26,7 +26,7 @@
 		"check:connect": "cd packages/backend && pnpm check:connect",
 		"migrateandstart": "pnpm migrate && pnpm start",
 		"watch": "pnpm dev",
-		"dev": "node ./scripts/dev.mjs",
+		"dev": "pnpm -r dev",


dev.mjsのかわりに pnpm -r dev をしています。
dev.mjsは削除してもよいかもしれません（このPRでは行っていません）

fruitriin · 2023-11-25T14:04:08Z

packages/frontend/src/boot/common.ts

+		} else {
+			if (defaultStore.state.darkMode) {
+				applyTheme(darkTheme.value);
+			} else {
+				applyTheme(lightTheme.value);
+			}


local-devモードでテーマがapplyされないことの修正です

↑の旨をコメントに残しておくと良さそう

自由に付け足したりしておいていただけると

packages/frontend/src/index.html

fruitriin · 2023-11-25T14:05:48Z

packages/frontend/src/pages/settings/general.vue

@@ -260,6 +260,7 @@ const useGroupedNotifications = computed(defaultStore.makeGetterSetter('useGroup
 watch(lang, () => {
 	miLocalStorage.setItem('lang', lang.value as string);
 	miLocalStorage.removeItem('locale');
+  miLocalStorage.removeItem('localeVersion');


言語を変更したときに local-devモードで色々おかしくなる問題の対応です。
fruitriin#3

fruitriin · 2023-11-25T14:06:57Z

packages/frontend/vite.config.local-dev.ts

@@ -0,0 +1,187 @@
+import path from 'path';


local-devモードのvite.configです。通常用のvite.config.tsの差分として作ってもよかったのですが、今回はスコープアウトしました

fruitriin · 2023-11-25T14:07:23Z

packages/frontend/vite.config.local-dev.ts

+			host: '127.0.0.1',
+			port: 5173,
+			proxy: {
+				'/api': {
+					changeOrigin: true,
+					target: 'http://127.0.0.1:3000/',
+				},
+				'/assets': 'http://127.0.0.1:3000/',
+				'/files': 'http://127.0.0.1:3000/',
+				'/twemoji': 'http://127.0.0.1:3000/',
+				'/fluent-emoji': 'http://127.0.0.1:3000/',
+				'/sw.js': 'http://127.0.0.1:3000/',
+				'/streaming': {
+					target: 'ws://127.0.0.1:3000/',
+					ws: true,
+				},
+				'/favicon.ico': 'http://127.0.0.1:3000/',
+				'/identicon': {
+					target: 'http://127.0.0.1:3000/',
+					rewrite(path) {
+						return path.replace('@127.0.0.1:5173', '');
+					},
+
+				},
+			},


主な変更点です。
これにより、フロントエンドへのリクエストの一部をバックエンドにプロキシするなどを行っています。

fruitriin · 2023-11-25T14:08:06Z

packages/frontend/vite.config.local-dev.ts

+				'safari16',
+			],
+			manifest: 'manifest.json',
+			rollupOptions: {


rollupOptionsのinputを削除しています。
この場合、index.htmlが対象となります。

github-actions · 2023-11-25T14:10:41Z

このPRによるapi.jsonの差分

差分はこちら

Get diff files from Workflow Page

…lone-frontend # Conflicts: # packages/frontend/src/pages/welcome.entrance.a.vue

…lone-frontend

…lone-frontend # Conflicts: # packages/frontend/src/pages/welcome.entrance.a.vue

fruitriin · 2023-12-06T11:29:43Z

packages/frontend/package.json

@@ -4,6 +4,7 @@
 	"type": "module",
 	"scripts": {
 		"watch": "vite",
+		"dev": "vite --config vite.config.local-dev.ts",


devでは vite.config.ts のかわりに vite.config.local-dev.tsを使用します。

samunohito

2点ほどコメントしました

docker-compose.local-db.yml

packages/frontend/src/index.html

docker-compose.local-db.yml

fruitriin · 2023-12-06T12:02:48Z

@syuilo これでどうだ！

packages/frontend/src/index.html

tamaina · 2023-12-06T13:09:27Z

最近私は開発に参加してないし割と根本的な話なので無視してもらって構わないのだけれど、個人的にviteでプロキシする挙動はあんまり好きではないです…
(実環境でもnginxが挟まっているけど)バックエンドに直接リクエストする場合とは内容が変わってしまう可能性があったりproxyのパスを書き加えたりする必要があるため(こういうところで仕事が増えると割と面倒事が起きるイメージがある)

(あとそもそも今HMRが動かなくなってるのは何でなのかしら)

これを解消する方向の方がいいと思う

fruitriin · 2023-12-06T13:57:26Z

プロクシする挙動になってるのはフロントエンドとバックエンドのドメイン(ホスト名+ポート名)が同じものとして認識してくれないとCORSによって各種リクエストが拒絶されてしまうからです
従って、プロクシすること自体はフロントエンドとバックエンドを分離するという目的に対する本PRでの変更点(コード上の差分)において重要なことですが目的に対する主題ではありません

短期的にはHMRが有効になるので開発体験が大幅に向上します
本番環境でフロントエンドのコードをバックエンドを介さずに返したいというIssueがあり、それに向けた一歩となると信じています

どちらが望ましいですか？

tamaina · 2023-12-06T14:58:18Z

本番環境でフロントエンドのコードをバックエンドを介さずに返したいというIssue

番号を教えてください:pray:

fruitriin · 2023-12-06T15:00:53Z

これ
#10894

tamaina · 2023-12-06T15:06:58Z

#10894 の理解に相違がありそうというのは一旦置いておいて、フロント開発するのにわざわざバックエンドを動かしておきたくないよね（つまり既存のサーバーにつなげたい）というのはわかる

fruitriin · 2023-12-06T15:20:44Z

たしかに、IssueではMisskey全体(ないし個別ページ)をSSRしたいように見えます

その議論とは別にこのPRの一つ目の効用である開発体験向上に繋がり、
この議論へ対応していく場合でもこのPRは有効だと考えます

acid-chicken · 2023-12-06T15:21:28Z

#10894 の理解に相違がありそうというのは一旦置いておいて、フロント開発するのにわざわざバックエンドを動かしておきたくないよね（つまり既存のサーバーにつなげたい）というのはわかる

これについては HTTP API と密結合状態なのは解消できないと思っているので Storybook で実現した差がある（し一部しているつもり）

tamaina · 2023-12-06T15:24:48Z

（本当に必要なものって、環境変数で既存の公開サーバーを指定してViteがそこにプロキシする…というのはhttps絡みで難しいかしらね

fruitriin · 2023-12-06T15:31:31Z

default.yml の hostはlocalhostで、 dbの値に外部のサーバーの値を入れればなんとなく動くようです
ドライブの解決がうまくいってませんが

fruitriin · 2023-12-06T15:54:22Z

PRのオーナーが飽きたのでクローズします
望むならば誰か改めてPRを作ってください

fruitriin and others added 23 commits November 19, 2023 13:55

[wip]run standalone vite

02bacc6

[wip]run standalone vite

8463448

some fix (tabler icons, sw, streaming)

ddef9ca

fix theme

14e0d1f

fix run scripts

3ea7041

favicon

ec15eaf

client-assets

582601e

cssの読み込み順序とCSP設定の変更

4261835

Merge pull request #2 from samunohito/feat/launch-standalone-frontend

d82d386

cssの読み込み順序とCSP設定の変更

fix lang change

c2fbb5a

Merge pull request #3 from samunohito/feat/launch-standalone-frontend

46c4d97

設定画面からUI言語を変更したらブラックアウトする

fix clientManifest

6fd9ac4

baseを相対パスにしてドメイン直下とサブディレクトリ配下両方に対応

97a1f81

Merge pull request #4 from samunohito/feat/launch-standalone-frontend

509107f

色々修正

325dda6

色々修正

a654c15

Merge remote-tracking branch 'misskey/develop' into feat/launch-stand…

d37ab72

…alone-frontend

色々修正

0632849

fix

09019b3

Revert "client-assets"

84fa6b4

This reverts commit 582601e. # Conflicts: # packages/frontend/vite.config.ts

色々修正

27dcc4e

fix

e6a1ade

fix

c470cd2

github-actions bot added packages/frontend Client side specific issue/PR packages/backend Server side specific issue/PR labels Nov 25, 2023

fruitriin commented Nov 25, 2023

View reviewed changes

Merge branch 'develop' into feat/launch-standalone-frontend

f03364b

kakkokari-gtyih added the 🛠️Dev Development of Misskey itself label Nov 25, 2023

fruitriin and others added 7 commits December 6, 2023 10:56

wip

e7a9ce3

Merge remote-tracking branch 'origin/develop' into feat/launch-standa…

4445308

…lone-frontend # Conflicts: # packages/frontend/src/pages/welcome.entrance.a.vue

Merge remote-tracking branch 'origin/develop' into feat/launch-standa…

7cd0c17

…lone-frontend # Conflicts: # packages/frontend/src/pages/welcome.entrance.a.vue

Merge remote-tracking branch 'origin/develop' into feat/launch-standa…

258c5f7

…lone-frontend

Merge remote-tracking branch 'origin/develop' into feat/launch-standa…

8ecf63d

…lone-frontend # Conflicts: # packages/frontend/src/pages/welcome.entrance.a.vue

fix tabler load

2e55d74

Merge pull request #7 from samunohito/fix/tabler-css-loading

e6eaf29

fruitriin changed the title ~~Feat/launch standalone frontend~~ chore: 開発モードでフロントエンドとバックエンドを独立して起動するようにする Dec 6, 2023

fruitriin commented Dec 6, 2023

View reviewed changes

samunohito reviewed Dec 6, 2023

View reviewed changes

docker-compose.local-db.yml Outdated Show resolved Hide resolved

packages/frontend/src/index.html Show resolved Hide resolved

fruitriin commented Dec 6, 2023

View reviewed changes

packages/frontend/src/index.html Show resolved Hide resolved

docker-compose.local-db.yml Outdated Show resolved Hide resolved

fruitriin added 2 commits December 6, 2023 21:02

Apply suggestions from code review

000e382

Merge branch 'develop' into feat/launch-standalone-frontend

a5efde4

fruitriin commented Dec 6, 2023

View reviewed changes

packages/frontend/src/index.html Outdated Show resolved Hide resolved

fruitriin and others added 3 commits December 6, 2023 21:07

Update packages/frontend/src/index.html

45b1c35

fix

45fad15

Merge pull request #8 from samunohito/fix/index_html_comment

35d90db

fruitriin closed this Dec 6, 2023

samunohito mentioned this pull request Dec 7, 2023

chore: 開発モードでフロントエンドとバックエンドを独立して起動するようにする（再） #12593

Merged

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore: 開発モードでフロントエンドとバックエンドを独立して起動するようにする #12452

chore: 開発モードでフロントエンドとバックエンドを独立して起動するようにする #12452

fruitriin commented Nov 25, 2023 •

edited

Loading

codecov bot commented Nov 25, 2023 •

edited

Loading

fruitriin Nov 25, 2023

fruitriin Nov 25, 2023

fruitriin Nov 25, 2023

fruitriin Nov 25, 2023

syuilo Nov 26, 2023

fruitriin Nov 26, 2023

fruitriin Nov 25, 2023

fruitriin Nov 25, 2023

fruitriin Nov 25, 2023 •

edited

Loading

fruitriin Nov 25, 2023

github-actions bot commented Nov 25, 2023 •

edited

Loading

fruitriin Dec 6, 2023

samunohito left a comment

fruitriin commented Dec 6, 2023

tamaina commented Dec 6, 2023

fruitriin commented Dec 6, 2023 •

edited

Loading

tamaina commented Dec 6, 2023

fruitriin commented Dec 6, 2023

tamaina commented Dec 6, 2023

fruitriin commented Dec 6, 2023

acid-chicken commented Dec 6, 2023

tamaina commented Dec 6, 2023

fruitriin commented Dec 6, 2023

fruitriin commented Dec 6, 2023

chore: 開発モードでフロントエンドとバックエンドを独立して起動するようにする #12452

chore: 開発モードでフロントエンドとバックエンドを独立して起動するようにする #12452

Conversation

fruitriin commented Nov 25, 2023 • edited Loading

What

Note: フロントエンドとバックエンドを別々のシェルで起動したい

Why

Additional info (optional)

PostgresqlとRedisを用意するのがめんどくさいのでこれらだけDockerでやりたい

テスト観点など

Checklist

codecov bot commented Nov 25, 2023 • edited Loading

Codecov Report

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

fruitriin Nov 25, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Nov 25, 2023 • edited Loading

Choose a reason for hiding this comment

samunohito left a comment

Choose a reason for hiding this comment

fruitriin commented Dec 6, 2023

tamaina commented Dec 6, 2023

fruitriin commented Dec 6, 2023 • edited Loading

tamaina commented Dec 6, 2023

fruitriin commented Dec 6, 2023

tamaina commented Dec 6, 2023

fruitriin commented Dec 6, 2023

acid-chicken commented Dec 6, 2023

tamaina commented Dec 6, 2023

fruitriin commented Dec 6, 2023

fruitriin commented Dec 6, 2023

fruitriin commented Nov 25, 2023 •

edited

Loading

codecov bot commented Nov 25, 2023 •

edited

Loading

fruitriin Nov 25, 2023 •

edited

Loading

github-actions bot commented Nov 25, 2023 •

edited

Loading

fruitriin commented Dec 6, 2023 •

edited

Loading