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

* [wip]run standalone vite

* [wip]run standalone vite

* some fix (tabler icons, sw, streaming)

* fix theme

* fix run scripts

* favicon

* client-assets

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

* fix lang change

* fix clientManifest

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

* 色々修正

* 色々修正

* 色々修正

* fix

* Revert "client-assets"

This reverts commit 582601e90e.

# Conflicts:
#	packages/frontend/vite.config.ts

* 色々修正

* fix

* fix

* add url and proxy to server proxy

* Update packages/frontend/src/index.html

* wip

* Merge remote-tracking branch 'origin/develop' into feat/launch-standalone-frontend

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

* Merge remote-tracking branch 'origin/develop' into feat/launch-standalone-frontend

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

* fix tabler load

* Apply suggestions from code review

* Update packages/frontend/src/index.html

* fix

* fix vite.config.local-dev.ts

* fix CONTRIBUTING.md

---------

Co-authored-by: FruitRiin <nassii74@gmail.com>
Co-authored-by: osamu <46447427+sam-osamu@users.noreply.github.com>
Co-authored-by: 果物リン <fruitriin@riinswork.space>
Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
Co-authored-by: ozelot <contact@ozelot.dev>

CONTRIBUTING.md

@@ -138,6 +138,11 @@ After finishing the migration, run the `pnpm dev` command to start the developme
 pnpm dev
 ```
 
+To access Misskey once it's launched, type `http://localhost:[port]` in your browser's address bar.  
+The [port] part will contain the value set in the port item of .config/default.yml (3000 will be entered by default)
+
+caution: If you use a port other than 3000, you need to change the proxy settings in packages/frontend/vite.config.local-dev.ts.
+
 ## Testing
 - Test codes are located in [`/packages/backend/test`](/packages/backend/test).
 

docker-compose.local-db.yml

@@ -0,0 +1,42 @@
+version: "3"
+
+# このconfigは、 dockerでMisskey本体を起動せず、 redisとpostgresql などだけを起動します
+
+services:
+  redis:
+    restart: always
+    image: redis:7-alpine
+    ports:
+      - "6379:6379"
+    volumes:
+      - ./redis:/data
+    healthcheck:
+      test: "redis-cli ping"
+      interval: 5s
+      retries: 20
+
+  db:
+    restart: always
+    image: postgres:15-alpine
+    ports:
+      - "5432:5432"
+    env_file:
+      - .config/docker.env
+    volumes:
+      - ./db:/var/lib/postgresql/data
+    healthcheck:
+      test: "pg_isready -U $$POSTGRES_USER -d $$POSTGRES_DB"
+      interval: 5s
+      retries: 20
+
+#  meilisearch:
+#    restart: always
+#    image: getmeili/meilisearch:v1.3.4
+#    environment:
+#      - MEILI_NO_ANALYTICS=true
+#      - MEILI_ENV=production
+#    env_file:
+#      - .config/meilisearch.env
+#    volumes:
+#      - ./meili_data:/meili_data
+

package.json

@@ -27,7 +27,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",
 		"lint": "pnpm -r lint",
 		"cy:open": "pnpm cypress open --browser --e2e --config-file=cypress.config.ts",
 		"cy:run": "pnpm cypress run",

packages/backend/package.json

@@ -16,6 +16,7 @@
 		"watch:swc": "swc src -d built -D -w",
 		"build:tsc": "tsc -p tsconfig.json && tsc-alias -p tsconfig.json",
 		"watch": "node watch.mjs",
+		"dev": "node ./built/boot/entry.js",
 		"typecheck": "tsc --noEmit",
 		"eslint": "eslint --quiet \"src/**/*.ts\"",
 		"lint": "pnpm typecheck && pnpm eslint",

packages/frontend/package.json

@@ -4,6 +4,7 @@
 	"type": "module",
 	"scripts": {
 		"watch": "vite",
+		"dev": "vite --config vite.config.local-dev.ts",
 		"build": "vite build",
 		"storybook-dev": "nodemon --verbose --watch src --ext \"mdx,ts,vue\" --ignore \"*.stories.ts\" --exec \"pnpm build-storybook-pre && pnpm exec storybook dev -p 6006 --ci\"",
 		"build-storybook-pre": "(tsc -p .storybook || echo done.) && node .storybook/generate.js && node .storybook/preload-locale.js && node .storybook/preload-theme.js",

packages/frontend/src/_dev_boot_.ts

@@ -0,0 +1,11 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and other misskey contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+// devモードで起動される際（index.htmlを使うとき）はrouterが暴発してしまってうまく読み込めない。
+// よって、devモードとして起動されるときはビルド時に組み込む形としておく。
+// (pnpm start時はpugファイルの中で静的リソースとして読み込むようになっており、この問題は起こっていない)
+import '@tabler/icons-webfont/tabler-icons.scss';
+
+import('@/_boot_.js');

packages/frontend/src/boot/common.ts

@@ -187,6 +187,12 @@ export async function common(createVue: () => App<Element>) {
 			if (instance.defaultLightTheme != null) ColdDeviceStorage.set('lightTheme', JSON.parse(instance.defaultLightTheme));
 			if (instance.defaultDarkTheme != null) ColdDeviceStorage.set('darkTheme', JSON.parse(instance.defaultDarkTheme));
 			defaultStore.set('themeInitial', false);
+		} else {
+			if (defaultStore.state.darkMode) {
+				applyTheme(darkTheme.value);
+			} else {
+				applyTheme(lightTheme.value);
+			}
 		}
 	});
 

packages/frontend/src/index.html

@@ -0,0 +1,30 @@
+<!--
+  SPDX-FileCopyrightText: syuilo and other misskey contributors
+  SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<!--
+  開発モードのviteはこのファイルを起点にサーバーを起動します。
+  このファイルに書かれた [t]js のリンクと (s)cssのリンクと、その依存関係にあるファイルはビルドされます
+-->
+
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8" />
+	<title>misskey</title>
+	<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
+	<meta
+		http-equiv="Content-Security-Policy"
+		content="default-src 'self';
+		  script-src 'self';
+		  style-src 'self' 'unsafe-inline';
+		  img-src 'self' data: www.google.com xn--931a.moe localhost:3000 localhost:5137 127.0.0.1:5173 127.0.0.1:3000"
+	/>
+</head>
+
+<body>
+<div id="app"></div>
+<script type="module" src="./_dev_boot_.ts"></script>
+</body>
+</html>

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

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

packages/frontend/src/pages/welcome.entrance.a.vue

@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<XTimeline class="tl"/>
 	<div class="shape1"></div>
 	<div class="shape2"></div>
-	<img src="/client-assets/misskey.svg" class="misskey"/>
+	<img :src="misskeysvg" class="misskey"/>
 	<div class="emojis">
 		<MkEmoji :normal="true" :noStyle="true" emoji="👍"/>
 		<MkEmoji :normal="true" :noStyle="true" emoji="❤"/>
@@ -38,6 +38,7 @@ import * as Misskey from 'misskey-js';
 import XTimeline from './welcome.timeline.vue';
 import MarqueeText from '@/components/MkMarquee.vue';
 import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
+import misskeysvg from '/client-assets/misskey.svg';
 import MkInfo from '@/components/MkInfo.vue';
 import { instanceName } from '@/config.js';
 import * as os from '@/os.js';
@@ -55,7 +56,6 @@ function getInstanceIcon(instance: Misskey.entities.FederationInstance): string
 	if (!instance.iconUrl) {
 		return '';
 	}
-
 	return getProxiedImageUrl(instance.iconUrl, 'preview');
 }
 

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

@@ -0,0 +1,53 @@
+import dns from 'dns';
+import { defineConfig } from 'vite';
+import { getConfig } from './vite.config.js';
+
+dns.setDefaultResultOrder('ipv4first');
+
+const defaultConfig = getConfig();
+
+const devConfig = {
+	// 基本の設定は vite.config.js から引き継ぐ
+	...defaultConfig,
+	root: 'src',
+	publicDir: '../assets',
+	base: './',
+	server: {
+		host: 'localhost',
+		port: 5173,
+		proxy: {
+			'/api': {
+				changeOrigin: true,
+				target: 'http://localhost:3000/',
+			},
+			'/assets': 'http://localhost:3000/',
+			'/files': 'http://localhost:3000/',
+			'/twemoji': 'http://localhost:3000/',
+			'/fluent-emoji': 'http://localhost:3000/',
+			'/sw.js': 'http://localhost:3000/',
+			'/streaming': {
+				target: 'ws://localhost:3000/',
+				ws: true,
+			},
+			'/favicon.ico': 'http://localhost:3000/',
+			'/identicon': {
+				target: 'http://localhost:3000/',
+				rewrite(path) {
+					return path.replace('@localhost:5173', '');
+				},
+			},
+			'/url': 'http://localhost:3000',
+			'/proxy': 'http://localhost:3000',
+		},
+	},
+	build: {
+		...defaultConfig.build,
+		rollupOptions: {
+			...defaultConfig.build?.rollupOptions,
+			input: 'index.html',
+		},
+	},
+};
+
+export default defineConfig(({ command, mode }) => devConfig);
+