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 582601e90eb771875bdf8aba263da2316a59d01b.

# 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:
おさむのひと 2023-12-08 08:22:08 +09:00 committed by GitHub
parent e6d01e33e6
commit b0039f0946
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 153 additions and 3 deletions

View file

@ -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).

View file

@ -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

View file

@ -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",

View file

@ -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",

View file

@ -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",

View file

@ -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');

View file

@ -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);
}
} }
}); });

View file

@ -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>

View file

@ -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, () => {

View file

@ -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');
} }

View file

@ -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);