옛날 노트북을 웹 서버로 활용하여 포트폴리오 사이트 호스팅 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

• 웹 개발자, 프론트엔드/백엔드 개발자, DevOps 초보자
• 중급 수준의 기술 이해가 필요

핵심 요약

• React.js & Node.js로 포트폴리오 사이트 구축 (프론트엔드/백엔드 기술 스택)
• Docker를 사용하여 배포 프로세스를 간소화 및 자동화
• Cloudflare Tunnel을 통해 보안과 유연성 있는 외부 접근 구현
• Google Analytics 통합으로 방문자 분석 가능

섹션별 세부 요약

1. **왜 자가 호스팅을 선택했나요?**

• 노트북 재사용으로 비용 절감
• 기술 습득과 DevOps 경험 확대
• 자원 낭비 방지

2. **기술 스택**

• React.js (프론트엔드), Node.js (백엔드), CSS3 (스타일링)
• Docker (컨테이너화), Nginx (역방향 프록시), Cloudflare Tunnel (보안 연결)

3. **초기 설정**

• 저장소 클론 및 의존성 설치: git clone, npm install
• .env 파일에 Google Analytics ID 설정: REACT_APP_GA4_MEASUREMENT_ID=G-XXXXXX

4. **Docker로 컨테이너화**

• docker-compose up -d 명령어로 애플리케이션 실행
• docker-compose down으로 서버 종료
• 볼륨 마운트를 통해 실시간 업데이트 지원

5. **Cloudflare Tunnel vs. 포트 전달**

• 포트 전달의 단점: ISP 제한, 보안 취약, 네트워크 이동 시 재설정 필요
• Cloudflare Tunnel의 장점: 암호화된 연결, 모든 ISP 호환, 라우터 접근 불필요

6. **Cloudflare Tunnel 설정**

• 설치 및 인증: chmod +x cloudflare/install_cloudflared.sh, ./cloudflare/install_cloudflared.sh
• 터널 생성 및 DNS 설정: cloudflared tunnel create , cloudflared tunnel route dns

7. **Google Analytics 통합**

• 계정 생성 후 Measurement ID 설정
• .env 파일에 ID 입력: REACT_APP_GA4_MEASUREMENT_ID=G-XXXXXX

8. **향후 SEO 최적화**

• 메타 태그, 스키마 마크업, 속도 최적화 등 SEO 전략 공유 예정

결론

• Cloudflare Tunnel은 보안과 유연성을 갖춘 외부 접근 방식으로 추천
• Docker를 통해 반복 가능한 배포 프로세스 구축
• Google Analytics와 Cloudflare Analytics를 활용한 실시간 트래픽 분석 필수
• SEO 최적화 전략은 향후 포스팅에서 자세히 공유 예정