일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- MFA
- SwiftUI
- 인증
- apple
- albumbook
- SWIFT
- appres
- 애플
- otpkey
- css
- FIDO2
- 앨범북
- fido
- SSH
- MYSQL
- OTP
- Nodejs
- kmip
- MSYS2
- Android
- 안드로이드
- 앱리소스
- git
- Xcode
- openssl
- OSX
- 앱스토어
- 2FA
- SSL
- WebAuthn
- Today
- Total
인디노트
AngularJS 와 NodeJS 를 함께 가동하기 본문
앵귤러를 이용하여 Ajax 서버를 구현하려면 쉽게 되질 않는다. 오해스럽지만 불가능하다.
앵귤러는 클라이언트 자바스크립트 기반의 프래임워크이기 때문에 당연하다.
따라서 Angular 에 NodeJS 를 함께하여 Ajax 서버쪽을 NodeJS 로 구현하는 방법이 유리하다.
물론 Ajax 서버 쪽을 다른 HTTP 서버를 이용하여 만들어도 되지만 AngularJS 를 기본으로 구성하는 차원에서는 그것도 쉽지 않은 결정이 될 것이다.
이제 AngularJS 와 NodeJS 를 어떻게 구성하면 되는지 설명한다.
우선, AngularJS 에 다음 내용의 파일을 생성한다. 그냥 본인의 Angular 프로젝트 폴더에 생성하면 된다.
파일명 : proxy.config.json
{
"/api/*":
{
"target":"http://localhost:3000",
"secure":false,
"logLevel":"debug"
}
}
파일명 : api.js
const express = require('express')
const app = express()
app.post('/api', function(req, res) {
//console.log(JSON.stringify(req.body));
res.status(200).send('whatever you want to send back to angular side');
});
app.get('/api', function(req, res) {
//console.log(req.params);
res.status(200).send('whatever you want to send back to angular side');
});
app.listen(3000, () => console.log('Example app listening on port 3000!'))
터미널을 열고 다음과 같이 Node 를 실행한다.
node api.js
다음과 같은 메시지가 표시될 것이다.
Example app listening on port 3000!
이제 다음과 같은 명령으로 Angular 를 실행한다.
ng serve --host 0.0.0.0 --disableHostCheck --open --proxy-config proxy.config.json
실행하는 로그에 다음과 같은 메시지가 표시됨을 확인 할 수 있다.
10% building 4/4 modules 0 active[HPM] Proxy created: /api -> http://localhost:3000
[HPM] Subscribed to http-proxy events: [ 'error', 'close' ]
결국 /api 로 들어오는 접속은 3000번포트 즉, NodeJS 로 실행한 app.js 로 연결한다는 의미이다.
여기서 주의해야 할 것은 /api 와 같이 연결하는 패스를 같은것으로 사용해야 한다는 것이다.
Angular 에서 /api 로 연결되는 접속은 http://localhost:3000 으로 연결하는데 이떄도 /api 를 사용하기 때문에 NodeJS 에도 해당 매핑이 필요한 것이다.
이제 http://localhost:4200/api 를 접속해 보자.
웹브라우저에
whatever you want to send back to angular side
라고 표시됨을 알 수 있을 것이다.
이제 이렇게되면 AngularJS 와 NodeJS 를 함깨 사용하는 서버가 구성되는데...
만약, 구글의 Firebase hosting 서버를 사용한다면 이에 적용하기 위해서 NodeJS 의 처리가 어떻게 되는지 확인이 필요할 것이다.
'개발 플랫폼 및 언어 > 앵귤러 Algular' 카테고리의 다른 글
Angular 에서 environment 값 가져오기 (0) | 2023.04.21 |
---|---|
Download Files with Axios (0) | 2021.01.22 |
Angular 에서 jquery, jquery.backstretch 사용하기 (2) | 2020.11.29 |
How To Post Data From Angular To Node REST API (0) | 2019.08.22 |
앨귤러 JS 시작하기에 필요한 설치 (0) | 2017.12.17 |