라즈베리파이4 서버 구축기 - (4) 외부에서 내 프로젝트 접속하기

기존에 내가 게시글에서

 

(4) 외부 접속 설정 (선택)

1. 공유기 포트포워딩 설정 예) 80 포트를 라즈베리파이의 80 포트로 포워딩

2. DDNS 설정 (선택): 외부에서 접속할 수 있도록 도메인 주소 할당 (No-IP, DuckDNS 등 사용)

3. SSL 적용 (선택): certbot으로 Let's Encrypt 인증서 설정하면 HTTPS 접속 가능...(생략)

 

....뭐 이런식으로 썼었는데, 이것도 AI한테 물어봐서 정보를 얻은거라 확실하진 않아서 내가 직접 찾아봤다.

 

Let's Encrypt 인증서란?

무료로 HTTPS 보안 연결을 가능하게 해주는 인증서 발급기관. 

인터넷에선 보안을 위해 데이터를 암호화 해주는 HTTPS 인증서를 사용해야 한다(이건 기존의 나도 알고 있던것). HTTPS를 쓰면 데이터가 암호화되고, 로그인 정보 및 쿠키가 보호된다. 

웹페이지가 HTTPS가 되려면 서버에 인증서가 있어야 하는데, 이 인증서는 (1) 이 서버가 진짜임을 증명 (2) 암호화 통신 시작을 위한 키 제공 등의 역할을 하고 있다.

• Let's Encrypt : 인증서를 발급해주는 기관(CA), 실제 인증서를 만들어서 내려줌
• Certbot : 인증서를 자동으로 받아오는 프로그램. Let's Encrypt에 요청 보내고 인증서 받아서 서버 설치하고 만료되면 자동 갱신까지 해주고....

그러다가 Tailscale를 알게됬다. 

Tailscale이란?

WireGuard 프로토콜을 기반으로 한 현대적인 매쉬 VPN솔루션으로, 복잡한 네트워크 설정없이 장치 간 안전하고 빠른 연결을 제공한다. 뭔 말인지 이해 안간다면, "집 밖에서도 집 안에 있는것처럼 접속하게 만들어주는 도구"라고 설명할 수 있을 것이다. 

 

기존의 방식은 

다른 장소 → 인터넷 → 공유기(포트포워드) → 라즈베리파이(홈서버)

의 방법을 이용하기 때문에 외부 접속 시 포트포워드 설정, 공인IP 및 DDNS 설정, 보안 등의 번거로움이 있었다. 

Talescale은 공유기, 포트포워딩 등의 선행 작업이 모두 무시된다.

 

1️⃣ 가짜 내부 네트워크를 만듦

집이든 회사든 어느 장소든 상관 없이 모든 기기를 같은 네트워크에 있는 것처럼 만들어주는데, 그래서 홈서버에는 Tailscale 전용 IP가 생긴다.

100.x.x.x (Tailscale 전용 IP)

 

2️⃣ 그 주소로 바로 접속 가능

터미널(리눅스, 윈도우 powershell, 맥)에서 다음과 같이 작성하면 열린다. 

ssh pi@100.x.x.x

 

단 저렇게 하면 당연히 일반 사용자들은 들어올 수 없기 때문에.... 난 Tailscale Funnel 무료 버전을 사용하기로 했다.

 

1. 라즈베리파이에 웹서버 실행

npm run dev, http://localhost:3000 등으로 라즈베리파이 네부에서 접속이 되어 있어야 한다. 

 

2. Tailscale 설치

라즈베리파이 os에서 curl명령어를 쓸 수 있으므로

curl -fsSL https://tailscale.com/install.sh | sh

를 작성하고, 설치 후

sudo tailscale up

를 통해 로그인 창이 뜨면 로그인을 한다.

 

3. Funnel 활성화

sudo tailscale funnel 3000

라즈베리파이의 3000번 포트를 외부에 공개하겠다는 뜻으로, 각 포트에 맞게 작성하면 된다.

 

4. URL 생성 확인

명령을 실행하면

https://xxxx.ts.net

가 나오는데, 이게 바로 외부에서 접속 가능한 URL이다. 

다만 나의 경우 Vite + Typescript + React를 사용한 web단과 Spring Boot를 사용한 WAS단이 따로 나뉘어져 있기 때문에 리버스 프록시(Nginx)를 사용해야 한다.

---

외부 (https://xxx.ts.net)
        ↓
     nginx
   ├─ /        → React (정적 파일)
   └─ /api     → Spring Boot (8080)

 

전체 단계는 다음과 같다.

(1) React 빌드

(2) NGINX 설치

(3) NGINX 설정

(4) Spring Boot 실행

(5) Tailscale Funnel 연결

1. React 빌드

라즈베리 파이에서 react 프로젝트를 빌드한다.

npm run build

결과는 다음과 같을거다.

dist/
 ├─ index.html
 ├─ assets/

 

2. nginx 설치

sudo apt update
sudo apt install nginx -y

설치 확인은

nginx -v

로 확인한다.

 

3. nginx 설정

설정 파일 열기

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

 기존 내용 다 지우고 아래로 교체한다.

server {
    listen 80;
    server_name _;

    # React (프론트)
    root /home/pi/project/dist;
    index index.html;

    location / {
        try_files $uri /index.html;
    }

    # Spring Boot (백엔드)
    location /api/ {
        proxy_pass http://localhost:8080/;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

중요 포인트는, root경로를 내 dist 폴더 위치로 바꾸는 것이다.

root /home/pi/project/dist;

 

4. nginx 재시작

sudo systemctl restart nginx

 

5. Spring Boot 실행

maven 빌드 명령어를 실행해서 jar 파일을 만드는 것이 핵심이다.

mvn clean package

• clean : 이전에 빌드했던 찌꺼기 파일을 지움
• package: 소스 코드를 컴파일하고 테스트를 걸쳐 target폴더 안에 .jar파일을 생성함

성공 시 target/ 폴더 안에 프로젝트명-0.0.1-SNAPSHOT.jar과 같은 파일이 생성된다. 그리고 이 파일을 라즈베리파이 컴퓨터로 보내야 한다.

# 형식: scp [파일경로] [사용자]@[라즈베리파이IP]:[복사할경로]
scp target/*.jar pi@raspberrypi.local:/home/pi/project/app.jar

위 명령어 작성 시 내 pc에 있던 jar파 일이 라즈베리파이의 /home/pi/project/폴더로 app.jar라는 이름으로 복사된다.

 

6. Tailscale Funnel 연결

sudo tailscale funnel 80

 

 

[참고 자료]

https://velog.io/@zvyg1023/Certbot-ssl-%EC%9D%B8%EC%A6%9D%EC%84%9C-%EB%B0%9C%EA%B8%89%EB%B0%9B%EA%B8%B0

Let's Encrypt - Certbot으로 ssl 인증서 발급받기

https://devopslog.tistory.com/169

Tailscale 가이드 - 안전한 매쉬 VPN 활용법

https://www.youtube.com/watch?v=vCM-demQ4MY

https://github.com/jacking75/NewbieGameServerProgrammerLearningMaterials/blob/main/Tailscale.md

NewbieGameServerProgrammerLearningMaterials/Tailscale.md at main · jacking75/NewbieGameServerProgrammerLearningMaterials

https://cwpack0730.tistory.com/117

[NGINX] nginx reverse proxy