ローカルとVercelデプロイでの表示齟齬をなくしたい
左のローカル環境で表示されたように、デプロイ環境でも表示させたい
ディレクトリ構造
app.js
app.js
1// app.js 2const http = require('http'); 3const fs = require('fs').promises; 4const ejs = require('ejs'); 5const url = require('url'); 6const path = require('path'); 7 8// ファイルから読み込む処理をバックグラウンドで実行する非同期処理、readFileメソッド 9// 各種ファイルの読み込み 10const readIndexPage = fs.readFile(path.join(__dirname, 'index.ejs'), 'utf-8') 11 .catch(err => { 12 console.error('Error reading index.ejs:', err); 13 return ''; 14 }); 15const readOtherPage = fs.readFile('./other.ejs', 'utf-8'); 16 17var server = http.createServer(getFromClient); 18 19// 開発環境でのPORT3000サーバー指定、デプロイでのVercelサーバー指定をパイプさせる 20server.listen(process.env.PORT || 3000); 21console.log('Server start!'); 22 23// ここまでメインプログラム======== 24 25// createServerの処理 26async function getFromClient(request, response) { 27 var url_parts = url.parse(request.url); 28 let content; 29 30 switch (url_parts.pathname) { 31 case '/': 32 const indexPage = await readIndexPage; 33 content = ejs.render(indexPage, { 34 title: "Index", 35 content: "これはIndexページです。", 36 }); 37 response.writeHead(200, { 'Content-Type': 'text/html' }); 38 response.write(content); 39 response.end(); 40 break; 41 42 case '/other': 43 const otherPage = await readOtherPage; 44 content = ejs.render(otherPage, { 45 title: "Other", 46 content: "これは新しく用意したページです。", 47 }); 48 response.writeHead(200, { 'Content-Type': 'text/html' }); 49 response.write(content); 50 response.end(); 51 break; 52 53 default: 54 response.writeHead(200, { 'Content-Type': 'text/plain' }); 55 response.write('no page...'); 56 response.end(); 57 break; 58 } 59}
index.ejs (表示させたいもの)
index.ejs
1<!-- index.ejs --> 2 3<!DOCTYPE html> 4<html lang="ja"> 5 6<head> 7 <meta http-equiv="content-type" 8 content="text/html"; charset="UTF-8"> 9 <title><%= title %></title> 10 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 11 crossorigin="anonymous"> 12</head> 13 14<body class="container"> 15 <header> 16 <h1 class="display-4"><%= title %></h1> 17 </header> 18 <div role="main"> 19 <p><%= content %></p> 20 <p><a href="/other">Other Pageに移動 >></a></p> 21 </div> 22</body> 23 24</html>
package.json
package.json
1{ 2 "name": "node-app", 3 "version": "1.0.0", 4 "description": "", 5 "main": "app.js", 6 "scripts": { 7 "dev": "nodemon app.js" 8 }, 9 "keywords": [], 10 "author": "", 11 "license": "ISC", 12 "devDependencies": { 13 "http": "0.0.1-security", 14 "nodemon": "^3.0.1" 15 }, 16 "dependencies": { 17 "ejs": "^3.1.9" 18 } 19}
デプロイvercelで表示されてしまうindex.html
index.html
1<!-- index.html --> 2 3<!DOCTYPE html> 4<html lang="ja"> 5 6<head> 7 <meta http-equiv="content-type" 8 content="text/html"; charset="UTF-8"> 9 <title>Index</title> 10</head> 11 12<body> 13 <h1>Index</h1> 14 <p>これは、Indexページです。</p> 15</body> 16 17</html>
ローカルとデプロイで表示齟齬がある理由がわからない
色々検索し,nodeのversionをvercelと揃えたり、package.jsonのmainをindex.ejsに変更したりしましたが詰んでいます。
・Vercelでは自動でビルドしてデプロイしてくれるものは言語によって違う(今回は手動でビルドが必要なのか?)
・ビルドしていない事が原因?
・package.jsonでmainを指定し間違えてる?
・index.htmlとindex.ejsがデプロイの時にややこしくなってしまっている?
これまでVercelにデプロイ頼みだったので詰んだ。。
これまではReactやNext.jsなど、動的サイトでもgithubに pushすればvercelに自動でデプロイしてくれてビルドなどしたこともなく、ローカル環境とデプロイ環境での表示齟齬も経験した事がありませんでした。
それに甘んじてたのか、今回ローカルとデプロイで表示齟齬に出くわし、詰んでしまってます。
ご教示いただけると幸いです!

あなたの回答
tips
プレビュー