우분투 홈서버에 Cloudflare & tailscale & nginx 설정하기

홈서버 네트워크 설정 가이드

1. Tailscale 설치 및 설정

VPN - 내부 전용 접근

용도

어디서든 안전하게 내 서버에 직접 접속

1.1 Tailscale 설치

# Tailscale 설치
curl -fsSL <https://tailscale.com/install.sh> | sh

# Tailscale 시작 및 인증
sudo tailscale up

# 상태 확인
tailscale status
tailscale ip -4

1.2 Tailscale 자동 시작 설정

# 서비스 활성화
sudo systemctl enable tailscaled
sudo systemctl start tailscaled

---

2. Nginx 설치 및 설정

reverse proxy - 내부 라우터

용도

• 한 서버에서 여러 서비스를 도메인별로 분배

2.1 Nginx 설치

# Nginx 설치
sudo apt update
sudo apt install nginx -y

# Nginx 시작 및 자동 시작 설정
sudo systemctl start nginx
sudo systemctl enable nginx

# 상태 확인
sudo systemctl status nginx

2.2 Nginx 기본 설정

# 기본 설정 파일 백업
sudo cp /etc/nginx/nginx.conf /etc/nginx/nginx.conf.backup

# sites-available 디렉토리로 이동
cd /etc/nginx/sites-available/

2.3 서비스별 설정 파일 생성

예시: 포트 8080 서비스 설정

sudo nano /etc/nginx/sites-available/myapp

server {
    listen 80;
    server_name myapp.aruu.dev;

    location / {
        proxy_pass <http://localhost:8080>;
        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;
    }
}

2.4 설정 활성화

# 심볼릭 링크 생성
sudo ln -s /etc/nginx/sites-available/myapp /etc/nginx/sites-enabled/

# 설정 테스트
sudo nginx -t

# Nginx 재시작
sudo systemctl reload nginx

---

3. Cloudflare Tunnel 설치 및 설정

외부 공개 - 인터넷 게이트웨이

용도

• 내 홈서버를 누구나 접속 가능하도록 공개

특징

• 공인 IP 없이도 외부 접근 가능
• 포트포워딩 불필요
• HTTPS 자동 적용
• DDoS 방어 & CDN 캐싱

3.1 cloudflared 설치

# cloudflared 다운로드 및 설치
wget -q <https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64.deb>
sudo dpkg -i cloudflared-linux-amd64.deb

# 설치 확인
cloudflared --version

3.2 Cloudflare 인증

방법 A: 기존 터널 사용 (credential 파일 복사)

# credential 파일 디렉토리 생성
sudo mkdir -p /root/.cloudflared

# 기존 서버에서 credential 파일 복사
# 파일 위치: ~/.cloudflared/<TUNNEL-ID>.json
sudo cp <TUNNEL-ID>.json /root/.cloudflared/

방법 B: 새로 인증

# 브라우저로 인증
cloudflared tunnel login

3.3 config.yml 설정

sudo nano /root/.cloudflared/config.yml

tunnel: <터널-ID-또는-이름>
credentials-file: /root/.cloudflared/<TUNNEL-ID>.json

ingress:
  # 첫 번째 서비스
  - hostname: myapp.aruu.dev
    service: <http://localhost:80>

  # 두 번째 서비스
  - hostname: another.aruu.dev
    service: <http://localhost:80>

  # 기본 라우트 (필수)
  - service: http_status:404

3.4 Cloudflare 대시보드에서 DNS 설정

Cloudflare Zero Trust > Networks > Tunnels에서:

1. 기존 터널 선택
2. Public Hostname 추가
   • Subdomain: myapp
   • Domain: aruu.dev
   • Service: http://localhost:80

3.5 서비스로 등록 및 실행

# 서비스 설치
sudo cloudflared service install

# 서비스 시작
sudo systemctl start cloudflared
sudo systemctl enable cloudflared

# 상태 확인
sudo systemctl status cloudflared

# 로그 확인
sudo journalctl -u cloudflared -f

---

4. 전체 구조 확인

4.1 연결 흐름

외부 인터넷
    ↓
Cloudflare Tunnel (myapp.aruu.dev)
    ↓
Nginx (localhost:80)
    ↓
애플리케이션 (localhost:8080)

4.2 상태 확인 명령어

# Tailscale 상태
tailscale status

# Nginx 상태
sudo systemctl status nginx

# Cloudflare Tunnel 상태
sudo systemctl status cloudflared

# Nginx 설정 테스트
sudo nginx -t

# 포트 리스닝 확인
sudo netstat -tulpn | grep -E ':(80|8080)'

4.3 로그 확인

# Nginx 에러 로그
sudo tail -f /var/log/nginx/error.log

# Nginx 액세스 로그
sudo tail -f /var/log/nginx/access.log

# Cloudflare Tunnel 로그
sudo journalctl -u cloudflared -f

---

신규 서비스 런칭 시 가이드

전제 조건

• FE 서비스: interview.aruu.dev → http://localhost:3000 (예시)
• BE API 서비스: interview-api.aruu.dev → http://localhost:8080 (예시)

---

1. Nginx 설정 추가

1.1 FE용 Nginx 설정 파일 생성

sudo nano /etc/nginx/sites-available/interview-fe

server {
    listen 80;
    server_name interview.aruu.dev;

    location / {
        proxy_pass <http://localhost:3000>;
        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;

        # WebSocket 지원 (Vue.js HMR 등에 필요)
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

1.2 BE API용 Nginx 설정 파일 생성

sudo nano /etc/nginx/sites-available/interview-be

server {
    listen 80;
    server_name interview-api.aruu.dev;

    location / {
        proxy_pass ;
        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;

        # CORS 헤더 (필요시)
        add_header 'Access-Control-Allow-Origin' '<https://interview.aruu.dev>' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type' always;

        # OPTIONS 요청 처리
        if ($request_method = 'OPTIONS') {
            return 204;
        }
    }
}

1.3 Nginx 설정 활성화

# 심볼릭 링크 생성
sudo ln -s /etc/nginx/sites-available/interview-fe /etc/nginx/sites-enabled/
sudo ln -s /etc/nginx/sites-available/interview-be /etc/nginx/sites-enabled/

# 설정 파일 문법 확인
sudo nginx -t

# Nginx 재시작
sudo systemctl reload nginx

---

2. Cloudflare Tunnel 설정 수정

2.1 config.yml 수정

sudo nano /root/.cloudflared/config.yml

tunnel: <터널-ID-또는-이름>
credentials-file: /root/.cloudflared/<TUNNEL-ID>.json

ingress:
  # 기존 서비스들...
  - hostname: myapp.aruu.dev
    service: <http://localhost:80>

  # 신규 FE 서비스
  - hostname: interview.aruu.dev
    service: <http://localhost:80>

  # 신규 BE API 서비스
  - hostname: interview-api.aruu.dev
    service: <http://localhost:80>

  # 기본 라우트 (필수, 맨 마지막에 위치)
  - service: http_status:404

2.2 Cloudflare Tunnel 재시작

# 설정 테스트
sudo cloudflared tunnel ingress validate

# 서비스 재시작
sudo systemctl restart cloudflared

# 상태 확인
sudo systemctl status cloudflared

# 로그 확인
sudo journalctl -u cloudflared -f

---

3. Cloudflare 대시보드 DNS 설정

3.1 Cloudflare Zero Trust 접속

1. https://one.dash.cloudflare.com/ 접속
2. Networks > Tunnels 선택
3. 기존 터널 선택

3.2 Public Hostname 추가 (FE)

• Subdomain: interview
• Domain: aruu.dev
• Type: HTTP
• URL: localhost:80

3.3 Public Hostname 추가 (BE)

• Subdomain: interview-api
• Domain: aruu.dev
• Type: HTTP
• URL: localhost:80

---

4. 확인 및 테스트

4.1 로컬 연결 확인

# 포트 리스닝 확인
sudo netstat -tulpn | grep -E ':(3000|8080)'

# FE 로컬 접근 테스트
curl <http://localhost:3000>

# BE 로컬 접근 테스트
curl <http://localhost:8080/api/health>

4.2 Nginx 프록시 확인

# FE Nginx 확인
curl -H "Host: interview.aruu.dev" <http://localhost:80>

# BE Nginx 확인
curl -H "Host: interview-api.aruu.dev" <http://localhost:80>

4.3 외부 접근 확인

# FE 외부 접근
curl <https://interview.aruu.dev>

# BE 외부 접근
curl <https://interview-api.aruu.dev/api/health>

4.4 로그 모니터링

# Nginx 로그
sudo tail -f /var/log/nginx/access.log

# Cloudflare Tunnel 로그
sudo journalctl -u cloudflared -f

---

5. Spring Boot CORS 설정 (BE 필요시)

5.1 WebMvcConfigurer 설정

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("<https://interview.aruu.dev>")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}

---

6. 체크리스트

• [ ] Nginx FE 설정 파일 생성 및 활성화
• [ ] Nginx BE 설정 파일 생성 및 활성화
• [ ] Nginx 설정 테스트 (sudo nginx -t)
• [ ] Nginx 재시작
• [ ] Cloudflare config.yml 수정
• [ ] Cloudflare Tunnel 재시작
• [ ] Cloudflare 대시보드에서 FE Public Hostname 추가
• [ ] Cloudflare 대시보드에서 BE Public Hostname 추가
• [ ] FE 애플리케이션 실행 (포트 3000)
• [ ] BE 애플리케이션 실행 (포트 8080)
• [ ] 로컬 연결 테스트
• [ ] 외부 접근 테스트
• [ ] CORS 설정 확인 (FE → BE API 호출)

---

전체 흐름

외부 인터넷
    ↓
<https://interview.aruu.dev>
<https://interview-api.aruu.dev>
<https://myapp.aruu.dev>
    ↓
Cloudflare Tunnel (모두 localhost:80으로 전달)
    ↓
Nginx (포트 80에서 대기)
    ↓
server_name 확인 후 분기:
├─ interview.aruu.dev → localhost:3000 (FE)
├─ interview-api.aruu.dev → localhost:8080 (BE)
└─ myapp.aruu.dev → localhost:9000 (다른 서비스)

핵심 정리

✅ 모든 외부 요청은 Cloudflare Tunnel을 통해 localhost:80으로 들어옴

✅ Nginx는 server_name(도메인)을 보고 적절한 내부 포트로 라우팅

✅ 각 애플리케이션은 자신의 포트에서 실행만 하면 됨

• FE: 3000
• BE: 8080
• 다른 서비스: 9000

✅ 새 서비스 추가할 때:

1. 새 포트로 애플리케이션 실행
2. Nginx 설정 파일 하나 추가
3. Cloudflare 대시보드에서 DNS만 추가