리눅스 우분투 Nginx 설치 및 React 애플리케이션 배포

1. Nginx 설치

1. Nginx 설치
2. sudo apt update sudo apt install nginx
3. Nginx 서비스 시작 및 활성화
4. sudo systemctl start nginx sudo systemctl enable nginx
5. Nginx 상태 확인
6. sudo systemctl status nginx
7. 80번 포트 허용
8. 방화벽에서 80번 포트를 허용합니다:

   sudo ufw allow 'Nginx Full'

• ufw 로 허용해도 접속이 안될경우 iptables 명령어로 포트 허용할 것
  • error: port 80 after 1 ms No route to host 발생

root@was-instance:/home/ubuntu# curl http://150.230.252.242
curl: (7) Failed to connect to 150.230.252.242 port 80 after 0 ms: No route to host
root@was-instance:/home/ubuntu# sudo iptables -I INPUT 6 -m state --state NEW -p tcp --dport 80 -j ACCEPT

• 설정 저장

root@was-instance:/home/ubuntu# netfilter-persistent save
run-parts: executing /usr/share/netfilter-persistent/plugins.d/15-ip4tables save
run-parts: executing /usr/share/netfilter-persistent/plugins.d/25-ip6tables save


root@was-instance:/home/ubuntu# curl http://150.230.252.242
{"timestamp":"2025-01-18T05:09:58.711+00:00","status":404,"error":"Not Found","path":"/"}

---

2. React와 Node.js 애플리케이션 배포 준비

1. React 앱 빌드

npm run build

• React 프로젝트에서 정적 파일 생성
• 생성된 build/ 폴더가 배포에 사용됩니다.

---

3. Node.js 서버 준비

Node.js 서버를 통해 React 빌드 파일을 제공하는 server.js를 작성합니다. 예를 들어:

import express from 'express';
import path from 'path';
import { fileURLToPath } from 'url';

const app = express();
const PORT = process.env.PORT || 3000;

// __dirname 대체 (ES Module에서는 기본 제공되지 않음)
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

// 정적 파일 제공
app.use(express.static(path.join(__dirname, 'dist')));

// SPA를 위해 모든 요청을 index.html로 리다이렉트
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

// 서버 시작
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

---

4. PM2로 Node.js 서버 실행

1. PM2로 서버 실행:

 pm2 start server.js --name insider

1. PM2 상태 확인:

 pm2 list

1. PM2 설정 저장(서버 재부팅 후에도 실행 유지):

 pm2 save
 pm2 startup

---

5. Nginx 리버스 프록시 설정

1. Nginx 설정 파일 수정

 sudo vim /etc/nginx/sites-available/default

1. 아래 내용을 추가:

 server {
     listen 80;
     server_name your-domain.com; # 또는 서버 IP

     location / {
         proxy_pass http://localhost:3000; # Node.js 서버
         proxy_http_version 1.1;
         proxy_set_header Upgrade $http_upgrade;
         proxy_set_header Connection 'upgrade';
         proxy_set_header Host $host;
         proxy_cache_bypass $http_upgrade;
     }
 }

1. 설정 저장 후 Nginx 테스트:

 sudo nginx -t

1. Nginx 재시작:

 sudo systemctl restart nginx

---

• 브라우저에서 서버 도메인 또는 ip주소으로 접속

---

다른 이슈사항

node.js 버전 문제

• ES Module을 사용하는 경우, Node.js 버전이 최소 14 이상이어야 하며, 16 이상을 권장합니다.버전을 확인하려면: node -v