split url into webUrl and localUrl (like mastodon)

60 files changed, 169 insertions, 159 deletions

diff --git a/packages/frontend/src/accounts.ts b/packages/frontend/src/accounts.ts
index 862ef4e113..849b90efaa 100644
--- a/packages/frontend/src/accounts.ts
+++ b/packages/frontend/src/accounts.ts
@@ -5,7 +5,7 @@
 
 import { defineAsyncComponent, ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import { apiUrl, host } from '@@/js/config.js';
+import { apiUrl, localHost } from '@@/js/config.js';
 import type { MenuItem } from '@/types/menu.js';
 import { showSuspendedDialog } from '@/utility/show-suspended-dialog.js';
 import { i18n } from '@/i18n.js';
@@ -131,7 +131,7 @@ export function updateCurrentAccount(accountData: Misskey.entities.MeDetailed) {
 	for (const [key, value] of Object.entries(accountData)) {
 		($i[key as keyof typeof accountData] as any) = value;
 	}
-	store.set('accountInfos', { ...store.s.accountInfos, [host + '/' + $i.id]: $i });
+	store.set('accountInfos', { ...store.s.accountInfos, [localHost + '/' + $i.id]: $i });
 	$i.token = token;
 	miLocalStorage.setItem('account', JSON.stringify($i));
 }
@@ -142,7 +142,7 @@ export function updateCurrentAccountPartial(accountData: Partial<Misskey.entitie
 		($i[key as keyof typeof accountData] as any) = value;
 	}
 
-	store.set('accountInfos', { ...store.s.accountInfos, [host + '/' + $i.id]: $i });
+	store.set('accountInfos', { ...store.s.accountInfos, [localHost + '/' + $i.id]: $i });
 
 	miLocalStorage.setItem('account', JSON.stringify($i));
 }
@@ -152,7 +152,7 @@ export async function refreshCurrentAccount() {
 	const me = $i;
 	return fetchAccount($i.token, $i.id).then(updateCurrentAccount).catch(reason => {
 		if (reason === isAccountDeleted) {
-			removeAccount(host, me.id);
+			removeAccount(localHost, me.id);
 			if (Object.keys(store.s.accountTokens).length > 0) {
 				login(Object.values(store.s.accountTokens)[0]);
 			} else {
@@ -181,7 +181,7 @@ export async function login(token: AccountWithToken['token'], redirect?: string)
 		token,
 	}));
 
-	await addAccount(host, me, token);
+	await addAccount(localHost, me, token);
 
 	if (redirect) {
 		// 他のタブは再読み込みするだけ
@@ -296,7 +296,7 @@ export async function getAccountMenu(opts: {
 		});
 
 		if (opts.includeCurrentAccount) {
-			menuItems.push(createItem(host, $i.id, $i.username, $i, $i.token));
+			menuItems.push(createItem(localHost, $i.id, $i.username, $i, $i.token));
 		}
 
 		menuItems.push(...accountItems);
@@ -319,7 +319,7 @@ export async function getAccountMenu(opts: {
 				action: () => {
 					getAccountWithSignupDialog().then(res => {
 						if (res != null) {
-							switchAccount(host, res.id);
+							switchAccount(localHost, res.id);
 						}
 					});
 				},
@@ -332,7 +332,7 @@ export async function getAccountMenu(opts: {
 		});
 	} else {
 		if (opts.includeCurrentAccount) {
-			menuItems.push(createItem(host, $i.id, $i.username, $i, $i.token));
+			menuItems.push(createItem(localHost, $i.id, $i.username, $i, $i.token));
 		}
 
 		menuItems.push(...accountItems);
@@ -346,7 +346,7 @@ export function getAccountWithSigninDialog(): Promise<{ id: string, token: strin
 		const { dispose } = popup(defineAsyncComponent(() => import('@/components/MkSigninDialog.vue')), {}, {
 			done: async (res: Misskey.entities.SigninFlowResponse & { finished: true }) => {
 				const user = await fetchAccount(res.i, res.id, true);
-				await addAccount(host, user, res.i);
+				await addAccount(localHost, user, res.i);
 				resolve({ id: res.id, token: res.i });
 			},
 			cancelled: () => {
@@ -365,7 +365,7 @@ export function getAccountWithSignupDialog(): Promise<{ id: string, token: strin
 			done: async (res: Misskey.entities.SignupResponse) => {
 				const user = JSON.parse(JSON.stringify(res));
 				delete user.token;
-				await addAccount(host, user, res.token);
+				await addAccount(localHost, user, res.token);
 				resolve({ id: res.id, token: res.token });
 			},
 			cancelled: () => {
diff --git a/packages/frontend/src/aiscript/api.ts b/packages/frontend/src/aiscript/api.ts
index 3a476787fe..4cc7c88963 100644
--- a/packages/frontend/src/aiscript/api.ts
+++ b/packages/frontend/src/aiscript/api.ts
@@ -5,7 +5,7 @@
 
 import { errors, utils, values } from '@syuilo/aiscript';
 import * as Misskey from 'misskey-js';
-import { url, lang } from '@@/js/config.js';
+import { webUrl, lang } from '@@/js/config.js';
 import { assertStringAndIsIn } from './common.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
@@ -39,7 +39,7 @@ export function createAiScriptEnv(opts: { storageKey: string, token?: string })
 		USER_USERNAME: $i ? values.STR($i.username) : values.NULL,
 		CUSTOM_EMOJIS: utils.jsToVal(customEmojis.value),
 		LOCALE: values.STR(lang),
-		SERVER_URL: values.STR(url),
+		SERVER_URL: values.STR(webUrl),
 		'Mk:dialog': values.FN_NATIVE(async ([_title, _text, _type]) => {
 			let title: string | undefined = undefined;
 			let text: string | undefined = undefined;
diff --git a/packages/frontend/src/components/MkAccountMoved.vue b/packages/frontend/src/components/MkAccountMoved.vue
index cb8032c019..e101c04793 100644
--- a/packages/frontend/src/components/MkAccountMoved.vue
+++ b/packages/frontend/src/components/MkAccountMoved.vue
@@ -16,7 +16,7 @@ import { ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import MkMention from './MkMention.vue';
 import { i18n } from '@/i18n.js';
-import { host as localHost } from '@@/js/config.js';
+import { localHost } from '@@/js/config.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 
 const user = ref<Misskey.entities.UserLite>();
diff --git a/packages/frontend/src/components/MkDonation.vue b/packages/frontend/src/components/MkDonation.vue
index 0e0da64750..b7ee704b47 100644
--- a/packages/frontend/src/components/MkDonation.vue
+++ b/packages/frontend/src/components/MkDonation.vue
@@ -19,13 +19,23 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div :class="$style.text">
 			<I18n :src="i18n.ts.pleaseDonate" tag="span">
 				<template #host>
-					{{ instance.name ?? host }}
+					{{ instance.name ?? webHost }}
 				</template>
 			</I18n>
 			<div style="margin-top: 0.2em;">
 				<MkLink target="_blank" url="https://misskey-hub.net/docs/for-users/resources/donate/">{{ i18n.ts.learnMore }}</MkLink>
 			</div>
 		</div>
+		<div v-if="instance.donationUrl" :class="$style.text">
+			<I18n :src="i18n.ts.pleaseDonateInstance" tag="span">
+				<template #host>
+					{{ instance.name ?? webHost }}
+				</template>
+			</I18n>
+			<div style="margin-top: 0.2em;">
+				<MkLink target="_blank" :url="instance.donationUrl">{{ i18n.ts.learnMore }}</MkLink>
+			</div>
+		</div>
 		<div class="_buttons">
 			<MkButton @click="close">{{ i18n.ts.remindMeLater }}</MkButton>
 			<MkButton @click="neverShow">{{ i18n.ts.neverShow }}</MkButton>
@@ -38,7 +48,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import MkButton from '@/components/MkButton.vue';
 import MkLink from '@/components/MkLink.vue';
-import { host } from '@@/js/config.js';
+import { webHost } from '@@/js/config.js';
 import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
 import { miLocalStorage } from '@/local-storage.js';
diff --git a/packages/frontend/src/components/MkEmbedCodeGenDialog.vue b/packages/frontend/src/components/MkEmbedCodeGenDialog.vue
index 9002669378..1f9ccfbbbe 100644
--- a/packages/frontend/src/components/MkEmbedCodeGenDialog.vue
+++ b/packages/frontend/src/components/MkEmbedCodeGenDialog.vue
@@ -86,7 +86,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script setup lang="ts">
 import { useTemplateRef, ref, computed, nextTick, onMounted, onDeactivated, onUnmounted } from 'vue';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import { embedRouteWithScrollbar } from '@@/js/embed-page.js';
 import type { EmbeddableEntity, EmbedParams } from '@@/js/embed-page.js';
 import MkModalWindow from '@/components/MkModalWindow.vue';
@@ -149,7 +149,7 @@ const embedPreviewUrl = computed(() => {
 		const maxHeight = parseInt(paramClass.get('maxHeight')!);
 		paramClass.set('maxHeight', maxHeight === 0 ? '500' : Math.min(maxHeight, 700).toString()); // プレビューであまりにも縮小されると見づらいため、700pxまでに制限
 	}
-	return `${url}/embed/${props.entity}/${props.id}${paramClass.toString() ? '?' + paramClass.toString() : ''}`;
+	return `${webUrl}/embed/${props.entity}/${props.id}${paramClass.toString() ? '?' + paramClass.toString() : ''}`;
 });
 
 const isEmbedWithScrollbar = computed(() => embedRouteWithScrollbar.includes(props.entity));
diff --git a/packages/frontend/src/components/MkFollowButton.vue b/packages/frontend/src/components/MkFollowButton.vue
index 72a24411c1..f13baa88db 100644
--- a/packages/frontend/src/components/MkFollowButton.vue
+++ b/packages/frontend/src/components/MkFollowButton.vue
@@ -37,7 +37,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { onBeforeUnmount, onMounted, ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import { host } from '@@/js/config.js';
+import { localHost } from '@@/js/config.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { useStream } from '@/stream.js';
@@ -84,7 +84,7 @@ async function onClick() {
 	const isLoggedIn = await pleaseLogin({
 		openOnRemote: {
 			type: 'web',
-			path: `/@${props.user.username}@${props.user.host ?? host}`,
+			path: `/@${props.user.username}@${props.user.host ?? localHost}`,
 		},
 	});
 	if (!isLoggedIn) return;
diff --git a/packages/frontend/src/components/MkLink.vue b/packages/frontend/src/components/MkLink.vue
index 163f172f57..fc685f5486 100644
--- a/packages/frontend/src/components/MkLink.vue
+++ b/packages/frontend/src/components/MkLink.vue
@@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { defineAsyncComponent, ref } from 'vue';
-import { url as local } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import { maybeMakeRelative } from '@@/js/url.js';
 import type { MkABehavior } from '@/components/global/MkA.vue';
 import { useTooltip } from '@/composables/use-tooltip.js';
@@ -30,7 +30,7 @@ const props = withDefaults(defineProps<{
 }>(), {
 });
 
-const maybeRelativeUrl = maybeMakeRelative(props.url, local);
+const maybeRelativeUrl = maybeMakeRelative(props.url, webUrl);
 const self = maybeRelativeUrl !== props.url;
 const attr = self ? 'to' : 'href';
 const target = self ? null : '_blank';
diff --git a/packages/frontend/src/components/MkMention.vue b/packages/frontend/src/components/MkMention.vue
index f2cf33eb65..3aa7b96772 100644
--- a/packages/frontend/src/components/MkMention.vue
+++ b/packages/frontend/src/components/MkMention.vue
@@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { toUnicode } from 'punycode.js';
 import { computed } from 'vue';
-import { host as localHost } from '@@/js/config.js';
+import { localHost } from '@@/js/config.js';
 import type { MkABehavior } from '@/components/global/MkA.vue';
 import { $i } from '@/i.js';
 import { getStaticImageUrl } from '@/utility/media-proxy.js';
diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index c78cc44425..ffca11120e 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -201,7 +201,7 @@ import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
 import { isLink } from '@@/js/is-link.js';
 import { shouldCollapsed } from '@@/js/collapsed.js';
-import { host } from '@@/js/config.js';
+import { webHost } from '@@/js/config.js';
 import type { Ref } from 'vue';
 import type { MenuItem } from '@/types/menu.js';
 import type { OpenOnRemoteOptions } from '@/utility/please-login.js';
@@ -324,7 +324,7 @@ const renoteCollapsed = ref(
 
 const pleaseLoginContext = computed<OpenOnRemoteOptions>(() => ({
 	type: 'lookup',
-	url: `https://${host}/notes/${appearNote.id}`,
+	url: `https://${webHost}/notes/${appearNote.id}`,
 }));
 
 /* eslint-disable no-redeclare */
diff --git a/packages/frontend/src/components/MkNoteDetailed.vue b/packages/frontend/src/components/MkNoteDetailed.vue
index 083e3e5da0..2b56a8635d 100644
--- a/packages/frontend/src/components/MkNoteDetailed.vue
+++ b/packages/frontend/src/components/MkNoteDetailed.vue
@@ -235,7 +235,7 @@ import { computed, inject, markRaw, provide, ref, useTemplateRef } from 'vue';
 import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
 import { isLink } from '@@/js/is-link.js';
-import { host } from '@@/js/config.js';
+import { webHost } from '@@/js/config.js';
 import type { OpenOnRemoteOptions } from '@/utility/please-login.js';
 import type { Keymap } from '@/utility/hotkey.js';
 import MkNoteSub from '@/components/MkNoteSub.vue';
@@ -344,7 +344,7 @@ useGlobalEvent('noteDeleted', (noteId) => {
 
 const pleaseLoginContext = computed<OpenOnRemoteOptions>(() => ({
 	type: 'lookup',
-	url: `https://${host}/notes/${appearNote.id}`,
+	url: `https://${webHost}/notes/${appearNote.id}`,
 }));
 
 const keymap = {
diff --git a/packages/frontend/src/components/MkPageWindow.vue b/packages/frontend/src/components/MkPageWindow.vue
index d21e09a984..4ced057e0a 100644
--- a/packages/frontend/src/components/MkPageWindow.vue
+++ b/packages/frontend/src/components/MkPageWindow.vue
@@ -31,7 +31,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, onMounted, onUnmounted, provide, ref, useTemplateRef } from 'vue';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import type { PageMetadata } from '@/page.js';
 import RouterView from '@/components/global/RouterView.vue';
 import MkWindow from '@/components/MkWindow.vue';
@@ -133,14 +133,14 @@ const contextmenu = computed(() => ([{
 	icon: 'ti ti-external-link',
 	text: i18n.ts.openInNewTab,
 	action: () => {
-		window.open(url + windowRouter.getCurrentFullPath(), '_blank', 'noopener');
+		window.open(webUrl + windowRouter.getCurrentFullPath(), '_blank', 'noopener');
 		windowEl.value?.close();
 	},
 }, {
 	icon: 'ti ti-link',
 	text: i18n.ts.copyLink,
 	action: () => {
-		copyToClipboard(url + windowRouter.getCurrentFullPath());
+		copyToClipboard(webUrl + windowRouter.getCurrentFullPath());
 	},
 }]));
 
diff --git a/packages/frontend/src/components/MkPoll.vue b/packages/frontend/src/components/MkPoll.vue
index 31567d2b84..373142823d 100644
--- a/packages/frontend/src/components/MkPoll.vue
+++ b/packages/frontend/src/components/MkPoll.vue
@@ -29,7 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue';
 import * as Misskey from 'misskey-js';
-import { host } from '@@/js/config.js';
+import { webHost } from '@@/js/config.js';
 import type { OpenOnRemoteOptions } from '@/utility/please-login.js';
 import { sum } from '@/utility/array.js';
 import { pleaseLogin } from '@/utility/please-login.js';
@@ -84,7 +84,7 @@ if (!closed.value) {
 
 const pleaseLoginContext = computed<OpenOnRemoteOptions>(() => ({
 	type: 'lookup',
-	url: `https://${host}/notes/${props.noteId}`,
+	url: `https://${webHost}/notes/${props.noteId}`,
 }));
 
 const vote = async (id: number) => {
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index d709286041..b0e665acf2 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -119,7 +119,7 @@ import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
 import insertTextAtCursor from 'insert-text-at-cursor';
 import { toASCII } from 'punycode.js';
-import { host, url } from '@@/js/config.js';
+import { localHost, webUrl } from '@@/js/config.js';
 import MkUploaderItems from './MkUploaderItems.vue';
 import type { ShallowRef } from 'vue';
 import type { PostFormProps } from '@/types/post-form.js';
@@ -355,7 +355,7 @@ if (props.mention) {
 	text.value += ' ';
 }
 
-if (replyTargetNote.value && (replyTargetNote.value.user.username !== $i.username || (replyTargetNote.value.user.host != null && replyTargetNote.value.user.host !== host))) {
+if (replyTargetNote.value && (replyTargetNote.value.user.username !== $i.username || (replyTargetNote.value.user.host != null && replyTargetNote.value.user.host !== localHost))) {
 	text.value = `@${replyTargetNote.value.user.username}${replyTargetNote.value.user.host != null ? '@' + toASCII(replyTargetNote.value.user.host) : ''} `;
 }
 
@@ -371,7 +371,7 @@ if (replyTargetNote.value && replyTargetNote.value.text != null) {
 				`@${x.username}@${toASCII(otherHost)}`;
 
 		// 自分は除外
-		if ($i.username === x.username && (x.host == null || x.host === host)) continue;
+		if ($i.username === x.username && (x.host == null || x.host === localHost)) continue;
 
 		// 重複は除外
 		if (text.value.includes(`${mention} `)) continue;
@@ -769,7 +769,7 @@ async function onPaste(ev: ClipboardEvent) {
 
 	const paste = ev.clipboardData.getData('text');
 
-	if (!renoteTargetNote.value && !quoteId.value && paste.startsWith(url + '/notes/')) {
+	if (!renoteTargetNote.value && !quoteId.value && paste.startsWith(webUrl + '/notes/')) {
 		ev.preventDefault();
 
 		const { canceled } = await os.confirm({
@@ -1119,7 +1119,7 @@ async function post(ev?: PointerEvent) {
 				'https://open.spotify.com/track/7anfcaNPQWlWCwyCHmZqNy',
 				'https://open.spotify.com/track/5Odr16TvEN4my22K9nbH7l',
 				'https://open.spotify.com/album/5bOlxyl4igOrp2DwVQxBco',
-			].some(url => text.includes(url))) {
+			].some(webUrl => text.includes(webUrl))) {
 				claimAchievement('brainDiver');
 			}
 
diff --git a/packages/frontend/src/components/MkPreview.vue b/packages/frontend/src/components/MkPreview.vue
index c589cd9685..dd3c1bbf48 100644
--- a/packages/frontend/src/components/MkPreview.vue
+++ b/packages/frontend/src/components/MkPreview.vue
@@ -41,7 +41,7 @@ import { chooseDriveFile } from '@/utility/drive.js';
 
 const text = ref('');
 const flag = ref(true);
-const mfm = ref(`Hello world! This is an @example mention. BTW you are @${$i ? $i.username : 'guest'}.\nAlso, here is ${config.url} and [example link](${config.url}). for more details, see https://example.com.\nAs you know #misskey is open-source software.`);
+const mfm = ref(`Hello world! This is an @example mention. BTW you are @${$i ? $i.username : 'guest'}.\nAlso, here is ${config.webUrl} and [example link](${config.webUrl}). for more details, see https://example.com.\nAs you know #misskey is open-source software.`);
 
 const openDialog = async () => {
 	await os.alert({
diff --git a/packages/frontend/src/components/MkSignin.input.vue b/packages/frontend/src/components/MkSignin.input.vue
index 89ec6373cf..b3343ea805 100644
--- a/packages/frontend/src/components/MkSignin.input.vue
+++ b/packages/frontend/src/components/MkSignin.input.vue
@@ -57,7 +57,7 @@ import { ref } from 'vue';
 import { toUnicode } from 'punycode.js';
 
 import { query, extractDomain } from '@@/js/url.js';
-import { host as configHost } from '@@/js/config.js';
+import { localHost as configHost } from '@@/js/config.js';
 import type { OpenOnRemoteOptions } from '@/utility/please-login.js';
 import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
diff --git a/packages/frontend/src/components/MkSignupDialog.form.vue b/packages/frontend/src/components/MkSignupDialog.form.vue
index 68ba09980a..874f38e0ed 100644
--- a/packages/frontend/src/components/MkSignupDialog.form.vue
+++ b/packages/frontend/src/components/MkSignupDialog.form.vue
@@ -104,7 +104,7 @@ const emit = defineEmits<{
 	(ev: 'signupEmailPending'): void;
 }>();
 
-const host = toUnicode(config.host);
+const host = toUnicode(config.webHost);
 
 const hcaptcha = ref<Captcha | undefined>();
 const mcaptcha = ref<Captcha | undefined>();
diff --git a/packages/frontend/src/components/MkSourceCodeAvailablePopup.vue b/packages/frontend/src/components/MkSourceCodeAvailablePopup.vue
index 4c197ed43e..f4b80050bf 100644
--- a/packages/frontend/src/components/MkSourceCodeAvailablePopup.vue
+++ b/packages/frontend/src/components/MkSourceCodeAvailablePopup.vue
@@ -15,14 +15,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div :class="$style.title">
 			<I18n :src="i18n.ts.aboutX" tag="span">
 				<template #x>
-					{{ instance.name ?? host }}
+					{{ instance.name ?? webHost }}
 				</template>
 			</I18n>
 		</div>
 		<div :class="$style.text">
 			<I18n :src="i18n.ts._aboutMisskey.thisIsModifiedVersion" tag="span">
 				<template #name>
-					{{ instance.name ?? host }}
+					{{ instance.name ?? webHost }}
 				</template>
 			</I18n>
 			<I18n :src="i18n.ts.correspondingSourceIsAvailable" tag="span">
@@ -41,7 +41,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import MkButton from '@/components/MkButton.vue';
-import { host } from '@@/js/config.js';
+import { webHost } from '@@/js/config.js';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
 import { miLocalStorage } from '@/local-storage.js';
diff --git a/packages/frontend/src/components/MkTutorialDialog.vue b/packages/frontend/src/components/MkTutorialDialog.vue
index d6abbf6504..99aa04091c 100644
--- a/packages/frontend/src/components/MkTutorialDialog.vue
+++ b/packages/frontend/src/components/MkTutorialDialog.vue
@@ -133,7 +133,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 									<a href="https://misskey-hub.net/docs/for-users/" target="_blank" class="_link">{{ i18n.ts.help }}</a>
 								</template>
 							</I18n>
-							<div>{{ i18n.tsx._initialAccountSetting.haveFun({ name: instance.name ?? host }) }}</div>
+							<div>{{ i18n.tsx._initialAccountSetting.haveFun({ name: instance.name ?? webHost }) }}</div>
 							<div class="_buttonsCenter" style="margin-top: 16px;">
 								<MkButton v-if="initialPage !== 4" rounded @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
 								<MkButton rounded primary gradate @click="close(false)">{{ i18n.ts.close }}</MkButton>
@@ -149,7 +149,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref, useTemplateRef, watch } from 'vue';
-import { host } from '@@/js/config.js';
+import { webHost } from '@@/js/config.js';
 import MkModalWindow from '@/components/MkModalWindow.vue';
 import MkButton from '@/components/MkButton.vue';
 import XNote from '@/components/MkTutorialDialog.Note.vue';
diff --git a/packages/frontend/src/components/MkUrlPreview.vue b/packages/frontend/src/components/MkUrlPreview.vue
index 7c0c06398b..0be7bc2798 100644
--- a/packages/frontend/src/components/MkUrlPreview.vue
+++ b/packages/frontend/src/components/MkUrlPreview.vue
@@ -84,7 +84,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { defineAsyncComponent, onDeactivated, onUnmounted, ref } from 'vue';
-import { url as local } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import { versatileLang } from '@@/js/intl-const.js';
 import type { summaly } from '@misskey-dev/summaly';
 import { i18n } from '@/i18n.js';
@@ -112,7 +112,7 @@ const props = withDefaults(defineProps<{
 const MOBILE_THRESHOLD = 500;
 const isMobile = ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD);
 
-const maybeRelativeUrl = maybeMakeRelative(props.url, local);
+const maybeRelativeUrl = maybeMakeRelative(props.url, webUrl);
 const self = maybeRelativeUrl !== props.url;
 const attr = self ? 'to' : 'href';
 const target = self ? null : '_blank';
diff --git a/packages/frontend/src/components/MkUserSelectDialog.vue b/packages/frontend/src/components/MkUserSelectDialog.vue
index 057af49a36..319fd5a5c0 100644
--- a/packages/frontend/src/components/MkUserSelectDialog.vue
+++ b/packages/frontend/src/components/MkUserSelectDialog.vue
@@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<template #label>{{ i18n.ts.username }}</template>
 					<template #prefix>@</template>
 				</MkInput>
-				<MkInput v-model="host" :datalist="[hostname]" @update:modelValue="search">
+				<MkInput v-model="host" :datalist="[localHostname]" @update:modelValue="search">
 					<template #label>{{ i18n.ts.host }}</template>
 					<template #prefix>@</template>
 				</MkInput>
@@ -63,7 +63,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { onMounted, ref, computed, useTemplateRef } from 'vue';
 import * as Misskey from 'misskey-js';
-import { host as currentHost, hostname } from '@@/js/config.js';
+import { localHostname } from '@@/js/config.js';
 import MkInput from '@/components/MkInput.vue';
 import FormSplit from '@/components/form/split.vue';
 import MkModalWindow from '@/components/MkModalWindow.vue';
diff --git a/packages/frontend/src/components/MkUserSetupDialog.vue b/packages/frontend/src/components/MkUserSetupDialog.vue
index b4ef35c221..6fa31b4340 100644
--- a/packages/frontend/src/components/MkUserSetupDialog.vue
+++ b/packages/frontend/src/components/MkUserSetupDialog.vue
@@ -93,7 +93,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<div class="_gaps" style="text-align: center;">
 							<i class="ti ti-bell-ringing-2" style="display: block; margin: auto; font-size: 3em; color: var(--MI_THEME-accent);"></i>
 							<div style="font-size: 120%;">{{ i18n.ts.pushNotification }}</div>
-							<div style="padding: 0 16px;">{{ i18n.tsx._initialAccountSetting.pushNotificationDescription({ name: instance.name ?? host }) }}</div>
+							<div style="padding: 0 16px;">{{ i18n.tsx._initialAccountSetting.pushNotificationDescription({ name: instance.name ?? webHost }) }}</div>
 							<MkPushNotificationAllowButton primary showOnlyToRegister style="margin: 0 auto;"/>
 							<div class="_buttonsCenter" style="margin-top: 16px;">
 								<MkButton rounded data-cy-user-setup-back @click="page--"><i class="ti ti-arrow-left"></i> {{ i18n.ts.goBack }}</MkButton>
@@ -110,7 +110,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<div class="_gaps" style="text-align: center;">
 							<i class="ti ti-check" style="display: block; margin: auto; font-size: 3em; color: var(--MI_THEME-accent);"></i>
 							<div style="font-size: 120%;">{{ i18n.ts._initialAccountSetting.initialAccountSettingCompleted }}</div>
-							<div>{{ i18n.tsx._initialAccountSetting.youCanContinueTutorial({ name: instance.name ?? host }) }}</div>
+							<div>{{ i18n.tsx._initialAccountSetting.youCanContinueTutorial({ name: instance.name ?? webHost }) }}</div>
 							<div class="_buttonsCenter" style="margin-top: 16px;">
 								<MkButton rounded primary gradate data-cy-user-setup-continue @click="launchTutorial()">{{ i18n.ts._initialAccountSetting.startTutorial }} <i class="ti ti-arrow-right"></i></MkButton>
 							</div>
@@ -129,7 +129,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref, useTemplateRef, watch, nextTick, defineAsyncComponent } from 'vue';
-import { host } from '@@/js/config.js';
+import { webHost } from '@@/js/config.js';
 import MkModalWindow from '@/components/MkModalWindow.vue';
 import MkButton from '@/components/MkButton.vue';
 import XProfile from '@/components/MkUserSetupDialog.Profile.vue';
diff --git a/packages/frontend/src/components/global/MkA.vue b/packages/frontend/src/components/global/MkA.vue
index 7d2908d4be..92396ee8f5 100644
--- a/packages/frontend/src/components/global/MkA.vue
+++ b/packages/frontend/src/components/global/MkA.vue
@@ -15,7 +15,7 @@ export type MkABehavior = 'window' | 'browser' | null;
 
 <script lang="ts" setup>
 import { computed, inject, useTemplateRef } from 'vue';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import * as os from '@/os.js';
 import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
 import { i18n } from '@/i18n.js';
@@ -76,7 +76,7 @@ function onContextmenu(ev: PointerEvent) {
 		icon: 'ti ti-link',
 		text: i18n.ts.copyLink,
 		action: () => {
-			copyToClipboard(`${url}${props.to}`);
+			copyToClipboard(`${webUrl}${props.to}`);
 		},
 	}], ev);
 }
diff --git a/packages/frontend/src/components/global/MkAcct.vue b/packages/frontend/src/components/global/MkAcct.vue
index ff794d9b6e..2a8bd0ccc8 100644
--- a/packages/frontend/src/components/global/MkAcct.vue
+++ b/packages/frontend/src/components/global/MkAcct.vue
@@ -13,12 +13,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import * as Misskey from 'misskey-js';
 import { toUnicode } from 'punycode.js';
-import { host as hostRaw } from '@@/js/config.js';
+import { localHost } from '@@/js/config.js';
 
 defineProps<{
 	user: Misskey.entities.UserLite;
 	detail?: boolean;
 }>();
 
-const host = toUnicode(hostRaw);
+const host = toUnicode(localHost);
 </script>
diff --git a/packages/frontend/src/components/global/MkAd.vue b/packages/frontend/src/components/global/MkAd.vue
index c592079f03..14a1c71e10 100644
--- a/packages/frontend/src/components/global/MkAd.vue
+++ b/packages/frontend/src/components/global/MkAd.vue
@@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</component>
 	</div>
 	<div v-else :class="$style.menu">
-		<div>Ads by {{ host }}</div>
+		<div>Ads by {{ webHost }}</div>
 		<!--<MkButton class="button" primary>{{ i18n.ts._ad.like }}</MkButton>-->
 		<MkButton v-if="chosen.ratio !== 0" :class="$style.menuButton" @click="reduceFrequency">{{ i18n.ts._ad.reduceFrequencyOfThisAd }}</MkButton>
 		<button class="_textButton" @click="toggleMenu">{{ i18n.ts._ad.back }}</button>
@@ -40,7 +40,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref, computed } from 'vue';
-import { url as local, host } from '@@/js/config.js';
+import { webUrl as local, webHost } from '@@/js/config.js';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
 import MkButton from '@/components/MkButton.vue';
diff --git a/packages/frontend/src/components/global/MkMfm.ts b/packages/frontend/src/components/global/MkMfm.ts
index 706ea07417..2423703e12 100644
--- a/packages/frontend/src/components/global/MkMfm.ts
+++ b/packages/frontend/src/components/global/MkMfm.ts
@@ -6,7 +6,7 @@
 import { h } from 'vue';
 import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
-import { host } from '@@/js/config.js';
+import { localHost } from '@@/js/config.js';
 import type { VNode, SetupContext } from 'vue';
 import type { MkABehavior } from '@/components/global/MkA.vue';
 import MkUrl from '@/components/global/MkUrl.vue';
@@ -369,7 +369,7 @@ export default function (props: MfmProps, { emit }: { emit: SetupContext<MfmEven
 			case 'mention': {
 				return [h(MkMention, {
 					key: Math.random(),
-					host: (token.props.host == null && props.author && props.author.host != null ? props.author.host : token.props.host) ?? host,
+					host: (token.props.host == null && props.author && props.author.host != null ? props.author.host : token.props.host) ?? localHost,
 					username: token.props.username,
 					navigationBehavior: props.linkNavigationBehavior,
 				})];
diff --git a/packages/frontend/src/components/global/MkUrl.vue b/packages/frontend/src/components/global/MkUrl.vue
index 159af6f11e..b4c968cedf 100644
--- a/packages/frontend/src/components/global/MkUrl.vue
+++ b/packages/frontend/src/components/global/MkUrl.vue
@@ -27,7 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { defineAsyncComponent, ref } from 'vue';
 import { toUnicode as decodePunycode } from 'punycode.js';
-import { url as local } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import { maybeMakeRelative } from '@@/js/url.js';
 import type { MkABehavior } from '@/components/global/MkA.vue';
 import * as os from '@/os.js';
@@ -51,7 +51,7 @@ const props = withDefaults(defineProps<{
 	showUrlPreview: true,
 });
 
-const maybeRelativeUrl = maybeMakeRelative(props.url, local);
+const maybeRelativeUrl = maybeMakeRelative(props.url, webUrl);
 const self = maybeRelativeUrl !== props.url;
 const url = new URL(props.url);
 if (!['http:', 'https:'].includes(url.protocol)) throw new Error('invalid url');
diff --git a/packages/frontend/src/filters/user.ts b/packages/frontend/src/filters/user.ts
index d9bc316764..a69a27deb6 100644
--- a/packages/frontend/src/filters/user.ts
+++ b/packages/frontend/src/filters/user.ts
@@ -4,7 +4,7 @@
  */
 
 import * as Misskey from 'misskey-js';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 
 export const acct = (user: Misskey.Acct) => {
 	return Misskey.acct.toString(user);
@@ -15,5 +15,5 @@ export const userName = (user: Misskey.entities.User) => {
 };
 
 export const userPage = (user: Misskey.Acct, path?: string, absolute = false) => {
-	return `${absolute ? url : ''}/@${acct(user)}${(path ? `/${path}` : '')}`;
+	return `${absolute ? webUrl : ''}/@${acct(user)}${(path ? `/${path}` : '')}`;
 };
diff --git a/packages/frontend/src/pages/about-misskey.vue b/packages/frontend/src/pages/about-misskey.vue
index 08a4e80494..79281fad0d 100644
--- a/packages/frontend/src/pages/about-misskey.vue
+++ b/packages/frontend/src/pages/about-misskey.vue
@@ -48,7 +48,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<FormSection v-if="instance.repositoryUrl !== 'https://github.com/misskey-dev/misskey'">
 					<div class="_gaps_s">
 						<MkInfo>
-							{{ i18n.tsx._aboutMisskey.thisIsModifiedVersion({ name: instance.name ?? host }) }}
+							{{ i18n.tsx._aboutMisskey.thisIsModifiedVersion({ name: instance.name ?? webHost }) }}
 						</MkInfo>
 						<FormLink v-if="instance.repositoryUrl" :to="instance.repositoryUrl" external>
 							<template #icon><i class="ti ti-code"></i></template>
@@ -137,7 +137,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { nextTick, onBeforeUnmount, ref, useTemplateRef, computed } from 'vue';
-import { host, version } from '@@/js/config.js';
+import { webHost, version } from '@@/js/config.js';
 import FormLink from '@/components/form/link.vue';
 import FormSection from '@/components/form/section.vue';
 import MkButton from '@/components/MkButton.vue';
diff --git a/packages/frontend/src/pages/about.overview.vue b/packages/frontend/src/pages/about.overview.vue
index 32296de3a4..9d4a2c3480 100644
--- a/packages/frontend/src/pages/about.overview.vue
+++ b/packages/frontend/src/pages/about.overview.vue
@@ -9,7 +9,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div style="overflow: clip;">
 			<img :src="instance.iconUrl ?? '/favicon.ico'" alt="" :class="$style.bannerIcon"/>
 			<div :class="$style.bannerName">
-				<b>{{ instance.name ?? host }}</b>
+				<b>{{ instance.name ?? webHost }}</b>
 			</div>
 		</div>
 	</div>
@@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<template #key>Misskey</template>
 				<template #value>{{ version }}</template>
 			</MkKeyValue>
-			<div v-html="i18n.tsx.poweredByMisskeyDescription({ name: instance.name ?? host })">
+			<div v-html="i18n.tsx.poweredByMisskeyDescription({ name: instance.name ?? webHost })">
 			</div>
 			<FormLink to="/about-misskey">
 				<template #icon><i class="ti ti-info-circle"></i></template>
@@ -126,7 +126,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { host, version } from '@@/js/config.js';
+import { webHost, version } from '@@/js/config.js';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
 import number from '@/filters/number.js';
diff --git a/packages/frontend/src/pages/admin-user.vue b/packages/frontend/src/pages/admin-user.vue
index b084eb5ab2..3c605a70dd 100644
--- a/packages/frontend/src/pages/admin-user.vue
+++ b/packages/frontend/src/pages/admin-user.vue
@@ -208,7 +208,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, defineAsyncComponent, watch, ref, markRaw } from 'vue';
 import * as Misskey from 'misskey-js';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import type { ChartSrc } from '@/components/MkChart.vue';
 import MkChart from '@/components/MkChart.vue';
 import MkObjectView from '@/components/MkObjectView.vue';
@@ -514,7 +514,7 @@ async function editAnnouncement(announcement: Misskey.entities.AdminAnnouncement
 
 watch(user, () => {
 	misskeyApi('ap/get', {
-		uri: user.value.uri ?? `${url}/users/${user.value.id}`,
+		uri: user.value.uri ?? `${webUrl}/users/${user.value.id}`,
 	}).then(res => {
 		ap.value = res;
 	});
diff --git a/packages/frontend/src/pages/admin/branding.vue b/packages/frontend/src/pages/admin/branding.vue
index 016d1b6a89..367702d7ca 100644
--- a/packages/frontend/src/pages/admin/branding.vue
+++ b/packages/frontend/src/pages/admin/branding.vue
@@ -44,7 +44,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<template #prefix><i class="ti ti-link"></i></template>
 						<template #label><SearchLabel>{{ i18n.ts._serverSettings.iconUrl }} (App/192px)</SearchLabel></template>
 						<template #caption>
-							<div>{{ i18n.tsx._serverSettings.appIconDescription({ host: instance.name ?? host }) }}</div>
+							<div>{{ i18n.tsx._serverSettings.appIconDescription({ host: instance.name ?? webHost }) }}</div>
 							<div>({{ i18n.ts._serverSettings.appIconUsageExample }})</div>
 							<div>{{ i18n.ts._serverSettings.appIconStyleRecommendation }}</div>
 							<div><strong>{{ i18n.tsx._serverSettings.appIconResolutionMustBe({ resolution: '192x192px' }) }}</strong></div>
@@ -57,7 +57,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<template #prefix><i class="ti ti-link"></i></template>
 						<template #label><SearchLabel>{{ i18n.ts._serverSettings.iconUrl }} (App/512px)</SearchLabel></template>
 						<template #caption>
-							<div>{{ i18n.tsx._serverSettings.appIconDescription({ host: instance.name ?? host }) }}</div>
+							<div>{{ i18n.tsx._serverSettings.appIconDescription({ host: instance.name ?? webHost }) }}</div>
 							<div>({{ i18n.ts._serverSettings.appIconUsageExample }})</div>
 							<div>{{ i18n.ts._serverSettings.appIconStyleRecommendation }}</div>
 							<div><strong>{{ i18n.tsx._serverSettings.appIconResolutionMustBe({ resolution: '512x512px' }) }}</strong></div>
@@ -156,7 +156,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { ref, computed } from 'vue';
 import JSON5 from 'json5';
 import * as Misskey from 'misskey-js';
-import { host } from '@@/js/config.js';
+import { webHost } from '@@/js/config.js';
 import MkInput from '@/components/MkInput.vue';
 import MkTextarea from '@/components/MkTextarea.vue';
 import * as os from '@/os.js';
diff --git a/packages/frontend/src/pages/channel.vue b/packages/frontend/src/pages/channel.vue
index 0879aa72be..ac11c6e9bc 100644
--- a/packages/frontend/src/pages/channel.vue
+++ b/packages/frontend/src/pages/channel.vue
@@ -73,7 +73,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, watch, ref, markRaw, shallowRef } from 'vue';
 import * as Misskey from 'misskey-js';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import { useInterval } from '@@/js/use-interval.js';
 import type { PageHeaderItem } from '@/types/page-header.js';
 import MkPostForm from '@/components/MkPostForm.vue';
@@ -268,7 +268,7 @@ const headerActions = computed(() => {
 					console.warn('failed to copy channel URL. channel.value is null.');
 					return;
 				}
-				copyToClipboard(`${url}/channels/${channel.value.id}`);
+				copyToClipboard(`${webUrl}/channels/${channel.value.id}`);
 			},
 		});
 
@@ -285,7 +285,7 @@ const headerActions = computed(() => {
 					navigator.share({
 						title: channel.value.name,
 						text: channel.value.description ?? undefined,
-						url: `${url}/channels/${channel.value.id}`,
+						url: `${webUrl}/channels/${channel.value.id}`,
 					});
 				},
 			});
diff --git a/packages/frontend/src/pages/chat/XMessage.vue b/packages/frontend/src/pages/chat/XMessage.vue
index f759e45e48..83e290e92c 100644
--- a/packages/frontend/src/pages/chat/XMessage.vue
+++ b/packages/frontend/src/pages/chat/XMessage.vue
@@ -54,7 +54,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { computed, defineAsyncComponent, provide } from 'vue';
 import * as mfm from 'mfm-js';
 import * as Misskey from 'misskey-js';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import { isLink } from '@@/js/is-link.js';
 import type { MenuItem } from '@/types/menu.js';
 import type { NormalizedChatMessage } from './room.vue';
@@ -182,7 +182,7 @@ function showMenu(ev: PointerEvent, contextmenu = false) {
 			text: i18n.ts.reportAbuse,
 			icon: 'ti ti-exclamation-circle',
 			action: async () => {
-				const localUrl = `${url}/chat/messages/${props.message.id}`;
+				const localUrl = `${webUrl}/chat/messages/${props.message.id}`;
 				const { dispose } = await os.popupAsyncWithDialog(import('@/components/MkAbuseReportWindow.vue').then(x => x.default), {
 					user: props.message.fromUser!,
 					initialComment: `${localUrl}\n-----\n`,
diff --git a/packages/frontend/src/pages/clip.vue b/packages/frontend/src/pages/clip.vue
index 8feddf70b0..4c51ed7f5e 100644
--- a/packages/frontend/src/pages/clip.vue
+++ b/packages/frontend/src/pages/clip.vue
@@ -32,7 +32,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, watch, provide, ref, markRaw } from 'vue';
 import * as Misskey from 'misskey-js';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import type { MenuItem } from '@/types/menu.js';
 import type { PageHeaderItem } from '@/types/page-header.js';
 import MkNotesTimeline from '@/components/MkNotesTimeline.vue';
@@ -152,7 +152,7 @@ const headerActions = computed<PageHeaderItem[] | null>(() => clip.value && isOw
 			icon: 'ti ti-link',
 			text: i18n.ts.copyUrl,
 			action: () => {
-				copyToClipboard(`${url}/clips/${clip.value!.id}`);
+				copyToClipboard(`${webUrl}/clips/${clip.value!.id}`);
 			},
 		}, {
 			icon: 'ti ti-code',
@@ -170,7 +170,7 @@ const headerActions = computed<PageHeaderItem[] | null>(() => clip.value && isOw
 					navigator.share({
 						title: clip.value!.name,
 						text: clip.value!.description ?? '',
-						url: `${url}/clips/${clip.value!.id}`,
+						url: `${webUrl}/clips/${clip.value!.id}`,
 					});
 				},
 			});
diff --git a/packages/frontend/src/pages/flash/flash.vue b/packages/frontend/src/pages/flash/flash.vue
index 449f1af60a..f2f5f7a9b2 100644
--- a/packages/frontend/src/pages/flash/flash.vue
+++ b/packages/frontend/src/pages/flash/flash.vue
@@ -65,7 +65,7 @@ import { computed, onDeactivated, onUnmounted, ref, watch, shallowRef, defineAsy
 import * as Misskey from 'misskey-js';
 import { utils } from '@syuilo/aiscript';
 import { compareVersions } from 'compare-versions';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import type { Ref } from 'vue';
 import type { AsUiComponent, AsUiRoot } from '@/aiscript/ui.js';
 import type { MenuItem } from '@/types/menu.js';
@@ -129,7 +129,7 @@ function share(ev: PointerEvent) {
 function copyLink() {
 	if (!flash.value) return;
 
-	copyToClipboard(`${url}/play/${flash.value.id}`);
+	copyToClipboard(`${webUrl}/play/${flash.value.id}`);
 }
 
 function shareWithNavigator() {
@@ -138,7 +138,7 @@ function shareWithNavigator() {
 	navigator.share({
 		title: flash.value.title,
 		text: flash.value.summary,
-		url: `${url}/play/${flash.value.id}`,
+		url: `${webUrl}/play/${flash.value.id}`,
 	});
 }
 
@@ -146,7 +146,7 @@ function shareWithNote() {
 	if (!flash.value) return;
 
 	os.post({
-		initialText: `${flash.value.title}\n${url}/play/${flash.value.id}`,
+		initialText: `${flash.value.title}\n${webUrl}/play/${flash.value.id}`,
 		instant: true,
 	});
 }
@@ -226,7 +226,7 @@ async function run() {
 			root.value = _root.value;
 		}),
 		THIS_ID: values.STR(flash.value.id),
-		THIS_URL: values.STR(`${url}/play/${flash.value.id}`),
+		THIS_URL: values.STR(`${webUrl}/play/${flash.value.id}`),
 	}, {
 		in: aiScriptReadline,
 		out: () => {
@@ -263,7 +263,7 @@ async function run() {
 async function reportAbuse() {
 	if (!flash.value) return;
 
-	const pageUrl = `${url}/play/${flash.value.id}`;
+	const pageUrl = `${webUrl}/play/${flash.value.id}`;
 
 	const { dispose } = await os.popupAsyncWithDialog(import('@/components/MkAbuseReportWindow.vue').then(x => x.default), {
 		user: flash.value.user,
diff --git a/packages/frontend/src/pages/gallery/post.vue b/packages/frontend/src/pages/gallery/post.vue
index 92cb663ee1..263cb4a338 100644
--- a/packages/frontend/src/pages/gallery/post.vue
+++ b/packages/frontend/src/pages/gallery/post.vue
@@ -64,7 +64,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, watch, ref, defineAsyncComponent, markRaw } from 'vue';
 import * as Misskey from 'misskey-js';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import type { MenuItem } from '@/types/menu.js';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os.js';
@@ -110,7 +110,7 @@ function fetchPost() {
 
 function copyLink() {
 	if (!post.value) return;
-	copyToClipboard(`${url}/gallery/${post.value.id}`);
+	copyToClipboard(`${webUrl}/gallery/${post.value.id}`);
 }
 
 function share() {
@@ -118,14 +118,14 @@ function share() {
 	navigator.share({
 		title: post.value.title,
 		text: post.value.description ?? undefined,
-		url: `${url}/gallery/${post.value.id}`,
+		url: `${webUrl}/gallery/${post.value.id}`,
 	});
 }
 
 function shareWithNote() {
 	if (!post.value) return;
 	os.post({
-		initialText: `${post.value.title} ${url}/gallery/${post.value.id}`,
+		initialText: `${post.value.title} ${webUrl}/gallery/${post.value.id}`,
 	});
 }
 
@@ -165,7 +165,7 @@ function edit() {
 async function reportAbuse() {
 	if (!post.value) return;
 
-	const pageUrl = `${url}/gallery/${post.value.id}`;
+	const pageUrl = `${webUrl}/gallery/${post.value.id}`;
 
 	const { dispose } = await os.popupAsyncWithDialog(import('@/components/MkAbuseReportWindow.vue').then(x => x.default), {
 		user: post.value.user,
diff --git a/packages/frontend/src/pages/note.vue b/packages/frontend/src/pages/note.vue
index 2bbd7b2511..263ac1004e 100644
--- a/packages/frontend/src/pages/note.vue
+++ b/packages/frontend/src/pages/note.vue
@@ -47,7 +47,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, watch, ref, markRaw } from 'vue';
 import * as Misskey from 'misskey-js';
-import { host } from '@@/js/config.js';
+import { webHost } from '@@/js/config.js';
 import MkNoteDetailed from '@/components/MkNoteDetailed.vue';
 import MkNotesTimeline from '@/components/MkNotesTimeline.vue';
 import MkRemoteCaution from '@/components/MkRemoteCaution.vue';
@@ -142,7 +142,7 @@ function fetchNote() {
 				message: err.id === 'fbcc002d-37d9-4944-a6b0-d9e29f2d33ab' ? i18n.ts.thisContentsAreMarkedAsSigninRequiredByAuthor : i18n.ts.signinOrContinueOnRemote,
 				openOnRemote: {
 					type: 'lookup',
-					url: `https://${host}/notes/${props.noteId}`,
+					url: `https://${webHost}/notes/${props.noteId}`,
 				},
 			});
 		}
diff --git a/packages/frontend/src/pages/page-editor/page-editor.vue b/packages/frontend/src/pages/page-editor/page-editor.vue
index 85871c993c..046394a7e8 100644
--- a/packages/frontend/src/pages/page-editor/page-editor.vue
+++ b/packages/frontend/src/pages/page-editor/page-editor.vue
@@ -24,7 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</MkInput>
 
 				<MkInput v-model="name">
-					<template #prefix>{{ url }}/@{{ author?.username ?? '???' }}/pages/</template>
+					<template #prefix>{{ webUrl }}/@{{ author?.username ?? '???' }}/pages/</template>
 					<template #label>{{ i18n.ts._pages.url }}</template>
 				</MkInput>
 
@@ -60,7 +60,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, provide, watch, ref } from 'vue';
 import * as Misskey from 'misskey-js';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import XBlocks from './page-editor.blocks.vue';
 import { genId } from '@/utility/id.js';
 import MkButton from '@/components/MkButton.vue';
diff --git a/packages/frontend/src/pages/page.vue b/packages/frontend/src/pages/page.vue
index 212c8140c8..9364c349b0 100644
--- a/packages/frontend/src/pages/page.vue
+++ b/packages/frontend/src/pages/page.vue
@@ -99,7 +99,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { computed, watch, ref, defineAsyncComponent, markRaw } from 'vue';
 import * as Misskey from 'misskey-js';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import type { MenuItem } from '@/types/menu.js';
 import XPage from '@/components/page/page.vue';
 import MkButton from '@/components/MkButton.vue';
@@ -188,14 +188,14 @@ function share(ev: PointerEvent) {
 function copyLink() {
 	if (!page.value) return;
 
-	copyToClipboard(`${url}/@${page.value.user.username}/pages/${page.value.name}`);
+	copyToClipboard(`${webUrl}/@${page.value.user.username}/pages/${page.value.name}`);
 }
 
 function shareWithNote() {
 	if (!page.value) return;
 
 	os.post({
-		initialText: `${page.value.title || page.value.name}\n${url}/@${page.value.user.username}/pages/${page.value.name}`,
+		initialText: `${page.value.title || page.value.name}\n${webUrl}/@${page.value.user.username}/pages/${page.value.name}`,
 		instant: true,
 	});
 }
@@ -206,7 +206,7 @@ function shareWithNavigator() {
 	navigator.share({
 		title: page.value.title ?? page.value.name,
 		text: page.value.summary ?? undefined,
-		url: `${url}/@${page.value.user.username}/pages/${page.value.name}`,
+		url: `${webUrl}/@${page.value.user.username}/pages/${page.value.name}`,
 	});
 }
 
@@ -248,7 +248,7 @@ function pin(pin: boolean) {
 async function reportAbuse() {
 	if (!page.value) return;
 
-	const pageUrl = `${url}/@${props.username}/pages/${props.pageName}`;
+	const pageUrl = `${webUrl}/@${props.username}/pages/${props.pageName}`;
 
 	const { dispose } = await os.popupAsyncWithDialog(import('@/components/MkAbuseReportWindow.vue').then(x => x.default), {
 		user: page.value.user,
diff --git a/packages/frontend/src/pages/qr.show.vue b/packages/frontend/src/pages/qr.show.vue
index 28f80e0963..be5793a13f 100644
--- a/packages/frontend/src/pages/qr.show.vue
+++ b/packages/frontend/src/pages/qr.show.vue
@@ -29,7 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import tinycolor from 'tinycolor2';
 import QRCodeStyling from 'qr-code-styling';
 import { computed, ref, shallowRef, watch, onMounted, onUnmounted, useTemplateRef } from 'vue';
-import { url, host } from '@@/js/config.js';
+import { webUrl, localHost } from '@@/js/config.js';
 import type { Directive } from 'vue';
 import { instance } from '@/instance.js';
 import { ensureSignin } from '@/i.js';
@@ -40,7 +40,7 @@ import { i18n } from '@/i18n.js';
 
 const $i = ensureSignin();
 
-const acct = computed(() => `@${$i.username}@${host}`);
+const acct = computed(() => `@${$i.username}@${localHost}`);
 const userProfileUrl = computed(() => userPage($i, undefined, true));
 const shareData = computed(() => ({
 	title: i18n.tsx._qr.shareTitle({ name: userName($i), acct: acct.value }),
@@ -64,7 +64,7 @@ const qrCodeInstance = new QRCodeStyling({
 	height: 600,
 	margin: 42,
 	type: 'canvas',
-	data: `${url}/users/${$i.id}`,
+	data: `${webUrl}/users/${$i.id}`,
 	image: instance.iconUrl ? getStaticImageUrl(instance.iconUrl) : '/favicon.ico',
 	qrOptions: {
 		typeNumber: 0,
diff --git a/packages/frontend/src/pages/reversi/game.board.vue b/packages/frontend/src/pages/reversi/game.board.vue
index 5988604652..ca8cb5193d 100644
--- a/packages/frontend/src/pages/reversi/game.board.vue
+++ b/packages/frontend/src/pages/reversi/game.board.vue
@@ -146,7 +146,7 @@ import { computed, onActivated, onDeactivated, onMounted, onUnmounted, ref, shal
 import * as Misskey from 'misskey-js';
 import * as Reversi from 'misskey-reversi';
 import { useInterval } from '@@/js/use-interval.js';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import MkButton from '@/components/MkButton.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
@@ -445,7 +445,7 @@ function autoplay() {
 
 function share() {
 	os.post({
-		initialText: `#MisskeyReversi\n${url}/reversi/g/${game.value.id}`,
+		initialText: `#MisskeyReversi\n${webUrl}/reversi/g/${game.value.id}`,
 		instant: true,
 	});
 }
diff --git a/packages/frontend/src/pages/reversi/game.vue b/packages/frontend/src/pages/reversi/game.vue
index 926d825b66..c71a461993 100644
--- a/packages/frontend/src/pages/reversi/game.vue
+++ b/packages/frontend/src/pages/reversi/game.vue
@@ -20,7 +20,7 @@ import { useStream } from '@/stream.js';
 import { $i } from '@/i.js';
 import { useRouter } from '@/router.js';
 import * as os from '@/os.js';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import { i18n } from '@/i18n.js';
 import { useInterval } from '@@/js/use-interval.js';
 
@@ -43,7 +43,7 @@ function start(_game: Misskey.entities.ReversiGameDetailed) {
 
 	if (shareWhenStart.value) {
 		misskeyApi('notes/create', {
-			text: `${i18n.ts._reversi.iStartedAGame}\n${url}/reversi/g/${props.gameId}`,
+			text: `${i18n.ts._reversi.iStartedAGame}\n${webUrl}/reversi/g/${props.gameId}`,
 			visibility: 'home',
 		});
 	}
diff --git a/packages/frontend/src/pages/search.note.vue b/packages/frontend/src/pages/search.note.vue
index ab36f2e6c5..cb6fc81f52 100644
--- a/packages/frontend/src/pages/search.note.vue
+++ b/packages/frontend/src/pages/search.note.vue
@@ -110,7 +110,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, markRaw, ref, shallowRef, toRef } from 'vue';
-import { host as localHost } from '@@/js/config.js';
+import { webHost } from '@@/js/config.js';
 import type * as Misskey from 'misskey-js';
 import { $i } from '@/i.js';
 import { i18n } from '@/i18n.js';
@@ -208,7 +208,7 @@ type SearchParams = {
 };
 
 const fixHostIfLocal = (target: string | null | undefined) => {
-	if (!target || target === localHost) return '.';
+	if (!target || target === webHost) return '.';
 	return target;
 };
 
diff --git a/packages/frontend/src/pages/settings/2fa.qrdialog.vue b/packages/frontend/src/pages/settings/2fa.qrdialog.vue
index 780040f699..884bad36b8 100644
--- a/packages/frontend/src/pages/settings/2fa.qrdialog.vue
+++ b/packages/frontend/src/pages/settings/2fa.qrdialog.vue
@@ -106,7 +106,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { hostname, port } from '@@/js/config';
+import { localHostname, port } from '@@/js/config';
 import { useTemplateRef, ref } from 'vue';
 import MkButton from '@/components/MkButton.vue';
 import MkModalWindow from '@/components/MkModalWindow.vue';
@@ -162,7 +162,7 @@ function downloadBackupCodes() {
 		const txtBlob = new Blob([backupCodes.value.join('\n')], { type: 'text/plain' });
 		const dummya = window.document.createElement('a');
 		dummya.href = URL.createObjectURL(txtBlob);
-		dummya.download = `${$i.username}@${hostname}` + (port !== '' ? `_${port}` : '') + '-2fa-backup-codes.txt';
+		dummya.download = `${$i.username}@${localHostname}` + (port !== '' ? `_${port}` : '') + '-2fa-backup-codes.txt';
 		dummya.click();
 	}
 }
diff --git a/packages/frontend/src/pages/theme-editor.vue b/packages/frontend/src/pages/theme-editor.vue
index 2d2b8ed292..b2a13fe4f8 100644
--- a/packages/frontend/src/pages/theme-editor.vue
+++ b/packages/frontend/src/pages/theme-editor.vue
@@ -78,7 +78,7 @@ import tinycolor from 'tinycolor2';
 import JSON5 from 'json5';
 import lightTheme from '@@/themes/_light.json5';
 import darkTheme from '@@/themes/_dark.json5';
-import { host } from '@@/js/config.js';
+import { localHost } from '@@/js/config.js';
 import type { Theme } from '@/theme.js';
 import { genId } from '@/utility/id.js';
 import MkButton from '@/components/MkButton.vue';
diff --git a/packages/frontend/src/pages/welcome.setup.vue b/packages/frontend/src/pages/welcome.setup.vue
index 3a4a558605..61e9420fb1 100644
--- a/packages/frontend/src/pages/welcome.setup.vue
+++ b/packages/frontend/src/pages/welcome.setup.vue
@@ -60,7 +60,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<MkInput v-model="username" pattern="^[a-zA-Z0-9_]{1,20}$" :spellcheck="false" required data-cy-admin-username>
 						<template #label>{{ i18n.ts.username }} <div v-tooltip:dialog="i18n.ts.usernameInfo" class="_button _help"><i class="ti ti-help-circle"></i></div></template>
 						<template #prefix>@</template>
-						<template #suffix>@{{ host }}</template>
+						<template #suffix>@{{ localHost }}</template>
 					</MkInput>
 					<MkInput v-model="password" type="password" data-cy-admin-password>
 						<template #label>{{ i18n.ts.password }}</template>
@@ -125,7 +125,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import { host, version } from '@@/js/config.js';
+import { localHost, version } from '@@/js/config.js';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
 import * as os from '@/os.js';
diff --git a/packages/frontend/src/preferences/manager.ts b/packages/frontend/src/preferences/manager.ts
index 7f3949f81b..2cc9b584fd 100644
--- a/packages/frontend/src/preferences/manager.ts
+++ b/packages/frontend/src/preferences/manager.ts
@@ -5,7 +5,7 @@
 
 import { customRef, ref, watch, onScopeDispose } from 'vue';
 import { EventEmitter } from 'eventemitter3';
-import { host, version } from '@@/js/config.js';
+import { localHost, version } from '@@/js/config.js';
 import { PREF_DEF } from './def.js';
 import type { Ref } from 'vue';
 import type { MenuItem } from '@/types/menu.js';
@@ -153,28 +153,28 @@ function normalizePreferences(preferences: PossiblyNonNormalizedPreferencesProfi
 			const v = getInitialPrefValue(key as keyof typeof PREF_DEF);
 			if (isAccountDependentKey(key as keyof typeof PREF_DEF)) {
 				data[key] = account ? [[makeScope({}), v, {}], [makeScope({
-					server: host,
+					server: localHost,
 					account: account.id,
 				}), v, {}]] : [[makeScope({}), v, {}]];
 			} else if (isServerDependentKey(key as keyof typeof PREF_DEF)) {
 				data[key] = [[makeScope({
-					server: host,
+					server: localHost,
 				}), v, {}]];
 			} else {
 				data[key] = [[makeScope({}), v, {}]];
 			}
 			continue;
 		} else {
-			if (account && isAccountDependentKey(key as keyof typeof PREF_DEF) && !records.some(([scope]) => parseScope(scope).server === host && parseScope(scope).account === account.id)) {
+			if (account && isAccountDependentKey(key as keyof typeof PREF_DEF) && !records.some(([scope]) => parseScope(scope).server === localHost && parseScope(scope).account === account.id)) {
 				data[key] = records.concat([[makeScope({
-					server: host,
+					server: localHost,
 					account: account.id,
 				}), getInitialPrefValue(key as keyof typeof PREF_DEF), {}]]);
 				continue;
 			}
-			if (account && isServerDependentKey(key as keyof typeof PREF_DEF) && !records.some(([scope]) => parseScope(scope).server === host)) {
+			if (account && isServerDependentKey(key as keyof typeof PREF_DEF) && !records.some(([scope]) => parseScope(scope).server === localHost)) {
 				data[key] = records.concat([[makeScope({
-					server: host,
+					server: localHost,
 				}), getInitialPrefValue(key as keyof typeof PREF_DEF), {}]]);
 				continue;
 			}
@@ -271,7 +271,7 @@ export class PreferencesManager extends EventEmitter<PreferencesManagerEvents> {
 
 		if (parseScope(record[0]).account == null && isAccountDependentKey(key) && currentAccount != null) {
 			this.profile.preferences[key].push([makeScope({
-				server: host,
+				server: localHost,
 				account: currentAccount.id,
 			}), v, {}]);
 			_save();
@@ -280,7 +280,7 @@ export class PreferencesManager extends EventEmitter<PreferencesManagerEvents> {
 
 		if (parseScope(record[0]).server == null && isServerDependentKey(key)) {
 			this.profile.preferences[key].push([makeScope({
-				server: host,
+				server: localHost,
 			}), v, {}]);
 			_save();
 			return;
@@ -399,10 +399,10 @@ export class PreferencesManager extends EventEmitter<PreferencesManagerEvents> {
 			return record;
 		}
 
-		const accountOverrideRecord = records.find(([scope, v]) => parseScope(scope).server === host && parseScope(scope).account === currentAccount.id);
+		const accountOverrideRecord = records.find(([scope, v]) => parseScope(scope).server === localHost && parseScope(scope).account === currentAccount.id);
 		if (accountOverrideRecord) return accountOverrideRecord;
 
-		const serverOverrideRecord = records.find(([scope, v]) => parseScope(scope).server === host && parseScope(scope).account == null);
+		const serverOverrideRecord = records.find(([scope, v]) => parseScope(scope).server === localHost && parseScope(scope).account == null);
 		if (serverOverrideRecord) return serverOverrideRecord;
 
 		const record = records.find(([scope, v]) => parseScope(scope).account == null);
@@ -416,7 +416,7 @@ export class PreferencesManager extends EventEmitter<PreferencesManagerEvents> {
 	public isAccountOverrided<K extends keyof PREF>(key: K): boolean {
 		const currentAccount = this.currentAccount; // TSを黙らせるため
 		if (currentAccount == null) return false;
-		return this.profile.preferences[key].some(([scope, v]) => parseScope(scope).server === host && parseScope(scope).account === currentAccount.id);
+		return this.profile.preferences[key].some(([scope, v]) => parseScope(scope).server === localHost && parseScope(scope).account === currentAccount.id);
 	}
 
 	public setAccountOverride<K extends keyof PREF>(key: K) {
@@ -427,7 +427,7 @@ export class PreferencesManager extends EventEmitter<PreferencesManagerEvents> {
 
 		const records = this.profile.preferences[key];
 		records.push([makeScope({
-			server: host,
+			server: localHost,
 			account: currentAccount.id,
 		}), this.s[key], {}]);
 
@@ -441,7 +441,7 @@ export class PreferencesManager extends EventEmitter<PreferencesManagerEvents> {
 
 		const records = this.profile.preferences[key];
 
-		const index = records.findIndex(([scope, v]) => parseScope(scope).server === host && parseScope(scope).account === currentAccount.id);
+		const index = records.findIndex(([scope, v]) => parseScope(scope).server === localHost && parseScope(scope).account === currentAccount.id);
 		if (index === -1) return;
 
 		records.splice(index, 1);
diff --git a/packages/frontend/src/ui/_common_/common.ts b/packages/frontend/src/ui/_common_/common.ts
index 7ad18fc2a8..e7ee19ae8f 100644
--- a/packages/frontend/src/ui/_common_/common.ts
+++ b/packages/frontend/src/ui/_common_/common.ts
@@ -4,10 +4,10 @@
  */
 
 import { defineAsyncComponent } from 'vue';
-import { host } from '@@/js/config.js';
 import type { MenuItem } from '@/types/menu.js';
 import * as os from '@/os.js';
 import { instance } from '@/instance.js';
+import { webHost } from '@@/js/config.js';
 import { i18n } from '@/i18n.js';
 import { $i } from '@/i.js';
 
@@ -54,7 +54,7 @@ export function openInstanceMenu(ev: PointerEvent) {
 	const menuItems: MenuItem[] = [];
 
 	menuItems.push({
-		text: instance.name ?? host,
+		text: instance.name ?? webHost,
 		type: 'label',
 	}, {
 		type: 'link',
diff --git a/packages/frontend/src/ui/_common_/titlebar.vue b/packages/frontend/src/ui/_common_/titlebar.vue
index 1b9d47ec40..f09ef1c480 100644
--- a/packages/frontend/src/ui/_common_/titlebar.vue
+++ b/packages/frontend/src/ui/_common_/titlebar.vue
@@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <div :class="$style.root">
 	<div :class="$style.title">
 		<img :src="instance.iconUrl || '/favicon.ico'" alt="" :class="$style.instanceIcon"/>
-		<span :class="$style.instanceTitle">{{ instance.name ?? host }}</span>
+		<span :class="$style.instanceTitle">{{ instance.name ?? webHost }}</span>
 	</div>
 	<div :class="$style.controls">
 		<span :class="$style.left">
@@ -20,7 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { host } from '@@/js/config.js';
+import { webHost } from '@@/js/config.js';
 import { ref } from 'vue';
 import { instance } from '@/instance.js';
 import { prefer } from '@/preferences.js';
diff --git a/packages/frontend/src/utility/get-embed-code.ts b/packages/frontend/src/utility/get-embed-code.ts
index 5817d7ece8..4487b74519 100644
--- a/packages/frontend/src/utility/get-embed-code.ts
+++ b/packages/frontend/src/utility/get-embed-code.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import { defineAsyncComponent } from 'vue';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import { defaultEmbedParams, embedRouteWithScrollbar } from '@@/js/embed-page.js';
 import type { EmbedParams, EmbeddableEntity } from '@@/js/embed-page.js';
 import { genId } from '@/utility/id.js';
@@ -54,8 +54,8 @@ export function getEmbedCode(path: string, params?: EmbedParams): string {
 	}
 
 	const iframeCode = [
-		`<iframe src="${url + path + paramString}" data-misskey-embed-id="${iframeId}" loading="lazy" referrerpolicy="strict-origin-when-cross-origin" style="border: none; width: 100%; max-width: 500px; height: 300px; color-scheme: light dark;"></iframe>`,
-		`<script defer src="${url}/embed.js"></script>`,
+		`<iframe src="${webUrl + path + paramString}" data-misskey-embed-id="${iframeId}" loading="lazy" referrerpolicy="strict-origin-when-cross-origin" style="border: none; width: 100%; max-width: 500px; height: 300px; color-scheme: light dark;"></iframe>`,
+		`<script defer src="${webUrl}/embed.js"></script>`,
 	];
 	return iframeCode.join('\n');
 }
diff --git a/packages/frontend/src/utility/get-note-menu.ts b/packages/frontend/src/utility/get-note-menu.ts
index 78176970f1..a630d3405a 100644
--- a/packages/frontend/src/utility/get-note-menu.ts
+++ b/packages/frontend/src/utility/get-note-menu.ts
@@ -4,7 +4,7 @@
  */
 
 import * as Misskey from 'misskey-js';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import { claimAchievement } from './achievements.js';
 import type { Ref, ShallowRef } from 'vue';
 import type { MenuItem } from '@/types/menu.js';
@@ -140,7 +140,7 @@ export function getAbuseNoteMenu(note: Misskey.entities.Note, text: string): Men
 		icon: 'ti ti-exclamation-circle',
 		text,
 		action: async (): Promise<void> => {
-			const localUrl = `${url}/notes/${note.id}`;
+			const localUrl = `${webUrl}/notes/${note.id}`;
 			let noteInfo = '';
 			if (note.url ?? note.uri != null) noteInfo = `Note: ${note.url ?? note.uri}\n`;
 			noteInfo += `Local Note: ${localUrl}\n`;
@@ -159,7 +159,7 @@ export function getCopyNoteLinkMenu(note: Misskey.entities.Note, text: string):
 		icon: 'ti ti-link',
 		text,
 		action: (): void => {
-			copyToClipboard(`${url}/notes/${note.id}`);
+			copyToClipboard(`${webUrl}/notes/${note.id}`);
 		},
 	};
 }
@@ -279,7 +279,7 @@ export function getNoteMenu(props: {
 		navigator.share({
 			title: i18n.tsx.noteOf({ user: appearNote.user.name ?? appearNote.user.username }),
 			text: appearNote.text ?? '',
-			url: `${url}/notes/${appearNote.id}`,
+			url: `${webUrl}/notes/${appearNote.id}`,
 		});
 	}
 
diff --git a/packages/frontend/src/utility/get-user-menu.ts b/packages/frontend/src/utility/get-user-menu.ts
index 9b2c53360c..fc77ec8e54 100644
--- a/packages/frontend/src/utility/get-user-menu.ts
+++ b/packages/frontend/src/utility/get-user-menu.ts
@@ -6,7 +6,7 @@
 import { toUnicode } from 'punycode.js';
 import { defineAsyncComponent, ref, watch } from 'vue';
 import * as Misskey from 'misskey-js';
-import { host, url } from '@@/js/config.js';
+import { localHost, webUrl } from '@@/js/config.js';
 import type { Router } from '@/router.js';
 import type { MenuItem } from '@/types/menu.js';
 import { i18n } from '@/i18n.js';
@@ -171,7 +171,7 @@ export function getUserMenu(user: Misskey.entities.UserDetailed, router: Router
 		icon: 'ti ti-at',
 		text: i18n.ts.copyUsername,
 		action: () => {
-			copyToClipboard(`@${user.username}@${user.host ?? host}`);
+			copyToClipboard(`@${user.username}@${user.host ?? localHost}`);
 		},
 	});
 
@@ -180,7 +180,7 @@ export function getUserMenu(user: Misskey.entities.UserDetailed, router: Router
 		text: i18n.ts.copyProfileUrl,
 		action: () => {
 			const canonical = user.host === null ? `@${user.username}` : `@${user.username}@${toUnicode(user.host)}`;
-			copyToClipboard(`${url}/${canonical}`);
+			copyToClipboard(`${webUrl}/${canonical}`);
 		},
 	});
 
@@ -188,7 +188,7 @@ export function getUserMenu(user: Misskey.entities.UserDetailed, router: Router
 		icon: 'ti ti-rss',
 		text: i18n.ts.copyRSS,
 		action: () => {
-			copyToClipboard(`${user.host ?? host}/@${user.username}.atom`);
+			copyToClipboard(`${user.host ?? localHost}/@${user.username}.atom`);
 		},
 	});
 
diff --git a/packages/frontend/src/utility/image-frame-renderer/ImageFrameRenderer.ts b/packages/frontend/src/utility/image-frame-renderer/ImageFrameRenderer.ts
index 591a94b855..0a33caf238 100644
--- a/packages/frontend/src/utility/image-frame-renderer/ImageFrameRenderer.ts
+++ b/packages/frontend/src/utility/image-frame-renderer/ImageFrameRenderer.ts
@@ -4,7 +4,7 @@
  */
 
 import QRCodeStyling from 'qr-code-styling';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import ExifReader from 'exifreader';
 import { FN_frame } from './frame.js';
 import { ImageCompositor } from '@/lib/ImageCompositor.js';
@@ -159,7 +159,7 @@ export class ImageFrameRenderer {
 					height: labelCanvasCtx.canvas.height,
 					margin: 0,
 					type: 'canvas',
-					data: `${url}/users/${$i.id}`,
+					data: `${webUrl}/users/${$i.id}`,
 					//image: $i.avatarUrl,
 					qrOptions: {
 						typeNumber: 0,
diff --git a/packages/frontend/src/utility/media-proxy.ts b/packages/frontend/src/utility/media-proxy.ts
index 78eba35ead..d93c0448d1 100644
--- a/packages/frontend/src/utility/media-proxy.ts
+++ b/packages/frontend/src/utility/media-proxy.ts
@@ -4,14 +4,14 @@
  */
 
 import { MediaProxy } from '@@/js/media-proxy.js';
-import { url } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import { instance } from '@/instance.js';
 
 let _mediaProxy: MediaProxy | null = null;
 
 export function getProxiedImageUrl(...args: Parameters<MediaProxy['getProxiedImageUrl']>): string {
 	if (_mediaProxy == null) {
-		_mediaProxy = new MediaProxy(instance, url);
+		_mediaProxy = new MediaProxy(instance, webUrl);
 	}
 
 	return _mediaProxy.getProxiedImageUrl(...args);
@@ -19,7 +19,7 @@ export function getProxiedImageUrl(...args: Parameters<MediaProxy['getProxiedIma
 
 export function getProxiedImageUrlNullable(...args: Parameters<MediaProxy['getProxiedImageUrlNullable']>): string | null {
 	if (_mediaProxy == null) {
-		_mediaProxy = new MediaProxy(instance, url);
+		_mediaProxy = new MediaProxy(instance, webUrl);
 	}
 
 	return _mediaProxy.getProxiedImageUrlNullable(...args);
@@ -27,7 +27,7 @@ export function getProxiedImageUrlNullable(...args: Parameters<MediaProxy['getPr
 
 export function getStaticImageUrl(...args: Parameters<MediaProxy['getStaticImageUrl']>): string {
 	if (_mediaProxy == null) {
-		_mediaProxy = new MediaProxy(instance, url);
+		_mediaProxy = new MediaProxy(instance, webUrl);
 	}
 
 	return _mediaProxy.getStaticImageUrl(...args);
diff --git a/packages/frontend/src/utility/popout.ts b/packages/frontend/src/utility/popout.ts
index 7e0222c459..cf5de9e22f 100644
--- a/packages/frontend/src/utility/popout.ts
+++ b/packages/frontend/src/utility/popout.ts
@@ -7,7 +7,7 @@ import { appendQuery } from '@@/js/url.js';
 import * as config from '@@/js/config.js';
 
 export function popout(path: string, w?: HTMLElement) {
-	let url = path.startsWith('http://') || path.startsWith('https://') ? path : config.url + path;
+	let url = path.startsWith('http://') || path.startsWith('https://') ? path : config.webUrl + path;
 	url = appendQuery(url, 'zen');
 	if (w) {
 		const position = w.getBoundingClientRect();
diff --git a/packages/frontend/src/utility/url-preview.ts b/packages/frontend/src/utility/url-preview.ts
index 5ed809a5af..11936f7ae6 100644
--- a/packages/frontend/src/utility/url-preview.ts
+++ b/packages/frontend/src/utility/url-preview.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import { computed } from 'vue';
-import { hostname } from '@@/js/config.js';
+import { webHost } from '@@/js/config.js';
 import { instance } from '@/instance.js';
 import { prefer } from '@/preferences.js';
 
@@ -18,7 +18,7 @@ export function transformPlayerUrl(url: string): string {
 	if (urlObj.hostname === 'player.twitch.tv' || urlObj.hostname === 'clips.twitch.tv') {
 		// TwitchはCSPの制約あり
 		// https://dev.twitch.tv/docs/embed/video-and-clips/
-		urlParams.set('parent', hostname);
+		urlParams.set('parent', webHost);
 		urlParams.set('allowfullscreen', '');
 		urlParams.set('autoplay', 'true');
 	} else {
diff --git a/packages/frontend/src/utility/watermark/WatermarkRenderer.ts b/packages/frontend/src/utility/watermark/WatermarkRenderer.ts
index 32341a9e10..52460f0d58 100644
--- a/packages/frontend/src/utility/watermark/WatermarkRenderer.ts
+++ b/packages/frontend/src/utility/watermark/WatermarkRenderer.ts
@@ -4,7 +4,7 @@
  */
 
 import QRCodeStyling from 'qr-code-styling';
-import { url, host } from '@@/js/config.js';
+import { webUrl } from '@@/js/config.js';
 import { getProxiedImageUrl } from '../media-proxy.js';
 import { fn as fn_watermark } from './watermark.js';
 import { fn as fn_stripe } from '@/utility/image-compositor-functions/stripe.js';
@@ -300,7 +300,7 @@ async function createTextureFromQr(options: { data: string | null }, resolution
 		height: resolution,
 		margin: 42,
 		type: 'canvas',
-		data: options.data == null || options.data === '' ? `${url}/users/${$i.id}` : options.data,
+		data: options.data == null || options.data === '' ? `${webUrl}/users/${$i.id}` : options.data,
 		image: $i.avatarUrl,
 		qrOptions: {
 			typeNumber: 0,
diff --git a/packages/frontend/src/widgets/WidgetInstanceInfo.vue b/packages/frontend/src/widgets/WidgetInstanceInfo.vue
index 7e6a779cf0..18a50ff97a 100644
--- a/packages/frontend/src/widgets/WidgetInstanceInfo.vue
+++ b/packages/frontend/src/widgets/WidgetInstanceInfo.vue
@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div :class="$style.bodyContainer">
 			<div :class="$style.body">
 				<MkA :class="$style.name" to="/about" behavior="window">{{ instance.name }}</MkA>
-				<div :class="$style.host">{{ host }}</div>
+				<div :class="$style.host">{{ webHost }}</div>
 			</div>
 		</div>
 	</div>
@@ -20,7 +20,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { host } from '@@/js/config.js';
+import { webHost } from '@@/js/config.js';
 import { useWidgetPropsManager } from './widget.js';
 import type { WidgetComponentEmits, WidgetComponentExpose, WidgetComponentProps } from './widget.js';
 import type { FormWithDefault, GetFormResultType } from '@/utility/form.js';
diff --git a/packages/frontend/src/widgets/WidgetRss.vue b/packages/frontend/src/widgets/WidgetRss.vue
index 2495c5a6e9..32e652bb04 100644
--- a/packages/frontend/src/widgets/WidgetRss.vue
+++ b/packages/frontend/src/widgets/WidgetRss.vue
@@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { ref, watch, computed } from 'vue';
 import * as Misskey from 'misskey-js';
-import { url as base } from '@@/js/config.js';
+import { webUrl as base } from '@@/js/config.js';
 import { useInterval } from '@@/js/use-interval.js';
 import { useWidgetPropsManager } from './widget.js';
 import { i18n } from '@/i18n.js';
diff --git a/packages/frontend/src/widgets/WidgetRssTicker.vue b/packages/frontend/src/widgets/WidgetRssTicker.vue
index 9ed21e6d00..d9f7e88995 100644
--- a/packages/frontend/src/widgets/WidgetRssTicker.vue
+++ b/packages/frontend/src/widgets/WidgetRssTicker.vue
@@ -36,7 +36,7 @@ import type { FormWithDefault, GetFormResultType } from '@/utility/form.js';
 import MkContainer from '@/components/MkContainer.vue';
 import { shuffle } from '@/utility/shuffle.js';
 import { i18n } from '@/i18n.js';
-import { url as base } from '@@/js/config.js';
+import { webUrl as base } from '@@/js/config.js';
 import { useInterval } from '@@/js/use-interval.js';
 
 const name = 'rssTicker';