質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.31%
EJS

EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。

Vercel

Vercelとは、フロントエンド開発向けのフレームワークです。静的サイトとサーバレス機能のためのクラウドプラットフォームで、簡単にWebサイトやWebサービスをデプロイできます。自動でスケールでき、監視や各種設定も必要ありません。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

Q&A

0回答

125閲覧

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

joe

総合スコア4

EJS

EJSは、JavaScript用のテンプレートエンジン。HTMLなどのテンプレートテキストにJavaScriptのロジックを記述することができます。また、変数・関数の実行をテンプレートテキスト内に埋め込むことも可能です。

Vercel

Vercelとは、フロントエンド開発向けのフレームワークです。静的サイトとサーバレス機能のためのクラウドプラットフォームで、簡単にWebサイトやWebサービスをデプロイできます。自動でスケールでき、監視や各種設定も必要ありません。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

0グッド

1クリップ

投稿2023/11/13 03:25

ローカルと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に移動 &gt;&gt;</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に自動でデプロイしてくれてビルドなどしたこともなく、ローカル環境とデプロイ環境での表示齟齬も経験した事がありませんでした。
それに甘んじてたのか、今回ローカルとデプロイで表示齟齬に出くわし、詰んでしまってます。

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問