セーフエリア対応 (#383)

## Issue

- Github Issue: #127 

## 変更内容
- proxy.jsが`.env`,`.env.local`を見るように変更
- README.mdの更新
- `100vh`を`100dvh`にすることでデバイス差異を吸収
<!-- This is an auto-generated comment: release notes by OSS CodeRabbit
-->
### Summary by CodeRabbit

---
- 新機能:
`proxy.js`が`.env`と`.env.local`を参照するように更新されました。これにより、環境設定の柔軟性が向上します。
- バグ修正:
`100vh`から`100dvh`への変更により、デバイス間の表示差異を解消しました。これにより、ユーザーインターフェースの一貫性が向上します。
- ドキュメンテーション: `README.md`が更新され、新たな環境設定方法について説明が追加されました。

<!-- end of auto-generated comment: release notes by OSS CodeRabbit -->

README.md

@@ -10,27 +10,45 @@
 Cuculusに関する情報は[こちら](https://github.com/cuculus-dev)
 
 ## 🤝️ Contributing
+
 当リポジトリはオープンソースであり、コミュニティによるコントリビュートを歓迎しています！  
 詳しくは[CONTRIBUTING.md](./CONTRIBUTING.md)を参照してください。
 
 ## 環境構築
+
 プロジェクトの実行には以下の環境が必要です：
+
 - [Node.js](https://nodejs.org/en)
 - npm
 
 ※後述のVoltaが入っている場合は自動で構築されるためインストール不要です
 
 ### ⚡ Voltaによる環境構築
+
 Cuculusは[Volta](https://volta.sh/)の使用を推奨しています。  
 Voltaを使用した場合、`pckages.json`に記載されたバージョンの`npm`と`Node.js`が自動的にインストールされます。
 
 ## 実行方法
+
 プロジェクトを実行するには、以下のコマンドを実行してください：
+
 ```bash
 npm install
 npm run dev:proxy
 ```
+
 [http://localhost:3000](http://localhost:3000) をブラウザからアクセスして動作を確認してください。
 
+### localhost:3000以外で実行したい場合
+`.env.local`を作成することで環境変数を上書きできます。  
+
+例：`192.168.0.X:4000`で実行したい場合
+```env
+NEXT_PUBLIC_API_URL=http://192.168.0.X:8080
+SITE_URL=http://192.168.0.X:4000
+```
+
+
 ### 開発環境アカウントについて
+
 [takecchi](https://twitter.com/CureDotTyphoon)宛に連絡頂ければ開発環境用の招待コードを発行致します！

package.json

@@ -64,6 +64,7 @@
     "@typescript-eslint/eslint-plugin": "6.16.0",
     "aws-cdk-lib": "2.132.1",
     "constructs": "10.3.0",
+    "dotenv": "16.4.5",
     "eslint": "8.57.0",
     "eslint-config-next": "14.1.4",
     "eslint-config-prettier": "9.1.0",

proxy.js

@@ -1,7 +1,27 @@
+const fs = require('fs');
+const dotenv = require('dotenv');
 const express = require('express');
 const next = require('next');
 const { createProxyMiddleware } = require('http-proxy-middleware');
 
+// .env.localまたは.envファイルを読み込む
+const dotenvFiles = ['.env.local', '.env'];
+for (const envFile of dotenvFiles) {
+  if (fs.existsSync(envFile)) {
+    const stats = fs.statSync(envFile);
+    if (stats.isFile()) {
+      dotenv.config({ path: envFile });
+      break;
+    }
+  }
+}
+
+const SITE_URL = process.env.SITE_URL;
+const API_URL = process.env.NEXT_PUBLIC_CUCULUS_API_URL;
+
+const siteUrl = new URL(SITE_URL);
+const apiUrl = new URL(API_URL);
+
 const dev = process.env.STAGE !== 'production';
 const app = next({ dev });
 const handle = app.getRequestHandler();
@@ -14,7 +34,7 @@ app.prepare().then(() => {
   server.use(
     '/.well-known/*',
     createProxyMiddleware({
-      target: 'http://localhost:8080',
+      target: API_URL,
       changeOrigin: true,
     }),
   );
@@ -23,7 +43,7 @@ app.prepare().then(() => {
   server.use(
     '/users/*',
     createProxyMiddleware({
-      target: 'http://localhost:8080',
+      target: API_URL,
       changeOrigin: true,
     }),
   );
@@ -32,7 +52,7 @@ app.prepare().then(() => {
   server.use(
     '/nodeinfo/*',
     createProxyMiddleware({
-      target: 'http://localhost:8080',
+      target: API_URL,
       changeOrigin: true,
     }),
   );
@@ -41,17 +61,17 @@ app.prepare().then(() => {
   server.use(
     '/inbox',
     createProxyMiddleware({
-      target: 'http://localhost:8080',
+      target: API_URL,
       changeOrigin: true,
     }),
   );
 
   server.all('*', (req, res) => {
     return handle(req, res);
   });
-  server.listen(3000, (err) => {
+  server.listen(siteUrl.port, (err) => {
     if (err) throw err;
-    console.log('> Ready on http://localhost:3000');
+    console.log(`> Ready on ${SITE_URL}`);
   });
 });
 
@@ -64,25 +84,25 @@ proxy.use(
     changeOrigin: true,
     secure: false,
     onProxyReq: (proxyReq) => {
-      proxyReq.setHeader('host', 'localhost');
+      proxyReq.setHeader('host', siteUrl.hostname);
     },
     onProxyRes: (proxyRes) => {
-      proxyRes.headers['Access-Control-Allow-Origin'] = 'http://localhost:3000';
+      proxyRes.headers['Access-Control-Allow-Origin'] = SITE_URL;
       proxyRes.headers['Access-Control-Allow-Credentials'] = 'true';
       // Set-Cookieが返却された際、Domain=.localhost;に変更
       const setCookie = proxyRes.headers['set-cookie'] ?? undefined;
       if (setCookie) {
         const pattern = /Domain=\.[a-zA-Z0-9-]*\.cuculus\.jp;/;
         const cookies = [];
         setCookie.forEach((value) => {
-          cookies.push(value.replace(pattern, 'Domain=.localhost;'));
+          cookies.push(value.replace(pattern, `Domain=.${siteUrl.hostname};`));
         });
         proxyRes.headers['set-cookie'] = cookies;
       }
     },
   }),
 );
-proxy.listen(8080, (err) => {
+proxy.listen(apiUrl.port, (err) => {
   if (err) throw err;
-  console.log('> Proxy server ready on http://localhost:8080');
+  console.log(`> Proxy server ready on ${API_URL}`);
 });

src/app/(menu)/(public)/[username]/_components/layouts/ProfileSettingModal.tsx

@@ -32,7 +32,7 @@ const SLIDER_HEIGHT = '50px';
 const Dialog = styled(MuiDialog)`
   .MuiDialog-paper {
     width: 100vw;
-    max-height: 100vh;
+    max-height: 100dvh;
     margin: 0;
 
     ${({ theme }) => theme.breakpoints.up('tablet')} {
@@ -41,7 +41,7 @@ const Dialog = styled(MuiDialog)`
 
     ${({ theme }) => theme.breakpoints.down('tablet')} {
       border-radius: 0;
-      height: 100vh;
+      height: 100dvh;
     }
   }
 `;
@@ -76,7 +76,7 @@ const SliderContainer = styled('div')`
 
 const CropContainer = styled('div')`
   position: relative;
-  height: calc(100vh - ${HEADER_HEIGHT} - ${SLIDER_HEIGHT});
+  height: calc(100dvh - ${HEADER_HEIGHT} - ${SLIDER_HEIGHT});
 
   ${({ theme }) => theme.breakpoints.up('tablet')} {
     max-height: 600px;

src/app/(menu)/_components/main/Loading.tsx

@@ -7,12 +7,12 @@ const Root = styled('div')`
   flex-direction: column;
   border-left: 1px solid ${({ theme }) => theme.palette.grey[100]};
   border-right: 1px solid ${({ theme }) => theme.palette.grey[100]};
-  min-height: 100vh;
+  min-height: 100dvh;
   color: ${({ theme }) => theme.palette.primary.main};
 
   ${({ theme }) => theme.breakpoints.down('tablet')} {
     min-height: calc(
-      100vh - ${({ theme }) => theme.mixins.bottomMenu.height}px +
+      100dvh - ${({ theme }) => theme.mixins.bottomMenu.height}px +
         env(safe-area-inset-bottom)
     );
   }

src/app/(menu)/_components/main/PrimaryColumn.tsx

@@ -9,11 +9,11 @@ const Main = styled('main')`
   flex-direction: column;
   border-left: 1px solid ${({ theme }) => theme.palette.grey[100]};
   border-right: 1px solid ${({ theme }) => theme.palette.grey[100]};
-  min-height: 100vh;
+  min-height: 100dvh;
 
   ${({ theme }) => theme.breakpoints.down('tablet')} {
     min-height: calc(
-      100vh - ${({ theme }) => theme.mixins.bottomMenu.height}px +
+      100dvh - ${({ theme }) => theme.mixins.bottomMenu.height}px +
         env(safe-area-inset-bottom)
     );
   }

src/app/(menu)/layout.tsx

@@ -13,7 +13,7 @@ const Layout = styled('div')`
       7fr
     );
   margin: 0 auto;
-  min-height: 100vh;
+  min-height: 100dvh;
   background-color: ${({ theme }) => theme.palette.background.paper};
 
   ${({ theme }) => theme.breakpoints.down('desktop')} {