평생 공짜로 쓸 수 있다고 해서 Oracle Freetier에 장비 하나를 구성해두었습니다.
한참 잊고 지내고 있었는데, 그때 돌려놓았던 node 서버가 여전히 잘 돌아가고 있더군요.
이번엔 Oracle Freetier서버에 ExpressJS로 백엔드 서비스를 구성하고,
Netlify에 Jquery로 통신이 가능한 웹프로그램을 구성해 보았습니다.
1. Oracle Freetier
클라우드 서비스 무료 이용
Oracle Cloud Free Tier는 기업에게 무제한으로 사용할 수 있는 상시 무료 클라우드 서비스를 제공합니다.
www.oracle.com
[src/index.js]
간단하게 'Hello World'만 return하는 서버를 만들어 두었습니다. Github에서 해당 서버로 자동배포하는 것까지 구성은 못해서 FTP로 일일이 옮겨넣었습니다.
var express = require('express');
var app = express();
var user = require('./routes/user');
const cors = require('cors');
app.use(cors());
app.get('/', function (req, res) { // 기본 root('/') 는 main.js에서 routing
res.send('Hello World');
});
//app.use('/user', user); // 나머지 접근은 router(/routes/user)에서 routing
app.listen(3000, function () { // 3000 포트로 서버 실행
console.log('Example App is listening on port 3000');
});소스코드에 보시면, 다른 서버로부터의 요청이 허용되도록 app.use(cors())를 선언해줘야합니다.
위치는 라우팅보다 앞에 선언되어야 합니다.
2. Netlify
Scale & Ship Faster with a Composable Web Architecture | Netlify
Scale & Ship Faster with a Composable Web Architecture | Netlify
Realize the speed, agility and performance of a scalable, composable web architecture with Netlify. Explore the composable web platform now!
www.netlify.com
Netlify는 Github이나 Gitlab과 연동이 잘 되어 별도의 구성 없이도 CI/CD가 쉽게 가능합니다. 그래서 다른 Front Framework 사용하지 않고 html하고 jquery만으로 데이터를 받아오는 연습을 해봤습니다.
[index.html]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./js/jquery.min.js"></script>
</head>
<body>
<div id="headline">Hello!!</div>
<button onclick="ajax_request()">Ajax Request</button>
<script>
function ajax_request(){
$.ajax({
url:'/api/', //'http://1xx.6xx.2xx.2xx:3000/', <- netlify에서 https요청으로 보내면, netlify.toml의 proxy설정을 통해 해당 서버로 요청됨
method:'GET',
async:false,
success: function(data){
console.log(data);
document.getElementById('headline').innerText =data;
}
})
}
</script>
</body>
</html>
[netlify.toml]
[[redirects]]
from = "/api/*"
to = "http://1xx.6xx.2xx.2xx:3000/:splat"
status = 200
force = true
oracle 서버에서 cors 허용을 해놓았는데도 원래의 주소로 request를 보내면 오류가 납니다. 이유는 oracle에서는 http로 서비스를 하고 있고, netlify에서는 https로 서비스를 하고 있어서 그렇습니다. oracle에도 https서비스를 위한 인증서를 구해서 넣으면 좋지만, 위와 같이 proxy 우회 방법으로 간단히 두 서버간 통신이 가능합니다.
netlify에서는 ajax요청할 때, '/api/' 로 요청을 보내고,
netlify proxy설정을 통해 원래 서버로 전달됩니다.
그럼 이만~!
'Programming > ExpressJS' 카테고리의 다른 글
| Node강좌 - 미들웨어 (0) | 2020.08.09 |
|---|---|
| Node강좌 - express 설치 / router설정 (0) | 2020.08.09 |
