Heroku を Free プランにしたのでアクセス時にサーバを起動する

src/components/Exhibition.tsx

@@ -11,6 +11,7 @@ import { ExhibitionOkusuriLandNotifications } from "~/components/Exhibition/Okus
 import { useMultiplay } from "~/hooks/exhibition/useMultuplay";
 import { useScreenOrientation } from "~/hooks/exhibition/useScreenOrientation";
 import { AreaName, GraphicsQuality } from "~/types/exhibition";
+import { ping } from "~/utils/exhibition";
 import * as GA from "~/utils/exhibition/google-analytics";
 import * as state from "~/utils/exhibition/state";
 import { useOkusuriLand } from "~/utils/okusuri.land";
@@ -32,6 +33,8 @@ export const Exhibition: React.FC = () => {
   const [defaultArea, setDefaultArea] = useState<AreaName | null>(null);
 
   useEffect(() => {
+    ping();
+
     if (!state.exists()) {
       return;
     }

src/pages/cheki/index.tsx

@@ -36,6 +36,7 @@ import {
   getScenarioCacheId,
   getTutorialElementId,
   MouseRelatedEvent,
+  ping,
   TouchRelatedEvent,
 } from "~/utils/cheki";
 import * as GA from "~/utils/cheki/google-analytics";
@@ -672,6 +673,7 @@ export const Index: NextPage = () => {
   // Side Effects
 
   useEffect(() => {
+    ping();
     setTimeout(() => setFire(true), SPLASH_SCREEN_DURATION);
   }, []);
 
@@ -714,7 +716,7 @@ export const Index: NextPage = () => {
 
       {!splashed && (
         <div css={fire ? splashAnimation : undefined}>
-          <div className="bg-white bottom-0 fixed flex h-full items-center justify-center left-0 right-0 top-0 w-full">
+          <div className="fixed top-0 bottom-0 left-0 right-0 flex items-center justify-center w-full h-full bg-white">
             <ChekiLogo size={256} />
             <div className="absolute font-bold" css={splashComment}>
               Made with <img css={splashHeart} src="/cheki/heart.svg" /> by

src/utils/cheki.ts

@@ -188,6 +188,10 @@ export const getImageSizeByDirection = (direction: ChekiDirection) => ({
       : CHEKI_VERTICAL_IMAGE_WIDTH,
 });
 
+export const ping = async (): Promise<void> => {
+  await fetch(getEndpointUrl(""));
+};
+
 export const upload = async (imageUrl: string): Promise<string> => {
   const dataUrl = convertImageToDataUrl(await convertUrlToImage(imageUrl));
   const formData = new FormData();

src/utils/exhibition.ts

@@ -98,6 +98,14 @@ export const getScene = async (url: string) => {
   return scene;
 };
 
+export const ping = async (): Promise<void> => {
+  await fetch(
+    process.env.NODE_ENV === "production"
+      ? "https://multiplay.creamsoda.in/a/dream"
+      : "http://localhost:5000"
+  );
+};
+
 export const preload = (url: string) =>
   axios.get(
     `${