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>
This commit is contained in:
parent
e6d01e33e6
commit
b0039f0946
|
@ -138,6 +138,11 @@ After finishing the migration, run the `pnpm dev` command to start the developme
|
||||||
pnpm dev
|
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
|
## Testing
|
||||||
- Test codes are located in [`/packages/backend/test`](/packages/backend/test).
|
- Test codes are located in [`/packages/backend/test`](/packages/backend/test).
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -27,7 +27,7 @@
|
||||||
"check:connect": "cd packages/backend && pnpm check:connect",
|
"check:connect": "cd packages/backend && pnpm check:connect",
|
||||||
"migrateandstart": "pnpm migrate && pnpm start",
|
"migrateandstart": "pnpm migrate && pnpm start",
|
||||||
"watch": "pnpm dev",
|
"watch": "pnpm dev",
|
||||||
"dev": "node ./scripts/dev.mjs",
|
"dev": "pnpm -r dev",
|
||||||
"lint": "pnpm -r lint",
|
"lint": "pnpm -r lint",
|
||||||
"cy:open": "pnpm cypress open --browser --e2e --config-file=cypress.config.ts",
|
"cy:open": "pnpm cypress open --browser --e2e --config-file=cypress.config.ts",
|
||||||
"cy:run": "pnpm cypress run",
|
"cy:run": "pnpm cypress run",
|
||||||
|
|
|
@ -16,6 +16,7 @@
|
||||||
"watch:swc": "swc src -d built -D -w",
|
"watch:swc": "swc src -d built -D -w",
|
||||||
"build:tsc": "tsc -p tsconfig.json && tsc-alias -p tsconfig.json",
|
"build:tsc": "tsc -p tsconfig.json && tsc-alias -p tsconfig.json",
|
||||||
"watch": "node watch.mjs",
|
"watch": "node watch.mjs",
|
||||||
|
"dev": "node ./built/boot/entry.js",
|
||||||
"typecheck": "tsc --noEmit",
|
"typecheck": "tsc --noEmit",
|
||||||
"eslint": "eslint --quiet \"src/**/*.ts\"",
|
"eslint": "eslint --quiet \"src/**/*.ts\"",
|
||||||
"lint": "pnpm typecheck && pnpm eslint",
|
"lint": "pnpm typecheck && pnpm eslint",
|
||||||
|
|
|
@ -4,6 +4,7 @@
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"watch": "vite",
|
"watch": "vite",
|
||||||
|
"dev": "vite --config vite.config.local-dev.ts",
|
||||||
"build": "vite build",
|
"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\"",
|
"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",
|
"build-storybook-pre": "(tsc -p .storybook || echo done.) && node .storybook/generate.js && node .storybook/preload-locale.js && node .storybook/preload-theme.js",
|
||||||
|
|
|
@ -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');
|
|
@ -187,6 +187,12 @@ export async function common(createVue: () => App<Element>) {
|
||||||
if (instance.defaultLightTheme != null) ColdDeviceStorage.set('lightTheme', JSON.parse(instance.defaultLightTheme));
|
if (instance.defaultLightTheme != null) ColdDeviceStorage.set('lightTheme', JSON.parse(instance.defaultLightTheme));
|
||||||
if (instance.defaultDarkTheme != null) ColdDeviceStorage.set('darkTheme', JSON.parse(instance.defaultDarkTheme));
|
if (instance.defaultDarkTheme != null) ColdDeviceStorage.set('darkTheme', JSON.parse(instance.defaultDarkTheme));
|
||||||
defaultStore.set('themeInitial', false);
|
defaultStore.set('themeInitial', false);
|
||||||
|
} else {
|
||||||
|
if (defaultStore.state.darkMode) {
|
||||||
|
applyTheme(darkTheme.value);
|
||||||
|
} else {
|
||||||
|
applyTheme(lightTheme.value);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -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>
|
|
@ -293,6 +293,7 @@ const useGroupedNotifications = computed(defaultStore.makeGetterSetter('useGroup
|
||||||
watch(lang, () => {
|
watch(lang, () => {
|
||||||
miLocalStorage.setItem('lang', lang.value as string);
|
miLocalStorage.setItem('lang', lang.value as string);
|
||||||
miLocalStorage.removeItem('locale');
|
miLocalStorage.removeItem('locale');
|
||||||
|
miLocalStorage.removeItem('localeVersion');
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(fontSize, () => {
|
watch(fontSize, () => {
|
||||||
|
|
|
@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
||||||
<XTimeline class="tl"/>
|
<XTimeline class="tl"/>
|
||||||
<div class="shape1"></div>
|
<div class="shape1"></div>
|
||||||
<div class="shape2"></div>
|
<div class="shape2"></div>
|
||||||
<img src="/client-assets/misskey.svg" class="misskey"/>
|
<img :src="misskeysvg" class="misskey"/>
|
||||||
<div class="emojis">
|
<div class="emojis">
|
||||||
<MkEmoji :normal="true" :noStyle="true" emoji="👍"/>
|
<MkEmoji :normal="true" :noStyle="true" emoji="👍"/>
|
||||||
<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 XTimeline from './welcome.timeline.vue';
|
||||||
import MarqueeText from '@/components/MkMarquee.vue';
|
import MarqueeText from '@/components/MkMarquee.vue';
|
||||||
import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
|
import MkFeaturedPhotos from '@/components/MkFeaturedPhotos.vue';
|
||||||
|
import misskeysvg from '/client-assets/misskey.svg';
|
||||||
import MkInfo from '@/components/MkInfo.vue';
|
import MkInfo from '@/components/MkInfo.vue';
|
||||||
import { instanceName } from '@/config.js';
|
import { instanceName } from '@/config.js';
|
||||||
import * as os from '@/os.js';
|
import * as os from '@/os.js';
|
||||||
|
@ -55,7 +56,6 @@ function getInstanceIcon(instance: Misskey.entities.FederationInstance): string
|
||||||
if (!instance.iconUrl) {
|
if (!instance.iconUrl) {
|
||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
|
|
||||||
return getProxiedImageUrl(instance.iconUrl, 'preview');
|
return getProxiedImageUrl(instance.iconUrl, 'preview');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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);
|
||||||
|
|
Loading…
Reference in New Issue