프론트와(react) 와 백(node)로 분리 개발 후 배포

노드서버에 https로 바로 접근할 경우에는, node에서 ssl설정을 해주지 않는다면 문제가 생길 수 있습니다. Reverse proxy라는 개념이 있는데, 해당 개념을 공부하신 뒤 nginx, HAproxy를 이용하셔서 백엔드 서버를 프록시 해보세요!

교차 사이트 스크립팅 경고입니다. HTML 안에 http://example.com 처럼 http 프로토콜 사용하는 곳 (<script src="http://">)을 https로 바꾸시면 됩니다. ec2 IP주소 사용하는 곳은 https를 사용할 수 있도록 도메인 및 SSL 적용해서 쓰시면 됩니다.

이 문제는 HTTPS로 로드된 페이지가 HTTP를 통해 백엔드 API를 요청하기 때문에 발생하는 Mixed Content 오류입니다. 이를 해결하기 위해서는 백엔드 API도 HTTPS를 통해 요청되도록 변경해야 합니다. 다음과 같은 단계를 따라 해결해보세요. 1. 백엔드에 SSL 적용: 백엔드 서버(Node.js)에 SSL 인증서를 적용하여 HTTPS를 사용하도록 설정해야 합니다. 인증서는 Let's Encrypt를 사용하거나, AWS Certificate Manager에서 발급받을 수 있습니다. Node.js 서버에서 HTTPS를 사용하려면, 다음과 같이 코드를 변경해야 합니다. 2. 프론트엔드에서 HTTPS로 API 요청하기: 프론트엔드에서 백엔드 API를 호출할 때 HTTPS를 사용하도록 변경해야 합니다. 예를 들어, 다음과 같이 변경할 수 있습니다. 3. EC2 인스턴스에 443 포트 열기: HTTPS를 사용하려면 EC2 인스턴스에서 443 포트를 열어야 합니다. AWS Management Console에서 해당 인스턴스의 보안 그룹으로 이동하여 인바운드 규칙에 443 포트를 추가하세요. 4. 도메인에 백엔드 서버 연결: 백엔드 서버의 도메인 주소를 사용하려면, 도메인을 백엔드 서버(EC2 인스턴스)에 연결해야 합니다. 이를 위해 Route 53, ELB, Nginx 등의 방법을 사용할 수 있습니다. 이러한 변경을 적용한 후 프론트엔드 페이지에서 백엔드 API를 호출하면 Mixed Content 오류가 해결됩니다.

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
32
33
#1
const fs = require('fs');
const http = require('http');
const https = require('https');
const privateKey = fs.readFileSync('/path/to/private-key.pem', 'utf8');
const certificate = fs.readFileSync('/path/to/certificate.pem', 'utf8');
const ca = fs.readFileSync('/path/to/ca.pem', 'utf8');

const credentials = {
  key: privateKey,
  cert: certificate,
  ca: ca
};

const app = require('./app');

const httpServer = http.createServer(app);
const httpsServer = https.createServer(credentials, app);

httpServer.listen(80, () => {
  console.log('HTTP Server running on port 80');
});

httpsServer.listen(443, () => {
  console.log('HTTPS Server running on port 443');
});

#2
// 기존 코드
// const backendUrl = 'http://ec2.IPv4주소:port/backend_API_endpoint';

// 변경된 코드
const backendUrl = 'https://your_domain.com/backend_API_endpoint';