윈도우11에 vscode를 설치하고 cloudflare tunnel로 외부연결하기

 Windows 11 환경에 VS Code를 설치하고 Cloudflare Tunnel을 통해 외부에서 접속하려면, VS Code에 내장된 웹 서버 기능(serve-web)을 활용하여 브라우저로 원격 개발 환경에 접속하는 방식이 가장 직관적이고 편리합니다.

다음 단계에 따라 설정을 진행할 수 있습니다.

1. VS Code 웹 서버 실행 (Windows 11)

Windows 11 PC에 VS Code를 설치한 후, 해당 기기에서 VS Code를 웹 서비스 형태로 띄워야 합니다.

  1. Windows에서 PowerShell을 엽니다.
  2. 아래 명령어를 입력하여 로컬 웹 서버를 구동합니다.
    code serve-web --host 127.0.0.1 --port 8000 --without-connection-token --accept-server-license-terms
    참고: --without-connection-token 옵션을 사용하면 별도의 로컬 비밀번호 없이 동작시킬 수 있습니다. 실제 접속 보안은 다음 단계의 Cloudflare Access를 통해 훨씬 안전하게 구축하게 됩니다.

2. Cloudflare 터널 생성

터널 환경을 손쉽게 구성하기 위해 Cloudflare Zero Trust 대시보드를 사용합니다.

  1. Cloudflare Zero Trust 대시보드에 로그인합니다.
  2. 왼쪽 메뉴에서 Networks > Connectors로 이동한 후 Create a tunnel을 클릭합니다.
  3. 터널 이름(예: vscode-win11)을 입력하고 저장합니다.


3. Cloudflared Windows 서비스 설치

Cloudflare와 Windows 11 PC를 안전하게 연결해 주는 데몬(cloudflared)을 설치해야 합니다.

  1. 터널 생성 직후 나타나는 환경 선택 화면에서 운영체제로 Windows를 선택합니다.
  2. 화면에 나타나는 설치용 PowerShell 명령어를 전체 복사합니다.
  3. Windows 11에서 PowerShell을 관리자 권한으로 실행하고, 복사한 명령어를 붙여넣어 실행합니다.
  4. 성공적으로 실행되면 cloudflared가 Windows 백그라운드 서비스로 자동 등록되며, 대시보드에서 터널 상태가 초록색 HEALTHY로 변경됩니다.

4. 퍼블릭 호스트네임 연결 (라우팅 설정)

외부에서 접속할 나만의 도메인 주소와 로컬 VS Code 웹 서버를 연결합니다.

  1. 대시보드의 터널 설정 창에서 Public Hostname 탭으로 이동하여 Add a public hostname을 클릭합니다.
  2. Public Hostname: 외부에서 접속할 도메인 주소(예: vscode.yourdomain.com)를 설정합니다.
  3. Service: 
    • Type: HTTP
    • URL: 127.0.0.1:8000 (1번 단계에서 설정한 포트)
  4. 설정을 저장합니다.

5. Cloudflare Access를 통한 보안 설정 (필수 권장)

개인 개발 환경이 웹에 그대로 노출되면 매우 위험하므로, 본인만 접속할 수 있도록 이메일 인증을 추가해야 합니다.[3]

  1. Zero Trust 대시보드에서 Access > Applications 메뉴로 이동하여 Add an application을 클릭합니다.
  2. Self-hosted를 선택하고, 앞서 만든 도메인(vscode.yourdomain.com)을 애플리케이션 주소로 등록합니다.
  3. Policies(정책) 단계에서 새로운 정책을 만들고, Action: Allow로 설정한 뒤 Include 규칙을 Emails로 선택하여 본인의 이메일 주소를 입력합니다.

이제 외부 PC나 태블릿의 웹 브라우저에서 https://vscode.yourdomain.com에 접속하여 이메일 OTP 코드를 입력하면, Windows 11 PC에서 실행 중인 VS Code 환경을 원격으로 안전하게 사용할 수 있습니다.


출처
[1] CLOVER🍀 https://kazuhira-r.hatenablog.com
[2] Is there a way to Serve vscode on web on a subpath https://stackoverflow.com/questions/77093430/is-there-a-way-to-serve-vscode-on-web-on-a-subpath
[3] Self Hosted Code Server secured by Cloudflare Tunnel https://www.youtube.com/watch?v=ivuv5MW3wD8
[4] Windows 11 PC의 WSL에 Cloudflare Tunnel을 이용해 외부에서 SSH ... https://minu.blog/posts/Cloudflare-Tunnel%EB%A1%9C-WSL-SSH-%EC%A0%91%EC%86%8D%ED%95%98%EA%B8%B0/
[5] Windows https://developers.cloudflare.com/cloudflare-one/networks/connectors/cloudflare-tunnel/do-more-with-tunnels/local-management/as-a-service/windows/
[6] code-server-remote-ide-wsl2 | Skills... - LobeHub https://lobehub.com/skills/adaptationio-skrillz-code-server-remote-ide-wsl2
[7] Cloudflare Tunnel Ports 502 when VS-CODE Remote Tunnel on host https://www.reddit.com/r/CloudFlare/comments/16bw2ij/cloudflare_tunnel_ports_502_when_vscode_remote/
[8] Secure Remote Access with Cloudflare Tunnels - Anubhav Gain https://mranv.pages.dev/posts/cloudflare-tunnels-secure-access-guide/
[9] wayum999/tunnelfy: Manage Cloudflare tunnels from this ... - GitHub https://github.com/wayum999/tunnelfy
[10] Cloudflare Tunnel https://marketplace.visualstudio.com/items?itemName=IvanArjona.cloudflaretunnel
[11] Client Setup on Windows & VS Code - Notebook https://blog.goodmeow.my.id/client-setup-on-windows-vs-code/
[12] Preview Local Projects with Cloudflare Tunnel https://developers.cloudflare.com/pages/how-to/preview-with-cloudflare-tunnel/
[13] Run a tunnel · Cloudflare Zero Trust docs https://ts.cloudflare.community/cloudflare-one/connections/connect-apps/install-and-setup/tunnel-guide/local/run-tunnel/
[14] Cloudflare Tunnel を systemctl で実行する際の config.yml ... https://zenn.dev/ohashi_reon/articles/7998a85ec2c069
[15] Run as a service on Windows · Cloudflare Zero Trust docs https://cloudflare-docs.justalittlebyte.ovh/cloudflare-one/connections/connect-apps/install-and-setup/tunnel-guide/local/as-a-service/windows/
[16] How to Install Cloudflare Warp on Windows [2026 Full Guide] https://www.youtube.com/watch?v=VyDf74plWbw
[17] Cannot connect in cloudflared ssh · Issue #503 · cloudflare/cloudflared https://github.com/cloudflare/cloudflared/issues/503
[18] cloudflared tunnel run https://www.fig.io/manual/cloudflared/tunnel/run
[19] How can I use a proxy for remote development with VS Code using SSH? https://stackoverflow.com/questions/75557679/how-can-i-use-a-proxy-for-remote-development-with-vs-code-using-ssh



댓글

댓글 쓰기