반응형

평생 공짜로 쓸 수 있다고 해서 Oracle Freetier에 장비 하나를 구성해두었습니다. 

한참 잊고 지내고 있었는데, 그때 돌려놓았던 node 서버가 여전히 잘 돌아가고 있더군요.

 

이번엔 Oracle Freetier서버에 ExpressJS로 백엔드 서비스를 구성하고,

Netlify에 Jquery로 통신이 가능한 웹프로그램을 구성해 보았습니다.

 

1. Oracle Freetier

Cloud Free Tier | Oracle 대한민국

 

클라우드 서비스 무료 이용

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
반응형

1. 미들웨어

미들웨어는 http요청과 routing 사이에 들어가는 작업입니다.

예)

var express = require('express');
var app = express();
var user = require('./routes/user');

// 미들웨어 작성
var myLogger = function (req, res, next) {
    console.log(req.url);
    next();
};

// 미들웨어 사용
app.use(myLogger);

app.get('/', function (req, res) {
    res.send('Hello World');
});

app.use('/user', user);

app.listen(3000, function () {
    console.log('Example App is listening on port 3000');
});

 

2. 주요 미들웨어 설치

(1) morgan: 로깅미들웨어

(2) body-parser: json 형태의 데이터를 request해서 파싱해주는 미들웨어

 

main.js

 

var express = require('express');
var app = express();
var user = require('./routes/user');
var morgan = require('morgan'); // morgan 불러오기
var bodyParser = require('body-parser');    // body-parser 불러오기


app.use(morgan('dev'));         // morgan 사용
app.use(bodyParser.json());     // body-parser 사용

app.get('/', function (req, res) {
    res.send('Hello World');
});

app.use('/user', user);

app.listen(3000, function () {
    console.log('Example App is listening on port 3000');
});

 

user.js

var express = require('express');
var router = express.Router();


router.get('/:id', function (req, res) {
    res.send('Received a GET request, param:' + req.params.id);
});

router.post('/', function (req, res) {
    console.log(JSON.stringify(req.body, null, 2)); //JSON형태의 데이터('req.body') 를 출력. 'null, 2': 잘 출력하기 위한 옵션
    res.json({
        success: true,
        user: req.body.username
    });
});

router.put('/', function (req, res) {
    res.status(400).json({ message: 'Hey, you. Bad Requst!' });
});
router.delete('/', function (req, res) {
    res.send('Received a DELETE request');
});

module.exports = router;

 

확인은 postman에서 아래와 같이 입력합니다.

  1. Body, 2. raw, 3. JSON을 선택하고 입력창에 값을 입력합니다.

  4. Send 버튼을 클릭하면 아래쪽 출력 화면에서 success와 user가 출력되는 것을 볼 수 있습니다.

 

 

 

3. static 파일관리 미들웨어

express에서 기본으로 제공하는 함수를 사용하여 접근 가능합니다. 별다른 임포트가 필요 없이 아래와 같이 입력하면 됩니다.

var express = require('express');
var app = express();
var user = require('./routes/user');
var morgan = require('morgan'); 
var bodyParser = require('body-parser');    


app.use(morgan('dev'));         
app.use(bodyParser.json());     
app.use('/', express.static('public')); // public 폴더에 접근

app.use('/user', user);

app.listen(3000, function () {
    console.log('Example App is listening on port 3000');
});

그리고 public 폴더에 index.html 파일, about.html파일을 예시로 만들어줍니다. 이때

app.get('/', ...) 부분과 app.use('/', express.static('public')); 이 어느 항목이 먼저오느냐에 따라 보이는 페이지가 달라질 수 있습니다. 여기서는 app.get('/', ...) 부분을 삭제하고 진행하겠습니다.

 

 

 

 

(ps) nodemon을 설치하면 편리하게 테스트작업을 수행할 수 있습니다.

npm install -g nodemon	// 설치
nodemon main.js       	// 실행

 

- 끝 - 

반응형
저작자표시 (새창열림)

'Programming > ExpressJS' 카테고리의 다른 글

Oracle Free tier와 Netlify를 이용한 웹프로그램 구성  (0) 2024.10.15
Node강좌 - express 설치 / router설정  (0) 2020.08.09
반응형

1. 설치

npm install --save express

 

2. main.js

var express = require('express');
var app = express();
var user = require('./routes/user');


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');
});

3./routes/user.js

var express = require('express');
var router = express.Router();


router.get('/:id', function (req, res) {
    res.send('Received a GET request, param:' + req.params.id);
});

router.post('/', function (req, res) {
    res.json({ success: true })
});

router.put('/', function (req, res) {
    res.status(400).json({ message: 'Hey, you. Bad Requst!' });
});
router.delete('/', function (req, res) {
    res.send('Received a DELETE request');
});

module.exports = router;

 

4. postman 으로 확인

get은 브라우저에서 직접 확인 가능하지만 post/put/delete가 정상 작동하는지는 확인 불가능합니다. 이에 대한 테스트를 위한 툴인 postman 을 사용합니다. 설치는 구글에서 postman이라고 치면 나오는 링크를 따라 설치하면 별 어려움 없으므로 다루지는 않겠습니다.

반응형
저작자표시 (새창열림)

'Programming > ExpressJS' 카테고리의 다른 글

Oracle Free tier와 Netlify를 이용한 웹프로그램 구성  (0) 2024.10.15
Node강좌 - 미들웨어  (0) 2020.08.09

+ Recent posts

티스토리툴바