Cloud Functions+Express+EJS로 동적 내용 보내기
클라우드 기능을 사용하여 동적 컨텐츠 배포
Firebase Hosting에서는 Cloud Functions를 사용하여 서버 측 처리를 수행할 수 있습니다.즉, Firebase Hosting 사이트 내용의 동적 생성을 지원할 수 있다는 것이다.
보아하니 Firebase Hosting은 동적 사이트를 활용할 수 있는 매우 좋은 서비스이기 때문에 실제적으로 동적 내용의 배신을 진행하였다.
Node.js의 "Express"를 사용합니다.템플릿 엔진은 EJS를 사용합니다.여기'Pug'와'handlebars'는 문제 없어요
Firebase Hosting 환경 구축 포기 설명
자세한 내용은 참조여기
프로젝트 계층
계층은 이런 느낌이다.├── firebase.json
├── functions
│ ├── firebase-debug.log
│ ├── index.js
│ ├── node_modules
│ │ ├── @types
│ │ ├── ・・・・・・・
│ │ ├── ・・・・・・・
│ ├── package-lock.json
│ ├── package.json
│ └── views
│ └── template.ejs
└── public
└── index.html
npm에 "Express" 및 "EJS" 설치
express 설치$ npm install express --save
ejs 설치$ npm install ejs --save
모두 npm에 설치해야 합니다.
firebase.json 파일
를 열고 다음 코드로 내용을 대체합니다.
firebase.json{
"hosting": {
"public": "public",
"rewrites": [
{
"source": "/**",
"function": "sample"
}
]
}
}
함수에 호스트 요청 보내기
다시 쓰기 규칙을 사용하면 특정 패턴과 일치하는 요청을 단일 목적지로 보낼 수 있습니다.firebase.json의 모든 요청을 보내고 /**라는 HTTPS 함수를 실행합니다.
이번 첫 페이지에는 정적 페이지가 표시되며, 방문sample 시 (/page1 및/page2) 와 해당하는 동적 내용을 되돌려줍니다.
public
루트 바로 아래 /** 에서public 디렉터리에 있는 ** 파일을 불러옵니다.
파일 내용은 다음과 같습니다.
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type">
<title>トップページ</title>
<style>
h1 { font-size:18px; background-color:#eaeaea; }
</style>
</head>
<body>
<header>
<h1 id="h1">トップページ</h1>
</header>
<div>
<p>これはトップページです。</p>
<ul>
<li><a href="/page1">ページ1へ</a></li>
<li><a href="/page2">ページ2へ</a></li>
</ul>
</div>
</body>
</html>
HTTPS 함수를 생성하는 indexjs
를 열고 다음 코드로 내용을 대체합니다.여기에서 위의 HTTPS 함수/를 작성합니다.
index.jsconst functions = require('firebase-functions');
const express = require('express');
const url = require('url');
const app = express();
const routes = {
"/page1":{
"title":"ページ1",
"content":"これはページ1です。"
},
"/page2":{
"title":"ページ2",
"content":"これはページ2です。"
}
};
app.set("view engine","ejs");
app.engine('ejs', require('ejs').__express);
app.get("*",function(req,res){
const url_parts = url.parse(req.path);
if(routes[url_parts.pathname] == null){
res.status(404).send("page not found");
}else{
res.status(200).render("template",
{
title: routes[url_parts.pathname].title,
content: routes[url_parts.pathname].content
}
);
}
});
exports.sample = functions.https.onRequest(app);
보기 엔진에 js 설정
다음 섹션:.app.set("view engine","ejs");
app.engine('ejs', require('ejs').__express);
루트 디렉토리에 데이터 요약
페이지당 데이터를 index.html 변수로 요약합니다.
방문한 path를 키로 하고 이 path에 표시된 페이지 정보를 관련 그룹의 값으로 설정합니다.
이 변수에서 각 경로에 필요한 정보를 로드하고 처리합니다.const routes = {
"/page1":{
"title":"ページ1",
"content":"これはページ1です。"
},
"/page2":{
"title":"ページ2",
"content":"これはページ2です。"
}
};
URL 객체 로드
URL 대상을 불러옵니다.원근 URL 문자열에 사용됩니다.const url = require('url');
원근 액세스 URL
원근 및 변환 변수 /functions/index.js.const url_parts = url.parse(req.path);
판정
액세스할 path를 결정합니다sample. 일치하지 않으면 404를 보내고, 일치하면 JSON을 사용하여 routes 변수에 기반한 데이터를 보내고 템플릿을 렌더링합니다.if(routes[url_parts.pathname] == null){
res.status(404).send("page not found");
}else{
res.status(200).render("template",
{
title: routes[url_parts.pathname].title,
content: routes[url_parts.pathname].content
}
);
}
템플릿 파일 준비
functions 디렉터리에views 디렉터리를 만들고 routes 파일을 만듭니다.파일 내용은 다음과 같습니다.
template.ejs<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type">
<title><%=title %></title>
<style>
h1 { font-size:18px; background-color:#eaeaea; }
</style>
</head>
<body>
<header>
<h1 id="h1"><%=title %></h1>
</header>
<div>
<p><%-content %></p>
<ul>
<li><a href="/">トップページへ</a></li>
</ul>
</div>
</body>
</html>
배포 후 결과 url_parts 정적 첫 페이지를 표시하고 방문routes[url_parts.pathname]routes 후 각 URL에 해당하는 내용을 동적 페이지로 표시합니다.
총결산
Firebase Hosting에서 Cloud Functions를 사용하면 동적 사이트를 실제로 활용할 수 있습니다.
그리고 공짜예요.
Firebase에 제한이 많다고 생각하지만 이렇게 하면 AWS Lambda보다 더 쉽고 유연한 응용 프로그램을 만들 수 있을 것 같습니다.Firebase Realtime Database와 결합합니다.
Reference
이 문제에 관하여(Cloud Functions+Express+EJS로 동적 내용 보내기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/kingpanda/items/aa9bdef2706857720058
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
├── firebase.json
├── functions
│ ├── firebase-debug.log
│ ├── index.js
│ ├── node_modules
│ │ ├── @types
│ │ ├── ・・・・・・・
│ │ ├── ・・・・・・・
│ ├── package-lock.json
│ ├── package.json
│ └── views
│ └── template.ejs
└── public
└── index.html
express 설치
$ npm install express --save
$ npm install ejs --save
firebase.json 파일
를 열고 다음 코드로 내용을 대체합니다.
firebase.json{
"hosting": {
"public": "public",
"rewrites": [
{
"source": "/**",
"function": "sample"
}
]
}
}
함수에 호스트 요청 보내기
다시 쓰기 규칙을 사용하면 특정 패턴과 일치하는 요청을 단일 목적지로 보낼 수 있습니다.firebase.json의 모든 요청을 보내고 /**라는 HTTPS 함수를 실행합니다.
이번 첫 페이지에는 정적 페이지가 표시되며, 방문sample 시 (/page1 및/page2) 와 해당하는 동적 내용을 되돌려줍니다.
public
루트 바로 아래 /** 에서public 디렉터리에 있는 ** 파일을 불러옵니다.
파일 내용은 다음과 같습니다.
index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type">
<title>トップページ</title>
<style>
h1 { font-size:18px; background-color:#eaeaea; }
</style>
</head>
<body>
<header>
<h1 id="h1">トップページ</h1>
</header>
<div>
<p>これはトップページです。</p>
<ul>
<li><a href="/page1">ページ1へ</a></li>
<li><a href="/page2">ページ2へ</a></li>
</ul>
</div>
</body>
</html>
HTTPS 함수를 생성하는 indexjs
를 열고 다음 코드로 내용을 대체합니다.여기에서 위의 HTTPS 함수/를 작성합니다.
index.jsconst functions = require('firebase-functions');
const express = require('express');
const url = require('url');
const app = express();
const routes = {
"/page1":{
"title":"ページ1",
"content":"これはページ1です。"
},
"/page2":{
"title":"ページ2",
"content":"これはページ2です。"
}
};
app.set("view engine","ejs");
app.engine('ejs', require('ejs').__express);
app.get("*",function(req,res){
const url_parts = url.parse(req.path);
if(routes[url_parts.pathname] == null){
res.status(404).send("page not found");
}else{
res.status(200).render("template",
{
title: routes[url_parts.pathname].title,
content: routes[url_parts.pathname].content
}
);
}
});
exports.sample = functions.https.onRequest(app);
보기 엔진에 js 설정
다음 섹션:.app.set("view engine","ejs");
app.engine('ejs', require('ejs').__express);
루트 디렉토리에 데이터 요약
페이지당 데이터를 index.html 변수로 요약합니다.
방문한 path를 키로 하고 이 path에 표시된 페이지 정보를 관련 그룹의 값으로 설정합니다.
이 변수에서 각 경로에 필요한 정보를 로드하고 처리합니다.const routes = {
"/page1":{
"title":"ページ1",
"content":"これはページ1です。"
},
"/page2":{
"title":"ページ2",
"content":"これはページ2です。"
}
};
URL 객체 로드
URL 대상을 불러옵니다.원근 URL 문자열에 사용됩니다.const url = require('url');
원근 액세스 URL
원근 및 변환 변수 /functions/index.js.const url_parts = url.parse(req.path);
판정
액세스할 path를 결정합니다sample. 일치하지 않으면 404를 보내고, 일치하면 JSON을 사용하여 routes 변수에 기반한 데이터를 보내고 템플릿을 렌더링합니다.if(routes[url_parts.pathname] == null){
res.status(404).send("page not found");
}else{
res.status(200).render("template",
{
title: routes[url_parts.pathname].title,
content: routes[url_parts.pathname].content
}
);
}
템플릿 파일 준비
functions 디렉터리에views 디렉터리를 만들고 routes 파일을 만듭니다.파일 내용은 다음과 같습니다.
template.ejs<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type">
<title><%=title %></title>
<style>
h1 { font-size:18px; background-color:#eaeaea; }
</style>
</head>
<body>
<header>
<h1 id="h1"><%=title %></h1>
</header>
<div>
<p><%-content %></p>
<ul>
<li><a href="/">トップページへ</a></li>
</ul>
</div>
</body>
</html>
배포 후 결과 url_parts 정적 첫 페이지를 표시하고 방문routes[url_parts.pathname]routes 후 각 URL에 해당하는 내용을 동적 페이지로 표시합니다.
총결산
Firebase Hosting에서 Cloud Functions를 사용하면 동적 사이트를 실제로 활용할 수 있습니다.
그리고 공짜예요.
Firebase에 제한이 많다고 생각하지만 이렇게 하면 AWS Lambda보다 더 쉽고 유연한 응용 프로그램을 만들 수 있을 것 같습니다.Firebase Realtime Database와 결합합니다.
Reference
이 문제에 관하여(Cloud Functions+Express+EJS로 동적 내용 보내기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/kingpanda/items/aa9bdef2706857720058
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
{
"hosting": {
"public": "public",
"rewrites": [
{
"source": "/**",
"function": "sample"
}
]
}
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type">
<title>トップページ</title>
<style>
h1 { font-size:18px; background-color:#eaeaea; }
</style>
</head>
<body>
<header>
<h1 id="h1">トップページ</h1>
</header>
<div>
<p>これはトップページです。</p>
<ul>
<li><a href="/page1">ページ1へ</a></li>
<li><a href="/page2">ページ2へ</a></li>
</ul>
</div>
</body>
</html>
를 열고 다음 코드로 내용을 대체합니다.여기에서 위의 HTTPS 함수
/를 작성합니다.index.js
const functions = require('firebase-functions');
const express = require('express');
const url = require('url');
const app = express();
const routes = {
"/page1":{
"title":"ページ1",
"content":"これはページ1です。"
},
"/page2":{
"title":"ページ2",
"content":"これはページ2です。"
}
};
app.set("view engine","ejs");
app.engine('ejs', require('ejs').__express);
app.get("*",function(req,res){
const url_parts = url.parse(req.path);
if(routes[url_parts.pathname] == null){
res.status(404).send("page not found");
}else{
res.status(200).render("template",
{
title: routes[url_parts.pathname].title,
content: routes[url_parts.pathname].content
}
);
}
});
exports.sample = functions.https.onRequest(app);
보기 엔진에 js 설정
다음 섹션:.
app.set("view engine","ejs");
app.engine('ejs', require('ejs').__express);
루트 디렉토리에 데이터 요약
페이지당 데이터를
index.html 변수로 요약합니다.방문한 path를 키로 하고 이 path에 표시된 페이지 정보를 관련 그룹의 값으로 설정합니다.
이 변수에서 각 경로에 필요한 정보를 로드하고 처리합니다.
const routes = {
"/page1":{
"title":"ページ1",
"content":"これはページ1です。"
},
"/page2":{
"title":"ページ2",
"content":"これはページ2です。"
}
};
URL 객체 로드
URL 대상을 불러옵니다.원근 URL 문자열에 사용됩니다.
const url = require('url');
원근 액세스 URL
원근 및 변환 변수
/functions/index.js.const url_parts = url.parse(req.path);
판정
액세스할 path를 결정합니다
sample. 일치하지 않으면 404를 보내고, 일치하면 JSON을 사용하여 routes 변수에 기반한 데이터를 보내고 템플릿을 렌더링합니다.if(routes[url_parts.pathname] == null){
res.status(404).send("page not found");
}else{
res.status(200).render("template",
{
title: routes[url_parts.pathname].title,
content: routes[url_parts.pathname].content
}
);
}
템플릿 파일 준비
functions 디렉터리에views 디렉터리를 만들고 routes 파일을 만듭니다.파일 내용은 다음과 같습니다.
template.ejs<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type">
<title><%=title %></title>
<style>
h1 { font-size:18px; background-color:#eaeaea; }
</style>
</head>
<body>
<header>
<h1 id="h1"><%=title %></h1>
</header>
<div>
<p><%-content %></p>
<ul>
<li><a href="/">トップページへ</a></li>
</ul>
</div>
</body>
</html>
배포 후 결과 url_parts 정적 첫 페이지를 표시하고 방문routes[url_parts.pathname]routes 후 각 URL에 해당하는 내용을 동적 페이지로 표시합니다.
총결산
Firebase Hosting에서 Cloud Functions를 사용하면 동적 사이트를 실제로 활용할 수 있습니다.
그리고 공짜예요.
Firebase에 제한이 많다고 생각하지만 이렇게 하면 AWS Lambda보다 더 쉽고 유연한 응용 프로그램을 만들 수 있을 것 같습니다.Firebase Realtime Database와 결합합니다.
Reference
이 문제에 관하여(Cloud Functions+Express+EJS로 동적 내용 보내기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/kingpanda/items/aa9bdef2706857720058
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type">
<title><%=title %></title>
<style>
h1 { font-size:18px; background-color:#eaeaea; }
</style>
</head>
<body>
<header>
<h1 id="h1"><%=title %></h1>
</header>
<div>
<p><%-content %></p>
<ul>
<li><a href="/">トップページへ</a></li>
</ul>
</div>
</body>
</html>
url_parts 정적 첫 페이지를 표시하고 방문routes[url_parts.pathname]routes 후 각 URL에 해당하는 내용을 동적 페이지로 표시합니다. 총결산
Firebase Hosting에서 Cloud Functions를 사용하면 동적 사이트를 실제로 활용할 수 있습니다.
그리고 공짜예요.
Firebase에 제한이 많다고 생각하지만 이렇게 하면 AWS Lambda보다 더 쉽고 유연한 응용 프로그램을 만들 수 있을 것 같습니다.Firebase Realtime Database와 결합합니다.
Reference
이 문제에 관하여(Cloud Functions+Express+EJS로 동적 내용 보내기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/kingpanda/items/aa9bdef2706857720058
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Cloud Functions+Express+EJS로 동적 내용 보내기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kingpanda/items/aa9bdef2706857720058텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
