Merge branch 'develop'

11 files changed, 888 insertions, 674 deletions

diff --git a/packages/backend/src/server/web/ClientServerService.ts b/packages/backend/src/server/web/ClientServerService.ts
new file mode 100644
index 0000000000..2a764a25b0
--- /dev/null
+++ b/packages/backend/src/server/web/ClientServerService.ts
@@ -0,0 +1,656 @@
+import { dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { Inject, Injectable } from '@nestjs/common';
+import { createBullBoard } from '@bull-board/api';
+import { BullAdapter } from '@bull-board/api/bullAdapter.js';
+import { FastifyAdapter } from '@bull-board/fastify';
+import ms from 'ms';
+import sharp from 'sharp';
+import pug from 'pug';
+import { In, IsNull } from 'typeorm';
+import fastifyStatic from '@fastify/static';
+import fastifyView from '@fastify/view';
+import fastifyCookie from '@fastify/cookie';
+import fastifyProxy from '@fastify/http-proxy';
+import vary from 'vary';
+import type { Config } from '@/config.js';
+import { getNoteSummary } from '@/misc/get-note-summary.js';
+import { DI } from '@/di-symbols.js';
+import * as Acct from '@/misc/acct.js';
+import { MetaService } from '@/core/MetaService.js';
+import type { DbQueue, DeliverQueue, EndedPollNotificationQueue, InboxQueue, ObjectStorageQueue, SystemQueue, WebhookDeliverQueue } from '@/core/QueueModule.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { NoteEntityService } from '@/core/entities/NoteEntityService.js';
+import { PageEntityService } from '@/core/entities/PageEntityService.js';
+import { GalleryPostEntityService } from '@/core/entities/GalleryPostEntityService.js';
+import { ClipEntityService } from '@/core/entities/ClipEntityService.js';
+import { ChannelEntityService } from '@/core/entities/ChannelEntityService.js';
+import type { ChannelsRepository, ClipsRepository, EmojisRepository, FlashsRepository, GalleryPostsRepository, NotesRepository, PagesRepository, UserProfilesRepository, UsersRepository } from '@/models/index.js';
+import { deepClone } from '@/misc/clone.js';
+import { bindThis } from '@/decorators.js';
+import { FlashEntityService } from '@/core/entities/FlashEntityService.js';
+import { RoleService } from '@/core/RoleService.js';
+import manifest from './manifest.json' assert { type: 'json' };
+import { FeedService } from './FeedService.js';
+import { UrlPreviewService } from './UrlPreviewService.js';
+import type { FastifyInstance, FastifyPluginOptions, FastifyReply } from 'fastify';
+
+const _filename = fileURLToPath(import.meta.url);
+const _dirname = dirname(_filename);
+
+const staticAssets = `${_dirname}/../../../assets/`;
+const clientAssets = `${_dirname}/../../../../frontend/assets/`;
+const assets = `${_dirname}/../../../../../built/_frontend_dist_/`;
+const swAssets = `${_dirname}/../../../../../built/_sw_dist_/`;
+const viteOut = `${_dirname}/../../../../../built/_vite_/`;
+
+@Injectable()
+export class ClientServerService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
+
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		@Inject(DI.galleryPostsRepository)
+		private galleryPostsRepository: GalleryPostsRepository,
+
+		@Inject(DI.channelsRepository)
+		private channelsRepository: ChannelsRepository,
+
+		@Inject(DI.clipsRepository)
+		private clipsRepository: ClipsRepository,
+
+		@Inject(DI.pagesRepository)
+		private pagesRepository: PagesRepository,
+
+		@Inject(DI.flashsRepository)
+		private flashsRepository: FlashsRepository,
+
+		private flashEntityService: FlashEntityService,
+		private userEntityService: UserEntityService,
+		private noteEntityService: NoteEntityService,
+		private pageEntityService: PageEntityService,
+		private galleryPostEntityService: GalleryPostEntityService,
+		private clipEntityService: ClipEntityService,
+		private channelEntityService: ChannelEntityService,
+		private metaService: MetaService,
+		private urlPreviewService: UrlPreviewService,
+		private feedService: FeedService,
+		private roleService: RoleService,
+
+		@Inject('queue:system') public systemQueue: SystemQueue,
+		@Inject('queue:endedPollNotification') public endedPollNotificationQueue: EndedPollNotificationQueue,
+		@Inject('queue:deliver') public deliverQueue: DeliverQueue,
+		@Inject('queue:inbox') public inboxQueue: InboxQueue,
+		@Inject('queue:db') public dbQueue: DbQueue,
+		@Inject('queue:objectStorage') public objectStorageQueue: ObjectStorageQueue,
+		@Inject('queue:webhookDeliver') public webhookDeliverQueue: WebhookDeliverQueue,
+	) {
+		//this.createServer = this.createServer.bind(this);
+	}
+
+	@bindThis
+	private async manifestHandler(reply: FastifyReply) {
+		const res = deepClone(manifest);
+
+		const instance = await this.metaService.fetch(true);
+
+		res.short_name = instance.name ?? 'Misskey';
+		res.name = instance.name ?? 'Misskey';
+		if (instance.themeColor) res.theme_color = instance.themeColor;
+
+		reply.header('Cache-Control', 'max-age=300');
+		return (res);
+	}
+
+	@bindThis
+	public createServer(fastify: FastifyInstance, options: FastifyPluginOptions, done: (err?: Error) => void) {
+		fastify.register(fastifyCookie, {});
+
+		//#region Bull Dashboard
+		const bullBoardPath = '/queue';
+
+		// Authenticate
+		fastify.addHook('onRequest', async (request, reply) => {
+			if (request.url === bullBoardPath || request.url.startsWith(bullBoardPath + '/')) {
+				const token = request.cookies.token;
+				if (token == null) {
+					reply.code(401);
+					throw new Error('login required');
+				}
+				const user = await this.usersRepository.findOneBy({ token });
+				if (user == null) {
+					reply.code(403);
+					throw new Error('no such user');
+				}
+				const isAdministrator = await this.roleService.isAdministrator(user);
+				if (!isAdministrator) {
+					reply.code(403);
+					throw new Error('access denied');
+				}
+			}
+		});
+
+		const serverAdapter = new FastifyAdapter();
+
+		createBullBoard({
+			queues: [
+				this.systemQueue,
+				this.endedPollNotificationQueue,
+				this.deliverQueue,
+				this.inboxQueue,
+				this.dbQueue,
+				this.objectStorageQueue,
+				this.webhookDeliverQueue,
+			].map(q => new BullAdapter(q)),
+			serverAdapter,
+		});
+
+		serverAdapter.setBasePath(bullBoardPath);
+		fastify.register(serverAdapter.registerPlugin(), { prefix: bullBoardPath });
+		//#endregion
+
+		fastify.register(fastifyView, {
+			root: _dirname + '/views',
+			engine: {
+				pug: pug,
+			},
+			defaultContext: {
+				version: this.config.version,
+				config: this.config,
+			},
+		});
+
+		fastify.addHook('onRequest', (request, reply, done) => {
+			// クリックジャッキング防止のためiFrameの中に入れられないようにする
+			reply.header('X-Frame-Options', 'DENY');
+			done();
+		});
+
+		//#region vite assets
+		if (this.config.clientManifestExists) {
+			fastify.register(fastifyStatic, {
+				root: viteOut,
+				prefix: '/vite/',
+				maxAge: ms('30 days'),
+				decorateReply: false,
+			});
+		} else {
+			fastify.register(fastifyProxy, {
+				upstream: 'http://localhost:5173', // TODO: port configuration
+				prefix: '/vite',
+				rewritePrefix: '/vite',
+			});
+		}
+		//#endregion
+
+		//#region static assets
+
+		fastify.register(fastifyStatic, {
+			root: _dirname,
+			serve: false,
+		});
+
+		fastify.register(fastifyStatic, {
+			root: staticAssets,
+			prefix: '/static-assets/',
+			maxAge: ms('7 days'),
+			decorateReply: false,
+		});
+
+		fastify.register(fastifyStatic, {
+			root: clientAssets,
+			prefix: '/client-assets/',
+			maxAge: ms('7 days'),
+			decorateReply: false,
+		});
+
+		fastify.register(fastifyStatic, {
+			root: assets,
+			prefix: '/assets/',
+			maxAge: ms('7 days'),
+			decorateReply: false,
+		});
+
+		fastify.get('/favicon.ico', async (request, reply) => {
+			return reply.sendFile('/favicon.ico', staticAssets);
+		});
+
+		fastify.get('/apple-touch-icon.png', async (request, reply) => {
+			return reply.sendFile('/apple-touch-icon.png', staticAssets);
+		});
+
+		fastify.get<{ Params: { path: string } }>('/fluent-emoji/:path(.*)', async (request, reply) => {
+			const path = request.params.path;
+
+			if (!path.match(/^[0-9a-f-]+\.png$/)) {
+				reply.code(404);
+				return;
+			}
+
+			reply.header('Content-Security-Policy', 'default-src \'none\'; style-src \'unsafe-inline\'');
+
+			return await reply.sendFile(path, `${_dirname}/../../../../../fluent-emojis/dist/`, {
+				maxAge: ms('30 days'),
+			});
+		});
+
+		fastify.get<{ Params: { path: string } }>('/twemoji/:path(.*)', async (request, reply) => {
+			const path = request.params.path;
+
+			if (!path.match(/^[0-9a-f-]+\.svg$/)) {
+				reply.code(404);
+				return;
+			}
+
+			reply.header('Content-Security-Policy', 'default-src \'none\'; style-src \'unsafe-inline\'');
+
+			return await reply.sendFile(path, `${_dirname}/../../../node_modules/@discordapp/twemoji/dist/svg/`, {
+				maxAge: ms('30 days'),
+			});
+		});
+
+		fastify.get<{ Params: { path: string } }>('/twemoji-badge/:path(.*)', async (request, reply) => {
+			const path = request.params.path;
+
+			if (!path.match(/^[0-9a-f-]+\.png$/)) {
+				reply.code(404);
+				return;
+			}
+
+			const mask = await sharp(
+				`${_dirname}/../../../node_modules/@discordapp/twemoji/dist/svg/${path.replace('.png', '')}.svg`,
+				{ density: 1000 },
+			)
+				.resize(488, 488)
+				.greyscale()
+				.normalise()
+				.linear(1.75, -(128 * 1.75) + 128) // 1.75x contrast
+				.flatten({ background: '#000' })
+				.extend({
+					top: 12,
+					bottom: 12,
+					left: 12,
+					right: 12,
+					background: '#000',
+				})
+				.toColorspace('b-w')
+				.png()
+				.toBuffer();
+
+			const buffer = await sharp({
+				create: { width: 512, height: 512, channels: 4, background: { r: 0, g: 0, b: 0, alpha: 0 } },
+			})
+				.pipelineColorspace('b-w')
+				.boolean(mask, 'eor')
+				.resize(96, 96)
+				.png()
+				.toBuffer();
+
+			reply.header('Content-Security-Policy', 'default-src \'none\'; style-src \'unsafe-inline\'');
+			reply.header('Cache-Control', 'max-age=2592000');
+			reply.header('Content-Type', 'image/png');
+			return buffer;
+		});
+
+		// ServiceWorker
+		fastify.get('/sw.js', async (request, reply) => {
+			return await reply.sendFile('/sw.js', swAssets, {
+				maxAge: ms('10 minutes'),
+			});
+		});
+
+		// Manifest
+		fastify.get('/manifest.json', async (request, reply) => await this.manifestHandler(reply));
+
+		fastify.get('/robots.txt', async (request, reply) => {
+			return await reply.sendFile('/robots.txt', staticAssets);
+		});
+
+		// OpenSearch XML
+		fastify.get('/opensearch.xml', async (request, reply) => {
+			const meta = await this.metaService.fetch();
+
+			const name = meta.name ?? 'Misskey';
+			let content = '';
+			content += '<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/">';
+			content += `<ShortName>${name}</ShortName>`;
+			content += `<Description>${name} Search</Description>`;
+			content += '<InputEncoding>UTF-8</InputEncoding>';
+			content += `<Image width="16" height="16" type="image/x-icon">${this.config.url}/favicon.ico</Image>`;
+			content += `<Url type="text/html" template="${this.config.url}/search?q={searchTerms}"/>`;
+			content += '</OpenSearchDescription>';
+
+			reply.header('Content-Type', 'application/opensearchdescription+xml');
+			return await reply.send(content);
+		});
+
+		//#endregion
+
+		const renderBase = async (reply: FastifyReply) => {
+			const meta = await this.metaService.fetch();
+			reply.header('Cache-Control', 'public, max-age=15');
+			return await reply.view('base', {
+				img: meta.bannerUrl,
+				title: meta.name ?? 'Misskey',
+				instanceName: meta.name ?? 'Misskey',
+				url: this.config.url,
+				desc: meta.description,
+				icon: meta.iconUrl,
+				themeColor: meta.themeColor,
+			});
+		};
+
+		// URL preview endpoint
+		fastify.get<{ Querystring: { url: string; lang: string; } }>('/url', (request, reply) => this.urlPreviewService.handle(request, reply));
+
+		const getFeed = async (acct: string) => {
+			const { username, host } = Acct.parse(acct);
+			const user = await this.usersRepository.findOneBy({
+				usernameLower: username.toLowerCase(),
+				host: host ?? IsNull(),
+				isSuspended: false,
+			});
+
+			return user && await this.feedService.packFeed(user);
+		};
+
+		// Atom
+		fastify.get<{ Params: { user: string; } }>('/@:user.atom', async (request, reply) => {
+			const feed = await getFeed(request.params.user);
+
+			if (feed) {
+				reply.header('Content-Type', 'application/atom+xml; charset=utf-8');
+				return feed.atom1();
+			} else {
+				reply.code(404);
+			}
+		});
+
+		// RSS
+		fastify.get<{ Params: { user: string; } }>('/@:user.rss', async (request, reply) => {
+			const feed = await getFeed(request.params.user);
+
+			if (feed) {
+				reply.header('Content-Type', 'application/rss+xml; charset=utf-8');
+				return feed.rss2();
+			} else {
+				reply.code(404);
+			}
+		});
+
+		// JSON
+		fastify.get<{ Params: { user: string; } }>('/@:user.json', async (request, reply) => {
+			const feed = await getFeed(request.params.user);
+
+			if (feed) {
+				reply.header('Content-Type', 'application/json; charset=utf-8');
+				return feed.json1();
+			} else {
+				reply.code(404);
+			}
+		});
+
+		//#region SSR (for crawlers)
+		// User
+		fastify.get<{ Params: { user: string; sub?: string; } }>('/@:user/:sub?', async (request, reply) => {
+			const { username, host } = Acct.parse(request.params.user);
+			const user = await this.usersRepository.findOneBy({
+				usernameLower: username.toLowerCase(),
+				host: host ?? IsNull(),
+				isSuspended: false,
+			});
+
+			if (user != null) {
+				const profile = await this.userProfilesRepository.findOneByOrFail({ userId: user.id });
+				const meta = await this.metaService.fetch();
+				const me = profile.fields
+					? profile.fields
+						.filter(filed => filed.value != null && filed.value.match(/^https?:/))
+						.map(field => field.value)
+					: [];
+
+				reply.header('Cache-Control', 'public, max-age=15');
+				return await reply.view('user', {
+					user, profile, me,
+					avatarUrl: await this.userEntityService.getAvatarUrl(user),
+					sub: request.params.sub,
+					instanceName: meta.name ?? 'Misskey',
+					icon: meta.iconUrl,
+					themeColor: meta.themeColor,
+				});
+			} else {
+				// リモートユーザーなので
+				// モデレータがAPI経由で参照可能にするために404にはしない
+				return await renderBase(reply);
+			}
+		});
+
+		fastify.get<{ Params: { user: string; } }>('/users/:user', async (request, reply) => {
+			const user = await this.usersRepository.findOneBy({
+				id: request.params.user,
+				host: IsNull(),
+				isSuspended: false,
+			});
+
+			if (user == null) {
+				reply.code(404);
+				return;
+			}
+
+			reply.redirect(`/@${user.username}${ user.host == null ? '' : '@' + user.host}`);
+		});
+
+		// Note
+		fastify.get<{ Params: { note: string; } }>('/notes/:note', async (request, reply) => {
+			vary(reply.raw, 'Accept');
+
+			const note = await this.notesRepository.findOneBy({
+				id: request.params.note,
+				visibility: In(['public', 'home']),
+			});
+
+			if (note) {
+				const _note = await this.noteEntityService.pack(note);
+				const profile = await this.userProfilesRepository.findOneByOrFail({ userId: note.userId });
+				const meta = await this.metaService.fetch();
+				reply.header('Cache-Control', 'public, max-age=15');
+				return await reply.view('note', {
+					note: _note,
+					profile,
+					avatarUrl: await this.userEntityService.getAvatarUrl(await this.usersRepository.findOneByOrFail({ id: note.userId })),
+					// TODO: Let locale changeable by instance setting
+					summary: getNoteSummary(_note),
+					instanceName: meta.name ?? 'Misskey',
+					icon: meta.iconUrl,
+					themeColor: meta.themeColor,
+				});
+			} else {
+				return await renderBase(reply);
+			}
+		});
+
+		// Page
+		fastify.get<{ Params: { user: string; page: string; } }>('/@:user/pages/:page', async (request, reply) => {
+			const { username, host } = Acct.parse(request.params.user);
+			const user = await this.usersRepository.findOneBy({
+				usernameLower: username.toLowerCase(),
+				host: host ?? IsNull(),
+			});
+
+			if (user == null) return;
+
+			const page = await this.pagesRepository.findOneBy({
+				name: request.params.page,
+				userId: user.id,
+			});
+
+			if (page) {
+				const _page = await this.pageEntityService.pack(page);
+				const profile = await this.userProfilesRepository.findOneByOrFail({ userId: page.userId });
+				const meta = await this.metaService.fetch();
+				if (['public'].includes(page.visibility)) {
+					reply.header('Cache-Control', 'public, max-age=15');
+				} else {
+					reply.header('Cache-Control', 'private, max-age=0, must-revalidate');
+				}
+				return await reply.view('page', {
+					page: _page,
+					profile,
+					avatarUrl: await this.userEntityService.getAvatarUrl(await this.usersRepository.findOneByOrFail({ id: page.userId })),
+					instanceName: meta.name ?? 'Misskey',
+					icon: meta.iconUrl,
+					themeColor: meta.themeColor,
+				});
+			} else {
+				return await renderBase(reply);
+			}
+		});
+
+		// Flash
+		fastify.get<{ Params: { id: string; } }>('/play/:id', async (request, reply) => {
+			const flash = await this.flashsRepository.findOneBy({
+				id: request.params.id,
+			});
+
+			if (flash) {
+				const _flash = await this.flashEntityService.pack(flash);
+				const profile = await this.userProfilesRepository.findOneByOrFail({ userId: flash.userId });
+				const meta = await this.metaService.fetch();
+				reply.header('Cache-Control', 'public, max-age=15');
+				return await reply.view('flash', {
+					flash: _flash,
+					profile,
+					avatarUrl: await this.userEntityService.getAvatarUrl(await this.usersRepository.findOneByOrFail({ id: flash.userId })),
+					instanceName: meta.name ?? 'Misskey',
+					icon: meta.iconUrl,
+					themeColor: meta.themeColor,
+				});
+			} else {
+				return await renderBase(reply);
+			}
+		});
+
+		// Clip
+		fastify.get<{ Params: { clip: string; } }>('/clips/:clip', async (request, reply) => {
+			const clip = await this.clipsRepository.findOneBy({
+				id: request.params.clip,
+			});
+
+			if (clip && clip.isPublic) {
+				const _clip = await this.clipEntityService.pack(clip);
+				const profile = await this.userProfilesRepository.findOneByOrFail({ userId: clip.userId });
+				const meta = await this.metaService.fetch();
+				reply.header('Cache-Control', 'public, max-age=15');
+				return await reply.view('clip', {
+					clip: _clip,
+					profile,
+					avatarUrl: await this.userEntityService.getAvatarUrl(await this.usersRepository.findOneByOrFail({ id: clip.userId })),
+					instanceName: meta.name ?? 'Misskey',
+					icon: meta.iconUrl,
+					themeColor: meta.themeColor,
+				});
+			} else {
+				return await renderBase(reply);
+			}
+		});
+
+		// Gallery post
+		fastify.get<{ Params: { post: string; } }>('/gallery/:post', async (request, reply) => {
+			const post = await this.galleryPostsRepository.findOneBy({ id: request.params.post });
+
+			if (post) {
+				const _post = await this.galleryPostEntityService.pack(post);
+				const profile = await this.userProfilesRepository.findOneByOrFail({ userId: post.userId });
+				const meta = await this.metaService.fetch();
+				reply.header('Cache-Control', 'public, max-age=15');
+				return await reply.view('gallery-post', {
+					post: _post,
+					profile,
+					avatarUrl: await this.userEntityService.getAvatarUrl(await this.usersRepository.findOneByOrFail({ id: post.userId })),
+					instanceName: meta.name ?? 'Misskey',
+					icon: meta.iconUrl,
+					themeColor: meta.themeColor,
+				});
+			} else {
+				return await renderBase(reply);
+			}
+		});
+
+		// Channel
+		fastify.get<{ Params: { channel: string; } }>('/channels/:channel', async (request, reply) => {
+			const channel = await this.channelsRepository.findOneBy({
+				id: request.params.channel,
+			});
+
+			if (channel) {
+				const _channel = await this.channelEntityService.pack(channel);
+				const meta = await this.metaService.fetch();
+				reply.header('Cache-Control', 'public, max-age=15');
+				return await reply.view('channel', {
+					channel: _channel,
+					instanceName: meta.name ?? 'Misskey',
+					icon: meta.iconUrl,
+					themeColor: meta.themeColor,
+				});
+			} else {
+				return await renderBase(reply);
+			}
+		});
+		//#endregion
+
+		fastify.get('/_info_card_', async (request, reply) => {
+			const meta = await this.metaService.fetch(true);
+
+			reply.removeHeader('X-Frame-Options');
+
+			return await reply.view('info-card', {
+				version: this.config.version,
+				host: this.config.host,
+				meta: meta,
+				originalUsersCount: await this.usersRepository.countBy({ host: IsNull() }),
+				originalNotesCount: await this.notesRepository.countBy({ userHost: IsNull() }),
+			});
+		});
+
+		fastify.get('/bios', async (request, reply) => {
+			return await reply.view('bios', {
+				version: this.config.version,
+			});
+		});
+
+		fastify.get('/cli', async (request, reply) => {
+			return await reply.view('cli', {
+				version: this.config.version,
+			});
+		});
+
+		const override = (source: string, target: string, depth = 0) =>
+			[, ...target.split('/').filter(x => x), ...source.split('/').filter(x => x).splice(depth)].join('/');
+
+		fastify.get('/flush', async (request, reply) => {
+			return await reply.view('flush');
+		});
+
+		// streamingに非WebSocketリクエストが来た場合にbase htmlをキャシュ付きで返すと、Proxy等でそのパスがキャッシュされておかしくなる
+		fastify.get('/streaming', async (request, reply) => {
+			reply.code(503);
+			reply.header('Cache-Control', 'private, max-age=0');
+		});
+
+		// Render base html for all requests
+		fastify.get('*', async (request, reply) => {
+			return await renderBase(reply);
+		});
+
+		done();
+	}
+}
diff --git a/packages/backend/src/server/web/FeedService.ts b/packages/backend/src/server/web/FeedService.ts
new file mode 100644
index 0000000000..a14609adf9
--- /dev/null
+++ b/packages/backend/src/server/web/FeedService.ts
@@ -0,0 +1,88 @@
+import { Inject, Injectable } from '@nestjs/common';
+import { In, IsNull } from 'typeorm';
+import { Feed } from 'feed';
+import { DI } from '@/di-symbols.js';
+import type { DriveFilesRepository, NotesRepository, UserProfilesRepository, UsersRepository } from '@/models/index.js';
+import type { Config } from '@/config.js';
+import type { User } from '@/models/entities/User.js';
+import { UserEntityService } from '@/core/entities/UserEntityService.js';
+import { DriveFileEntityService } from '@/core/entities/DriveFileEntityService.js';
+import { bindThis } from '@/decorators.js';
+
+@Injectable()
+export class FeedService {
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		@Inject(DI.userProfilesRepository)
+		private userProfilesRepository: UserProfilesRepository,
+
+		@Inject(DI.notesRepository)
+		private notesRepository: NotesRepository,
+
+		@Inject(DI.driveFilesRepository)
+		private driveFilesRepository: DriveFilesRepository,
+
+		private userEntityService: UserEntityService,
+		private driveFileEntityService: DriveFileEntityService,
+	) {
+	}
+
+	@bindThis
+	public async packFeed(user: User) {
+		const author = {
+			link: `${this.config.url}/@${user.username}`,
+			name: user.name ?? user.username,
+		};
+	
+		const profile = await this.userProfilesRepository.findOneByOrFail({ userId: user.id });
+	
+		const notes = await this.notesRepository.find({
+			where: {
+				userId: user.id,
+				renoteId: IsNull(),
+				visibility: In(['public', 'home']),
+			},
+			order: { createdAt: -1 },
+			take: 20,
+		});
+	
+		const feed = new Feed({
+			id: author.link,
+			title: `${author.name} (@${user.username}@${this.config.host})`,
+			updated: notes[0].createdAt,
+			generator: 'Misskey',
+			description: `${user.notesCount} Notes, ${profile.ffVisibility === 'public' ? user.followingCount : '?'} Following, ${profile.ffVisibility === 'public' ? user.followersCount : '?'} Followers${profile.description ? ` · ${profile.description}` : ''}`,
+			link: author.link,
+			image: await this.userEntityService.getAvatarUrl(user),
+			feedLinks: {
+				json: `${author.link}.json`,
+				atom: `${author.link}.atom`,
+			},
+			author,
+			copyright: user.name ?? user.username,
+		});
+	
+		for (const note of notes) {
+			const files = note.fileIds.length > 0 ? await this.driveFilesRepository.findBy({
+				id: In(note.fileIds),
+			}) : [];
+			const file = files.find(file => file.type.startsWith('image/'));
+	
+			feed.addItem({
+				title: `New note by ${author.name}`,
+				link: `${this.config.url}/notes/${note.id}`,
+				date: note.createdAt,
+				description: note.cw ?? undefined,
+				content: note.text ?? undefined,
+				image: file ? this.driveFileEntityService.getPublicUrl(file) ?? undefined : undefined,
+			});
+		}
+	
+		return feed;
+	}
+}
diff --git a/packages/backend/src/server/web/UrlPreviewService.ts b/packages/backend/src/server/web/UrlPreviewService.ts
new file mode 100644
index 0000000000..802b404ce6
--- /dev/null
+++ b/packages/backend/src/server/web/UrlPreviewService.ts
@@ -0,0 +1,91 @@
+import { Inject, Injectable } from '@nestjs/common';
+import summaly from 'summaly';
+import { DI } from '@/di-symbols.js';
+import type { UsersRepository } from '@/models/index.js';
+import type { Config } from '@/config.js';
+import { MetaService } from '@/core/MetaService.js';
+import { HttpRequestService } from '@/core/HttpRequestService.js';
+import type Logger from '@/logger.js';
+import { query } from '@/misc/prelude/url.js';
+import { LoggerService } from '@/core/LoggerService.js';
+import { bindThis } from '@/decorators.js';
+import type { FastifyRequest, FastifyReply } from 'fastify';
+
+@Injectable()
+export class UrlPreviewService {
+	private logger: Logger;
+
+	constructor(
+		@Inject(DI.config)
+		private config: Config,
+
+		@Inject(DI.usersRepository)
+		private usersRepository: UsersRepository,
+
+		private metaService: MetaService,
+		private httpRequestService: HttpRequestService,
+		private loggerService: LoggerService,
+	) {
+		this.logger = this.loggerService.getLogger('url-preview');
+	}
+
+	@bindThis
+	private wrap(url?: string): string | null {
+		return url != null
+			? url.match(/^https?:\/\//)
+				? `${this.config.url}/proxy/preview.webp?${query({
+					url,
+					preview: '1',
+				})}`
+				: url
+			: null;
+	}
+
+	@bindThis
+	public async handle(
+		request: FastifyRequest<{ Querystring: { url: string; lang: string; } }>,
+		reply: FastifyReply,
+	) {
+		const url = request.query.url;
+		if (typeof url !== 'string') {
+			reply.code(400);
+			return;
+		}
+	
+		const lang = request.query.lang;
+		if (Array.isArray(lang)) {
+			reply.code(400);
+			return;
+		}
+	
+		const meta = await this.metaService.fetch();
+	
+		this.logger.info(meta.summalyProxy
+			? `(Proxy) Getting preview of ${url}@${lang} ...`
+			: `Getting preview of ${url}@${lang} ...`);
+		try {
+			const summary = meta.summalyProxy ? await this.httpRequestService.getJson<ReturnType<typeof summaly.default>>(`${meta.summalyProxy}?${query({
+				url: url,
+				lang: lang ?? 'ja-JP',
+			})}`) : await summaly.default(url, {
+				followRedirects: false,
+				lang: lang ?? 'ja-JP',
+			});
+	
+			this.logger.succ(`Got preview of ${url}: ${summary.title}`);
+	
+			summary.icon = this.wrap(summary.icon);
+			summary.thumbnail = this.wrap(summary.thumbnail);
+	
+			// Cache 7days
+			reply.header('Cache-Control', 'max-age=604800, immutable');
+	
+			return summary;
+		} catch (err) {
+			this.logger.warn(`Failed to get preview of ${url}: ${err}`);
+			reply.code(200);
+			reply.header('Cache-Control', 'max-age=86400, immutable');
+			return {};
+		}
+	}
+}
diff --git a/packages/backend/src/server/web/bios.js b/packages/backend/src/server/web/bios.js
index d06dee801a..c2ce5c3814 100644
--- a/packages/backend/src/server/web/bios.js
+++ b/packages/backend/src/server/web/bios.js
@@ -10,7 +10,7 @@ window.onload = async () => {
 			if (i) data.i = i;
 	
 			// Send request
-			fetch(endpoint.indexOf('://') > -1 ? endpoint : `/api/${endpoint}`, {
+			window.fetch(endpoint.indexOf('://') > -1 ? endpoint : `/api/${endpoint}`, {
 				method: 'POST',
 				body: JSON.stringify(data),
 				credentials: 'omit',
diff --git a/packages/backend/src/server/web/boot.js b/packages/backend/src/server/web/boot.js
index 2aef689d3f..e2fc27fecd 100644
--- a/packages/backend/src/server/web/boot.js
+++ b/packages/backend/src/server/web/boot.js
@@ -42,7 +42,7 @@
 			}
 		}
 
-		const res = await fetch(`/assets/locales/${lang}.${v}.json`);
+		const res = await window.fetch(`/assets/locales/${lang}.${v}.json`);
 		if (res.status === 200) {
 			localStorage.setItem('lang', lang);
 			localStorage.setItem('locale', await res.text());
@@ -57,7 +57,7 @@
 
 	//#region Script
 	function importAppScript() {
-		import(`/assets/${CLIENT_ENTRY}`)
+		import(`/vite/${CLIENT_ENTRY}`)
 			.catch(async e => {
 				await checkUpdate();
 				console.error(e);
@@ -290,13 +290,21 @@
 	// eslint-disable-next-line no-inner-declarations
 	async function checkUpdate() {
 		try {
-			const res = await fetch('/api/meta', {
+			const res = await window.fetch('/api/meta', {
 				method: 'POST',
-				cache: 'no-cache'
+				cache: 'no-cache',
+				body: '{}',
+				headers: {
+					'Content-Type': 'application/json',
+				},
 			});
 
 			const meta = await res.json();
 
+			if (meta.version == null) {
+				throw new Error('failed to fetch instance metadata');
+			}
+
 			if (meta.version != v) {
 				localStorage.setItem('v', meta.version);
 				refresh();
diff --git a/packages/backend/src/server/web/feed.ts b/packages/backend/src/server/web/feed.ts
deleted file mode 100644
index 4abe2885cf..0000000000
--- a/packages/backend/src/server/web/feed.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Feed } from 'feed';
-import { In, IsNull } from 'typeorm';
-import config from '@/config/index.js';
-import { User } from '@/models/entities/user.js';
-import { Notes, DriveFiles, UserProfiles, Users } from '@/models/index.js';
-
-export default async function(user: User) {
-	const author = {
-		link: `${config.url}/@${user.username}`,
-		name: user.name || user.username,
-	};
-
-	const profile = await UserProfiles.findOneByOrFail({ userId: user.id });
-
-	const notes = await Notes.find({
-		where: {
-			userId: user.id,
-			renoteId: IsNull(),
-			visibility: In(['public', 'home']),
-		},
-		order: { createdAt: -1 },
-		take: 20,
-	});
-
-	const feed = new Feed({
-		id: author.link,
-		title: `${author.name} (@${user.username}@${config.host})`,
-		updated: notes[0].createdAt,
-		generator: 'Misskey',
-		description: `${user.notesCount} Notes, ${profile.ffVisibility === 'public' ? user.followingCount : '?'} Following, ${profile.ffVisibility === 'public' ? user.followersCount : '?'} Followers${profile.description ? ` · ${profile.description}` : ''}`,
-		link: author.link,
-		image: await Users.getAvatarUrl(user),
-		feedLinks: {
-			json: `${author.link}.json`,
-			atom: `${author.link}.atom`,
-		},
-		author,
-		copyright: user.name || user.username,
-	});
-
-	for (const note of notes) {
-		const files = note.fileIds.length > 0 ? await DriveFiles.findBy({
-			id: In(note.fileIds),
-		}) : [];
-		const file = files.find(file => file.type.startsWith('image/'));
-
-		feed.addItem({
-			title: `New note by ${author.name}`,
-			link: `${config.url}/notes/${note.id}`,
-			date: note.createdAt,
-			description: note.cw || undefined,
-			content: note.text || undefined,
-			image: file ? DriveFiles.getPublicUrl(file) || undefined : undefined,
-		});
-	}
-
-	return feed;
-}
diff --git a/packages/backend/src/server/web/index.ts b/packages/backend/src/server/web/index.ts
deleted file mode 100644
index be95becb68..0000000000
--- a/packages/backend/src/server/web/index.ts
+++ /dev/null
@@ -1,521 +0,0 @@
-/**
- * Web Client Server
- */
-
-import { dirname } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { PathOrFileDescriptor, readFileSync } from 'node:fs';
-import ms from 'ms';
-import Koa from 'koa';
-import Router from '@koa/router';
-import send from 'koa-send';
-import favicon from 'koa-favicon';
-import views from 'koa-views';
-import sharp from 'sharp';
-import { createBullBoard } from '@bull-board/api';
-import { BullAdapter } from '@bull-board/api/bullAdapter.js';
-import { KoaAdapter } from '@bull-board/koa';
-
-import { In, IsNull } from 'typeorm';
-import { fetchMeta } from '@/misc/fetch-meta.js';
-import config from '@/config/index.js';
-import { Users, Notes, UserProfiles, Pages, Channels, Clips, GalleryPosts } from '@/models/index.js';
-import * as Acct from '@/misc/acct.js';
-import { getNoteSummary } from '@/misc/get-note-summary.js';
-import { queues } from '@/queue/queues.js';
-import { genOpenapiSpec } from '../api/openapi/gen-spec.js';
-import { urlPreviewHandler } from './url-preview.js';
-import { manifestHandler } from './manifest.js';
-import packFeed from './feed.js';
-
-const _filename = fileURLToPath(import.meta.url);
-const _dirname = dirname(_filename);
-
-const staticAssets = `${_dirname}/../../../assets/`;
-const clientAssets = `${_dirname}/../../../../client/assets/`;
-const assets = `${_dirname}/../../../../../built/_client_dist_/`;
-const swAssets = `${_dirname}/../../../../../built/_sw_dist_/`;
-
-// Init app
-const app = new Koa();
-
-//#region Bull Dashboard
-const bullBoardPath = '/queue';
-
-// Authenticate
-app.use(async (ctx, next) => {
-	if (ctx.path === bullBoardPath || ctx.path.startsWith(bullBoardPath + '/')) {
-		const token = ctx.cookies.get('token');
-		if (token == null) {
-			ctx.status = 401;
-			return;
-		}
-		const user = await Users.findOneBy({ token });
-		if (user == null || !(user.isAdmin || user.isModerator)) {
-			ctx.status = 403;
-			return;
-		}
-	}
-	await next();
-});
-
-const serverAdapter = new KoaAdapter();
-
-createBullBoard({
-	queues: queues.map(q => new BullAdapter(q)),
-	serverAdapter,
-});
-
-serverAdapter.setBasePath(bullBoardPath);
-app.use(serverAdapter.registerPlugin());
-//#endregion
-
-// Init renderer
-app.use(views(_dirname + '/views', {
-	extension: 'pug',
-	options: {
-		version: config.version,
-		getClientEntry: () => process.env.NODE_ENV === 'production' ?
-			config.clientEntry :
-			JSON.parse(readFileSync(`${_dirname}/../../../../../built/_client_dist_/manifest.json`, 'utf-8'))['src/init.ts'],
-		config,
-	},
-}));
-
-// Serve favicon
-app.use(favicon(`${_dirname}/../../../assets/favicon.ico`));
-
-// Common request handler
-app.use(async (ctx, next) => {
-	// IFrameの中に入れられないようにする
-	ctx.set('X-Frame-Options', 'DENY');
-	await next();
-});
-
-// Init router
-const router = new Router();
-
-//#region static assets
-
-router.get('/static-assets/(.*)', async ctx => {
-	await send(ctx as any, ctx.path.replace('/static-assets/', ''), {
-		root: staticAssets,
-		maxage: ms('7 days'),
-	});
-});
-
-router.get('/client-assets/(.*)', async ctx => {
-	await send(ctx as any, ctx.path.replace('/client-assets/', ''), {
-		root: clientAssets,
-		maxage: ms('7 days'),
-	});
-});
-
-router.get('/assets/(.*)', async ctx => {
-	await send(ctx as any, ctx.path.replace('/assets/', ''), {
-		root: assets,
-		maxage: ms('7 days'),
-	});
-});
-
-// Apple touch icon
-router.get('/apple-touch-icon.png', async ctx => {
-	await send(ctx as any, '/apple-touch-icon.png', {
-		root: staticAssets,
-	});
-});
-
-router.get('/twemoji/(.*)', async ctx => {
-	const path = ctx.path.replace('/twemoji/', '');
-
-	if (!path.match(/^[0-9a-f-]+\.svg$/)) {
-		ctx.status = 404;
-		return;
-	}
-
-	ctx.set('Content-Security-Policy', 'default-src \'none\'; style-src \'unsafe-inline\'');
-
-	await send(ctx as any, path, {
-		root: `${_dirname}/../../../node_modules/@discordapp/twemoji/dist/svg/`,
-		maxage: ms('30 days'),
-	});
-});
-
-router.get('/twemoji-badge/(.*)', async ctx => {
-	const path = ctx.path.replace('/twemoji-badge/', '');
-
-	if (!path.match(/^[0-9a-f-]+\.png$/)) {
-		ctx.status = 404;
-		return;
-	}
-
-	const mask = await sharp(
-		`${_dirname}/../../../node_modules/@discordapp/twemoji/dist/svg/${path.replace('.png', '')}.svg`,
-		{ density: 1000 },
-	)
-		.resize(488, 488)
-		.greyscale()
-		.normalise()
-		.linear(1.75, -(128 * 1.75) + 128) // 1.75x contrast
-		.flatten({ background: '#000' })
-		.extend({
-			top: 12,
-			bottom: 12,
-			left: 12,
-			right: 12,
-			background: '#000',
-		})
-		.toColorspace('b-w')
-		.png()
-		.toBuffer();
-
-	const buffer = await sharp({
-		create: { width: 512, height: 512, channels: 4, background: { r: 0, g: 0, b: 0, alpha: 0 } },
-	})
-		.pipelineColorspace('b-w')
-		.boolean(mask, 'eor')
-		.resize(96, 96)
-		.png()
-		.toBuffer();
-
-	ctx.set('Content-Security-Policy', 'default-src \'none\'; style-src \'unsafe-inline\'');
-	ctx.set('Cache-Control', 'max-age=2592000');
-	ctx.set('Content-Type', 'image/png');
-	ctx.body = buffer;
-});
-
-// ServiceWorker
-router.get(`/sw.js`, async ctx => {
-	await send(ctx as any, `/sw.js`, {
-		root: swAssets,
-		maxage: ms('10 minutes'),
-	});
-});
-
-// Manifest
-router.get('/manifest.json', manifestHandler);
-
-router.get('/robots.txt', async ctx => {
-	await send(ctx as any, '/robots.txt', {
-		root: staticAssets,
-	});
-});
-
-//#endregion
-
-// Docs
-router.get('/api-doc', async ctx => {
-	await send(ctx as any, '/redoc.html', {
-		root: staticAssets,
-	});
-});
-
-// URL preview endpoint
-router.get('/url', urlPreviewHandler);
-
-router.get('/api.json', async ctx => {
-	ctx.body = genOpenapiSpec();
-});
-
-const getFeed = async (acct: string) => {
-	const { username, host } = Acct.parse(acct);
-	const user = await Users.findOneBy({
-		usernameLower: username.toLowerCase(),
-		host: host ?? IsNull(),
-		isSuspended: false,
-	});
-
-	return user && await packFeed(user);
-};
-
-// Atom
-router.get('/@:user.atom', async ctx => {
-	const feed = await getFeed(ctx.params.user);
-
-	if (feed) {
-		ctx.set('Content-Type', 'application/atom+xml; charset=utf-8');
-		ctx.body = feed.atom1();
-	} else {
-		ctx.status = 404;
-	}
-});
-
-// RSS
-router.get('/@:user.rss', async ctx => {
-	const feed = await getFeed(ctx.params.user);
-
-	if (feed) {
-		ctx.set('Content-Type', 'application/rss+xml; charset=utf-8');
-		ctx.body = feed.rss2();
-	} else {
-		ctx.status = 404;
-	}
-});
-
-// JSON
-router.get('/@:user.json', async ctx => {
-	const feed = await getFeed(ctx.params.user);
-
-	if (feed) {
-		ctx.set('Content-Type', 'application/json; charset=utf-8');
-		ctx.body = feed.json1();
-	} else {
-		ctx.status = 404;
-	}
-});
-
-//#region SSR (for crawlers)
-// User
-router.get(['/@:user', '/@:user/:sub'], async (ctx, next) => {
-	const { username, host } = Acct.parse(ctx.params.user);
-	const user = await Users.findOneBy({
-		usernameLower: username.toLowerCase(),
-		host: host ?? IsNull(),
-		isSuspended: false,
-	});
-
-	if (user != null) {
-		const profile = await UserProfiles.findOneByOrFail({ userId: user.id });
-		const meta = await fetchMeta();
-		const me = profile.fields
-			? profile.fields
-				.filter(filed => filed.value != null && filed.value.match(/^https?:/))
-				.map(field => field.value)
-			: [];
-
-		await ctx.render('user', {
-			user, profile, me,
-			avatarUrl: await Users.getAvatarUrl(user),
-			sub: ctx.params.sub,
-			instanceName: meta.name || 'Misskey',
-			icon: meta.iconUrl,
-			themeColor: meta.themeColor,
-		});
-		ctx.set('Cache-Control', 'public, max-age=15');
-	} else {
-		// リモートユーザーなので
-		// モデレータがAPI経由で参照可能にするために404にはしない
-		await next();
-	}
-});
-
-router.get('/users/:user', async ctx => {
-	const user = await Users.findOneBy({
-		id: ctx.params.user,
-		host: IsNull(),
-		isSuspended: false,
-	});
-
-	if (user == null) {
-		ctx.status = 404;
-		return;
-	}
-
-	ctx.redirect(`/@${user.username}${ user.host == null ? '' : '@' + user.host}`);
-});
-
-// Note
-router.get('/notes/:note', async (ctx, next) => {
-	const note = await Notes.findOneBy({
-		id: ctx.params.note,
-		visibility: In(['public', 'home']),
-	});
-
-	if (note) {
-		const _note = await Notes.pack(note);
-		const profile = await UserProfiles.findOneByOrFail({ userId: note.userId });
-		const meta = await fetchMeta();
-		await ctx.render('note', {
-			note: _note,
-			profile,
-			avatarUrl: await Users.getAvatarUrl(await Users.findOneByOrFail({ id: note.userId })),
-			// TODO: Let locale changeable by instance setting
-			summary: getNoteSummary(_note),
-			instanceName: meta.name || 'Misskey',
-			icon: meta.iconUrl,
-			themeColor: meta.themeColor,
-		});
-
-		ctx.set('Cache-Control', 'public, max-age=15');
-
-		return;
-	}
-
-	await next();
-});
-
-// Page
-router.get('/@:user/pages/:page', async (ctx, next) => {
-	const { username, host } = Acct.parse(ctx.params.user);
-	const user = await Users.findOneBy({
-		usernameLower: username.toLowerCase(),
-		host: host ?? IsNull(),
-	});
-
-	if (user == null) return;
-
-	const page = await Pages.findOneBy({
-		name: ctx.params.page,
-		userId: user.id,
-	});
-
-	if (page) {
-		const _page = await Pages.pack(page);
-		const profile = await UserProfiles.findOneByOrFail({ userId: page.userId });
-		const meta = await fetchMeta();
-		await ctx.render('page', {
-			page: _page,
-			profile,
-			avatarUrl: await Users.getAvatarUrl(await Users.findOneByOrFail({ id: page.userId })),
-			instanceName: meta.name || 'Misskey',
-			icon: meta.iconUrl,
-			themeColor: meta.themeColor,
-		});
-
-		if (['public'].includes(page.visibility)) {
-			ctx.set('Cache-Control', 'public, max-age=15');
-		} else {
-			ctx.set('Cache-Control', 'private, max-age=0, must-revalidate');
-		}
-
-		return;
-	}
-
-	await next();
-});
-
-// Clip
-// TODO: 非publicなclipのハンドリング
-router.get('/clips/:clip', async (ctx, next) => {
-	const clip = await Clips.findOneBy({
-		id: ctx.params.clip,
-	});
-
-	if (clip) {
-		const _clip = await Clips.pack(clip);
-		const profile = await UserProfiles.findOneByOrFail({ userId: clip.userId });
-		const meta = await fetchMeta();
-		await ctx.render('clip', {
-			clip: _clip,
-			profile,
-			avatarUrl: await Users.getAvatarUrl(await Users.findOneByOrFail({ id: clip.userId })),
-			instanceName: meta.name || 'Misskey',
-			icon: meta.iconUrl,
-			themeColor: meta.themeColor,
-		});
-
-		ctx.set('Cache-Control', 'public, max-age=15');
-
-		return;
-	}
-
-	await next();
-});
-
-// Gallery post
-router.get('/gallery/:post', async (ctx, next) => {
-	const post = await GalleryPosts.findOneBy({ id: ctx.params.post });
-
-	if (post) {
-		const _post = await GalleryPosts.pack(post);
-		const profile = await UserProfiles.findOneByOrFail({ userId: post.userId });
-		const meta = await fetchMeta();
-		await ctx.render('gallery-post', {
-			post: _post,
-			profile,
-			avatarUrl: await Users.getAvatarUrl(await Users.findOneByOrFail({ id: post.userId })),
-			instanceName: meta.name || 'Misskey',
-			icon: meta.iconUrl,
-			themeColor: meta.themeColor,
-		});
-
-		ctx.set('Cache-Control', 'public, max-age=15');
-
-		return;
-	}
-
-	await next();
-});
-
-// Channel
-router.get('/channels/:channel', async (ctx, next) => {
-	const channel = await Channels.findOneBy({
-		id: ctx.params.channel,
-	});
-
-	if (channel) {
-		const _channel = await Channels.pack(channel);
-		const meta = await fetchMeta();
-		await ctx.render('channel', {
-			channel: _channel,
-			instanceName: meta.name || 'Misskey',
-			icon: meta.iconUrl,
-			themeColor: meta.themeColor,
-		});
-
-		ctx.set('Cache-Control', 'public, max-age=15');
-
-		return;
-	}
-
-	await next();
-});
-//#endregion
-
-router.get('/_info_card_', async ctx => {
-	const meta = await fetchMeta(true);
-
-	ctx.remove('X-Frame-Options');
-
-	await ctx.render('info-card', {
-		version: config.version,
-		host: config.host,
-		meta: meta,
-		originalUsersCount: await Users.countBy({ host: IsNull() }),
-		originalNotesCount: await Notes.countBy({ userHost: IsNull() }),
-	});
-});
-
-router.get('/bios', async ctx => {
-	await ctx.render('bios', {
-		version: config.version,
-	});
-});
-
-router.get('/cli', async ctx => {
-	await ctx.render('cli', {
-		version: config.version,
-	});
-});
-
-const override = (source: string, target: string, depth = 0) =>
-	[, ...target.split('/').filter(x => x), ...source.split('/').filter(x => x).splice(depth)].join('/');
-
-router.get('/flush', async ctx => {
-	await ctx.render('flush');
-});
-
-// streamingに非WebSocketリクエストが来た場合にbase htmlをキャシュ付きで返すと、Proxy等でそのパスがキャッシュされておかしくなる
-router.get('/streaming', async ctx => {
-	ctx.status = 503;
-	ctx.set('Cache-Control', 'private, max-age=0');
-});
-
-// Render base html for all requests
-router.get('(.*)', async ctx => {
-	const meta = await fetchMeta();
-	await ctx.render('base', {
-		img: meta.bannerUrl,
-		title: meta.name || 'Misskey',
-		instanceName: meta.name || 'Misskey',
-		desc: meta.description,
-		icon: meta.iconUrl,
-		themeColor: meta.themeColor,
-	});
-	ctx.set('Cache-Control', 'public, max-age=15');
-});
-
-// Register router
-app.use(router.routes());
-
-export default app;
diff --git a/packages/backend/src/server/web/manifest.ts b/packages/backend/src/server/web/manifest.ts
deleted file mode 100644
index ee568b8077..0000000000
--- a/packages/backend/src/server/web/manifest.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import Koa from 'koa';
-import { fetchMeta } from '@/misc/fetch-meta.js';
-import manifest from './manifest.json' assert { type: 'json' };
-
-export const manifestHandler = async (ctx: Koa.Context) => {
-	// TODO
-	//const res = structuredClone(manifest);
-	const res = JSON.parse(JSON.stringify(manifest));
-
-	const instance = await fetchMeta(true);
-
-	res.short_name = instance.name || 'Misskey';
-	res.name = instance.name || 'Misskey';
-	if (instance.themeColor) res.theme_color = instance.themeColor;
-
-	ctx.set('Cache-Control', 'max-age=300');
-	ctx.body = res;
-};
diff --git a/packages/backend/src/server/web/url-preview.ts b/packages/backend/src/server/web/url-preview.ts
deleted file mode 100644
index 1e259649f9..0000000000
--- a/packages/backend/src/server/web/url-preview.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import Koa from 'koa';
-import summaly from 'summaly';
-import { fetchMeta } from '@/misc/fetch-meta.js';
-import Logger from '@/services/logger.js';
-import config from '@/config/index.js';
-import { query } from '@/prelude/url.js';
-import { getJson } from '@/misc/fetch.js';
-
-const logger = new Logger('url-preview');
-
-export const urlPreviewHandler = async (ctx: Koa.Context) => {
-	const url = ctx.query.url;
-	if (typeof url !== 'string') {
-		ctx.status = 400;
-		return;
-	}
-
-	const lang = ctx.query.lang;
-	if (Array.isArray(lang)) {
-		ctx.status = 400;
-		return;
-	}
-
-	const meta = await fetchMeta();
-
-	logger.info(meta.summalyProxy
-		? `(Proxy) Getting preview of ${url}@${lang} ...`
-		: `Getting preview of ${url}@${lang} ...`);
-
-	try {
-		const summary = meta.summalyProxy ? await getJson(`${meta.summalyProxy}?${query({
-			url: url,
-			lang: lang ?? 'ja-JP',
-		})}`) : await summaly.default(url, {
-			followRedirects: false,
-			lang: lang ?? 'ja-JP',
-		});
-
-		logger.succ(`Got preview of ${url}: ${summary.title}`);
-
-		summary.icon = wrap(summary.icon);
-		summary.thumbnail = wrap(summary.thumbnail);
-
-		// Cache 7days
-		ctx.set('Cache-Control', 'max-age=604800, immutable');
-
-		ctx.body = summary;
-	} catch (err) {
-		logger.warn(`Failed to get preview of ${url}: ${err}`);
-		ctx.status = 200;
-		ctx.set('Cache-Control', 'max-age=86400, immutable');
-		ctx.body = '{}';
-	}
-};
-
-function wrap(url?: string): string | null {
-	return url != null
-		? url.match(/^https?:\/\//)
-			? `${config.url}/proxy/preview.webp?${query({
-				url,
-				preview: '1',
-			})}`
-			: url
-		: null;
-}
diff --git a/packages/backend/src/server/web/views/base.pug b/packages/backend/src/server/web/views/base.pug
index 5bb156f0f4..b27bbcbce0 100644
--- a/packages/backend/src/server/web/views/base.pug
+++ b/packages/backend/src/server/web/views/base.pug
@@ -1,7 +1,7 @@
 block vars
 
 block loadClientEntry
-	- const clientEntry = getClientEntry();
+	- const clientEntry = config.clientEntry;
 
 doctype html
 
@@ -31,17 +31,19 @@ html
 		link(rel='icon' href= icon || '/favicon.ico')
 		link(rel='apple-touch-icon' href= icon || '/apple-touch-icon.png')
 		link(rel='manifest' href='/manifest.json')
+		link(rel='search' type='application/opensearchdescription+xml' title=(title || "Misskey") href=`${url}/opensearch.xml`)
 		link(rel='prefetch' href='https://xn--931a.moe/assets/info.jpg')
 		link(rel='prefetch' href='https://xn--931a.moe/assets/not-found.jpg')
 		link(rel='prefetch' href='https://xn--931a.moe/assets/error.jpg')
-		link(rel='stylesheet' href='/assets/fontawesome/css/all.css')
-		link(rel='modulepreload' href=`/assets/${clientEntry.file}`)
+		link(rel='stylesheet' href='/assets/tabler-icons/tabler-icons.css')
+		link(rel='modulepreload' href=`/vite/${clientEntry.file}`)
 
-		each href in clientEntry.css
-			link(rel='preload' href=`/assets/${href}` as='style')
+		if !config.clientManifestExists
+				script(type="module" src="/vite/@vite/client")
 
-		each href in clientEntry.css
-			link(rel='preload' href=`/assets/${href}` as='style')
+		if Array.isArray(clientEntry.css)
+			each href in clientEntry.css
+				link(rel='stylesheet' href=`/vite/${href}`)
 
 		title
 			block title
diff --git a/packages/backend/src/server/web/views/flash.pug b/packages/backend/src/server/web/views/flash.pug
new file mode 100644
index 0000000000..5166855ea2
--- /dev/null
+++ b/packages/backend/src/server/web/views/flash.pug
@@ -0,0 +1,31 @@
+extends ./base
+
+block vars
+	- const user = flash.user;
+	- const title = flash.title;
+	- const url = `${config.url}/play/${flash.id}`;
+
+block title
+	= `${title} | ${instanceName}`
+
+block desc
+	meta(name='description' content= flash.summary)
+
+block og
+	meta(property='og:type'        content='article')
+	meta(property='og:title'       content= title)
+	meta(property='og:description' content= flash.summary)
+	meta(property='og:url'         content= url)
+	meta(property='og:image'       content= avatarUrl)
+
+block meta
+	if profile.noCrawle
+		meta(name='robots' content='noindex')
+
+	meta(name='misskey:user-username' content=user.username)
+	meta(name='misskey:user-id' content=user.id)
+	meta(name='misskey:flash-id' content=flash.id)
+
+	// todo
+	if user.twitter
+		meta(name='twitter:creator' content=`@${user.twitter.screenName}`)