앞선 포스팅에서는 EC2 인스턴스에 프론트엔드 코드를 넣고 웹페이지가 나타나게 했습니다.
또한 이전 포스팅에서 phpMyAdmin 을 설치하여 웹에서 실행하는 것도 했습니다.
이제 이 phpMyAdmin 에 생성한 DB에 접근해서 실제 프론트엔드와 소통할 수 있는 백엔드 코드를 업로드 할 차례입니다.
이를 위해서 여느 때처럼 SFTP, SSH 접속을 해줍시다.
Filezilla 를 통해서 SFTP 접속을 했다면 내가 Backend 코드를 업로드할 디렉토리를 생성해줍시다.
/home/ec2-user/mywebsite/server
저는 위와 같은 곳에 server 라는 폴더를 생성했습니다.
생성후 저곳으로 backend.js 라는 파일을 업로드하면 되는 거죠.
이제 SSH 접속창에서 명령어를 입력합시다.
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
source ~/.bashrc
nvm install node
위 명령어들을 순서대로 입력해서 실행해주세요.
그럼 node.js 를 EC2 에 설치할 수 있게 됩니다.
cd /home/ec2-user/mywebsite/server
아까 백엔드 코드를 업로드했던 경로로 이동합니다.
npm install express
여기서 이렇게 모듈을 다운로드 하면 됩니다.
내가 백엔드 코드에 사용한 모듈을 다운로드 하면 됩니다.
node backend.js
필요한 모듈 모두 다운로드 했으면, 이제 위 명령어를 실행하면 백엔드 코드가 실행이 됩니다.
내가 업로드 한 백엔드 코드 파일의 이름을 적으면 됩니다.
예를 들어 keroro.js 파일 올렸으면, node keroro.js 라고 입력하면 실행이 됩니다.
여기서 끝내면 심심하니까 phpMyAdmin 에 있는 DB에 접근해봅시다.
우선 SSH 에서 아까 백엔드 코드 업로드 했던 위치로 이동합시다.
cd /home/ec2-user/mywebsite/server
nano .env
그리고 여기다가 환경변수를 만들어 줍시다.
위 명령어를 누르면 텅빈 페이지가 나타나는데, 그곳에 내가 원하는 환경변수를 넣어주면 됩니다.
DB_HOST= RDS Endpoint
DB_USER= RDS ID
DB_PASS= RDS Password
DB_NAME= RDS DB
위처럼 입력을 하였다고 가정합시다.
당연히 각 변수에는 실제 정보를 적어야 합니다.
자, 그리고 백엔드 코드 앞 부분을 이렇게 손봅시다.
const express = require("express");
const mysql = require("mysql2");
const bcrypt = require("bcrypt");
const cors = require("cors");
const app = express();
const port = 5000;
// .env 파일을 사용하여 환경 변수를 설정합니다.
require("dotenv").config();
// CORS 미들웨어를 사용하여 모든 도메인에서 API에 접근할 수 있도록 설정합니다.
app.use(cors());
// express 내장 미들웨어를 사용하여 JSON 형식의 요청 본문을 파싱합니다.
app.use(express.json());
// RDS 연결 정보 설정
const connection = mysql.createConnection({
host: process.env.DB_HOST, // RDS 인스턴스 엔드포인트
user: process.env.DB_USER, // RDS 'Master username'
password: process.env.DB_PASS, // RDS 'Master password'
database: process.env.DB_NAME, // 생성한 데이터베이스 이름
});
// 데이터베이스에 연결
connection.connect((error) => {
if (error) {
console.error("데이터베이스 연결 실패:", error);
return;
}
console.log("데이터베이스 연결 성공");
});
여기 19번째 줄을 위해서 방금 env 환경변수 설정을 한 겁니다.
저쪽으로 내가 설정한 변수값이 들어가서 연결이 될 겁니다.
이런 식으로 코드를 작성하고, 다시 backend.js 를 가동합시다.
[ec2-user@ip-XXXXXX server]$ node backend.js
데이터베이스 연결 성공
SSH 창에 이런 식으로 나타나면 성공입니다.
백엔드 코드 자체는 잘 돌아가는 걸 확인했죠?
이제 중요한 건, 프론트엔드에서 백엔드에 있는 라우터로 소통이 되느냐는 겁니다.
이를 위해서 SHH 창에서 다음 명령어를 입력합시다.
cd ~
sudo nano /etc/nginx/nginx.conf
여기서 Server Block 쪽으로 아래 화살표 눌러서 이동합시다.
server block 을 찾고 { … } 내부에 새로운 코드를 삽입합니다.
location /api {
proxy_pass http://localhost:5000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_cache_bypass $http_upgrade;
}
위에 거를 그대로 넣어주세요.
컨트롤 + X 그리고 Y 눌러서 저장합니다.
sudo systemctl reload nginx
이제 다시 한 번 서버 실행합시다.
const onLogin = async () => {
try {
const response = await fetch("https://example.com/api/login", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(data),
});
...
이제 프론트엔드에서 백엔드 라우터에 접근할 때 fetch 부분을 이렇게 변경해주면 됩니다.
app.post("/api/login", (req, res) => {
const { id, password } = req.body;
console.log("로그인 요청 받음:", id, password); // 요청 받은 데이터 로깅
...
백엔드 라우터도 이런 식으로 앞에 api 붙여서 작성하면 됩니다.
nohup node backend.js &
팁으로 이렇게 백엔드 파일을 실행하면 SSH 창 꺼도 그냥 알아서 계속 백엔드가 돌아갑니다.
이걸 실행하면 [1] 123456 이런 식으로, 해당 PID 를 알려줍니다.
그래서 계속 가동 중인 백엔드 파일을 끄고 싶다면.
kill -9 123456
요렇게 kill -9 뒤에 PID 를 넣어서 SSH 에서 명령어를 입력하면 됩니다.
여기까지 차례대로 EC2 와 RDS 를 결합하고 프론트엔드, 백엔드 작업을 하는 기본적인 세팅은 완수가 됐습니다.