常連

### ローカルとVercelデプロイでの表示齟齬をなくしたい

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-11-13/35ecb7d2-c4b4-4a74-81f4-78749a34d31a.png)
左のローカル環境で表示されたように、デプロイ環境でも表示させたい


### ディレクトリ構造
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-11-13/c903918c-2baa-4cc3-bdfb-c84e39f6333d.png)



### app.js

```app.js
// app.js 
const http = require('http');
const fs = require('fs').promises;
const ejs = require('ejs');
const url = require('url');
const path = require('path');

// ファイルから読み込む処理をバックグラウンドで実行する非同期処理、readFileメソッド
// 各種ファイルの読み込み
const readIndexPage = fs.readFile(path.join(__dirname, 'index.ejs'), 'utf-8')
  .catch(err => {
     console.error('Error reading index.ejs:', err);
     return '';
  });
const readOtherPage = fs.readFile('./other.ejs', 'utf-8');

var server = http.createServer(getFromClient);

// 開発環境でのPORT3000サーバー指定、デプロイでのVercelサーバー指定をパイプさせる
server.listen(process.env.PORT || 3000);
console.log('Server start!');

// ここまでメインプログラム========

// createServerの処理
async function getFromClient(request, response) {
    var url_parts = url.parse(request.url);
    let content;

    switch (url_parts.pathname) {
        case '/':
            const indexPage = await readIndexPage;
            content = ejs.render(indexPage, {
                title: "Index",
                content: "これはIndexページです。",
            });
            response.writeHead(200, { 'Content-Type': 'text/html' });
            response.write(content);
            response.end();
            break;

        case '/other':
            const otherPage = await readOtherPage;
            content = ejs.render(otherPage, {
                title: "Other",
                content: "これは新しく用意したページです。",
            });
            response.writeHead(200, { 'Content-Type': 'text/html' });
            response.write(content);
            response.end();
            break;

        default:
            response.writeHead(200, { 'Content-Type': 'text/plain' });
            response.write('no page...');
            response.end();
            break;
    }
}
```
### index.ejs (表示させたいもの)
```index.ejs


<!DOCTYPE html>
<html lang="ja">

<head>
    <meta http-equiv="content-type"
        content="text/html"; charset="UTF-8">
    <title><%= title %></title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        crossorigin="anonymous">
</head>

<body class="container">
    <header>
        <h1 class="display-4"><%= title %></h1>
    </header>
    <div role="main">
        <p><%= content %></p>
        <p><a href="/other">Other Pageに移動 &gt;&gt;</a></p>
    </div>
</body>

</html>
```

### package.json
```package.json
{
  "name": "node-app",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "dev": "nodemon app.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "http": "0.0.1-security",
    "nodemon": "^3.0.1"
  },
  "dependencies": {
    "ejs": "^3.1.9"
  }
}
```

### デプロイvercelで表示されてしまうindex.html
``` index.html


<!DOCTYPE html>
<html lang="ja">

<head>
    <meta http-equiv="content-type"
          content="text/html"; charset="UTF-8">
    <title>Index</title>
</head>

<body>
    <h1>Index</h1>
    <p>これは、Indexページです。</p>   
</body>

</html>
```


### ローカルとデプロイで表示齟齬がある理由がわからない
色々検索し,nodeのversionをvercelと揃えたり、package.jsonのmainをindex.ejsに変更したりしましたが詰んでいます。

・Vercelでは自動でビルドしてデプロイしてくれるものは言語によって違う（今回は手動でビルドが必要なのか？）
・ビルドしていない事が原因？
・package.jsonでmainを指定し間違えてる？
・index.htmlとindex.ejsがデプロイの時にややこしくなってしまっている？



### これまでVercelにデプロイ頼みだったので詰んだ。。
これまではReactやNext.jsなど、動的サイトでもgithubに　pushすればvercelに自動でデプロイしてくれてビルドなどしたこともなく、ローカル環境とデプロイ環境での表示齟齬も経験した事がありませんでした。
それに甘んじてたのか、今回ローカルとデプロイで表示齟齬に出くわし、詰んでしまってます。

ご教示いただけると幸いです！

Node.jsでEJSを使用、Vercelで反映されない問題

ReactでfirebaseのGoogle認証機能を作成したのですが、ローカルでは問題なく動くのですが、VercelでデプロイするとfirebaseのGoogleログイン機能が作動しなくなってしまいました。

この原因について、わかる方、ぜひ教えていただきたいです。
他の見た目や機能については問題ないのですが、認証だけされない状態です。

Vercelでデプロイしたらfirebaseの認証ができなくなった

Reactのアプリケーションを`vercel`にデプロイしたのですが、開発環境ではAPIから取得できているデータを本番環境では取得できません。

原因として考えたものとしては、
`APIから取得する際にapi keyを設定する必要があり、開発環境では.envに記載しているものの、本番環境ではそれが読み込ませず、データを取得できていない`
と言うものがあります。

また、開発環境のapi keyは.envファイルから、以下のように取得し、

```App.tsx
const api_key = process.env.REACT_APP_API_KEY;
```

以下のようにfetchしています。

```App.tsx
fetch(url, {
  headers: {
    "X-API-KEY": `${api_key}`
  }
})
.then(res => {

})
```

vercelのダッシュボードから環境変数をセットはしてみたものの、`process.env`で使おうとしてもうまく使えません。reactの場合、vercelの環境変数はどのように使えばいいのでしょうか？