Linux (Ubuntu) Code-server 설치: 웹 / iPad 에서 VsCode 사용하기.

아이패드를 구입하고 나서 집에 남는 라즈베리파이를 이용하여 VS Code를 돌리려고 했다.

(근데 결국 남는 PC를 사용함, 라즈베리파이에서 동작 가능함은 확인)

 

아이패드에서는 VS Code를 사용하지 못하기 때문에 서버에 Code-server를 띄워두고 웹에서 접속하는 방법으로 접근하려고 했다.

 

본인은 집 공유기가 포트포워딩과 DNS 서비스를 제공하여 도메인을 따로 등록하지 않아도 되었다.

(TPLink 사용중)

 

그리하여 TP LINK 공유기를 기준으로 설명한다.

 

준비물

1. 우분투(리눅스)를 돌릴 수 있는 무언가 (라즈베리파이, PC, EC2 등...)

 

1. code-server 설치

// 1. 설치
curl -fsSL https://code-server.dev/install.sh | sh

// 2. 실행
sudo systemctl enable --now code-server@[username]

// 3. config 수정
// password: [password] 부분의 [passowrd]만 수정하면 된다. (웹에서 접속시 필요)
sudo vi ~/.config/code-server/congif.yaml

// 4. config 저장 후 재실행
sudo systemctl restart code-server@[username]

 

2. nginx 설치

// 1. 설치
sudo apt install nginx

// 2. config 수정
sudo vi /etc/nginx/sites-available/default

// 3. 내용 수정
server {
        listen [외부에서 접속할때 포트];

        server_name sample.tplinkdns.com;		// 본인 DNS로 수정 필요

        location / {
                proxy_pass http://127.0.0.1:8080;		// code-server의 기본값(target)
                add_header Access-Control-Allow-Origin *;
                add_header Access-Control-Allow-Methods *;
                add_header Access-Control-Allow-Headers *;

                proxy_set_header Host $host;
                proxy_set_header Accept-Encoding gzip;
                proxy_set_header X-Forwarded-Host $host:$server_port;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection $http_connection;

                proxy_http_version 1.1;
        }
}

// 4. 저장 후 nginx 테스트
sudo nginx -t

// 5. start, enable nginx
sudo systemctl start nginx
sudo systemctl enable nginx

// (6. nginx 재실행 방법)
sudo nginx -s reload

 

3. 공유기 설정 (TP LINK 동적 DNS 설정)

TP-Link를 통해 동적 DNS 설정 (하단 Log in 하면 적용 가능)

 

고정 라우팅 설정 (해당 리눅스 PC 내부 네트워크를 target)

 

포트포워딩

 

본인의 경우 외부에서 들어오는 4401을 ssh(22)로 사용.

4490으로 들어오는 경우를 code-server로 설정.

 

설정이 모두 완료된 경우 내가 지정한 dns:port를 웹 브라우저에서 입력하면 접속이 가능하다.

 

접속시 비밀번호를 물어보는데 code-server config에서 설정한 password를 입력하면 된다.

 

 

다음과 같이 웹 브라우저에서 접속이 가능함.

 

---

https (ssl) 적용

 

1. 공유기에서 포트 포워딩 443 포트 open

 

2. 인증서 발급 (무료 인증서 발급 certbot)

https://seokbong.tistory.com/295

Certbot을 통해 무료 SSL 발급받기(임시 및 갱신)

 

 

3. nginx 재수정 

server {
        server_name seokbong.tplinkdns.com;

        listen 443 ssl;
        ssl_certificate /etc/letsencrypt/live/seokbong.tplinkdns.com/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/seokbong.tplinkdns.com/privkey.pem;

        include /etc/letsencrypt/options-ssl-nginx.conf;
        ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

        location /dosuno {
                proxy_pass http://127.0.0.1:5001;

                add_header Access-Control-Allow-Origin *;
                add_header Access-Control-Allow-Methods *;
                add_header Access-Control-Allow-Headers *;

                proxy_set_header Host $host;
                proxy_set_header Accept-Encoding gzip;
                proxy_set_header X-Forwarded-Host $host:$server_port;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection $http_connection;
        }
}


server {
        server_name seokbong.tplinkdns.com;

        listen 4490 ssl;
        ssl_certificate /etc/letsencrypt/live/seokbong.tplinkdns.com/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/seokbong.tplinkdns.com/privkey.pem;

        include /etc/letsencrypt/options-ssl-nginx.conf;
        ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

        location / {
                proxy_pass http://127.0.0.1:8080;
                add_header Access-Control-Allow-Origin *;
                add_header Access-Control-Allow-Methods *;
                add_header Access-Control-Allow-Headers *;

                proxy_set_header Host $host;
                proxy_set_header Accept-Encoding gzip;
                proxy_set_header X-Forwarded-Host $host:$server_port;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection $http_connection;

                proxy_http_version 1.1;
        }
}

server {
        if ($host = seokbong.tplinkdns.com) {
                return 301 https://$host$request_uri;
        }


        listen 80;
        server_name seokbong.tplinkdns.com;

        return 404;
}