filesをプロキシするように

packages/frontend-embed/vite.config.ts

@@ -1,4 +1,6 @@
 import path from 'path';
+import { readFile } from 'fs/promises';
+import * as yaml from 'js-yaml';
 import pluginVue from '@vitejs/plugin-vue';
 import { type UserConfig, defineConfig } from 'vite';
 
@@ -9,6 +11,21 @@ import pluginJson5 from './vite.json5.js';
 
 const extensions = ['.ts', '.tsx', '.js', '.jsx', '.mjs', '.json', '.json5', '.svg', '.sass', '.scss', '.css', '.vue'];
 
+//#region バックエンド/フロントエンド分離開発モード時のデータをプロキシする
+// https://github.com/misskey-dev/misskey/pull/15284
+const { port } = yaml.load(await readFile('../../.config/default.yml', 'utf-8'));
+
+function getProxySettings(): NonNullable<UserConfig['server']>['proxy'] {
+	if (process.env.NODE_ENV === 'development') {
+		return {
+			'/files': `http://localhost:${port}`,
+		};
+	} else {
+		return {};
+	}
+}
+//#endregion
+
 /**
  * Misskeyのフロントエンドにバンドルせず、CDNなどから別途読み込むリソースを記述する。
  * CDNを使わずにバンドルしたい場合、以下の配列から該当要素を削除orコメントアウトすればOK
@@ -69,6 +86,7 @@ export function getConfig(): UserConfig {
 				// クライアント側のWSポートをViteサーバーのポートに強制させることで、正しくHMRが機能するようになる
 				clientPort: 5174,
 			},
+			proxy: getProxySettings(),
 		},
 
 		plugins: [

packages/frontend/vite.config.ts

@@ -1,7 +1,9 @@
 import path from 'path';
+import { readFile } from 'fs/promises';
 import pluginReplace from '@rollup/plugin-replace';
 import pluginVue from '@vitejs/plugin-vue';
 import { type UserConfig, defineConfig } from 'vite';
+import * as yaml from 'js-yaml';
 
 import locales from '../../locales/index.js';
 import meta from '../../package.json';
@@ -11,6 +13,21 @@ import pluginJson5 from './vite.json5.js';
 
 const extensions = ['.ts', '.tsx', '.js', '.jsx', '.mjs', '.json', '.json5', '.svg', '.sass', '.scss', '.css', '.vue'];
 
+//#region バックエンド/フロントエンド分離開発モード時のデータをプロキシする
+// https://github.com/misskey-dev/misskey/pull/15284
+const { port } = yaml.load(await readFile('../../.config/default.yml', 'utf-8'));
+
+function getProxySettings(): NonNullable<UserConfig['server']>['proxy'] {
+	if (process.env.NODE_ENV === 'development') {
+		return {
+			'/files': `http://localhost:${port}`,
+		};
+	} else {
+		return {};
+	}
+}
+//#endregion
+
 /**
  * Misskeyのフロントエンドにバンドルせず、CDNなどから別途読み込むリソースを記述する。
  * CDNを使わずにバンドルしたい場合、以下の配列から該当要素を削除orコメントアウトすればOK
@@ -71,6 +88,7 @@ export function getConfig(): UserConfig {
 				// クライアント側のWSポートをViteサーバーのポートに強制させることで、正しくHMRが機能するようになる
 				clientPort: 5173,
 			},
+			proxy: getProxySettings(),
 			headers: { // なんか効かない
 				'X-Frame-Options': 'DENY',
 			},