[GCP Tutorial] GCP + Code Server

https://sionuu.com/amazon%20web%20service/2020/11/17/code-server/

이 분의 글을 많이 참고했다.

 

1. Install Nginx, Code Server on GCP VM Instance

 programmers에 있는 문제들을 lv3까지 문제들을 거의 다 풀어서 이제 baekjoon이나 codeforce 등의 다른 ps 사이트로 넘어가야 한다. 그러기 위해서 c++ 실행환경을 갖춰야 한다. 언제까지고 online gdb c++을 쓸 수는 없으니까.

 

 그래서 GCP에 VS Code Server를 올려서 c++ 개발/디버깅 환경을 갖추고자 한다. AWS를 하지 않고 GCP를 한 이유는 GCP는 37만원 상당의 무료 크레딧을 주기 때문이다. 유료 회원으로 업그레이드(사용량으로 인한 과금이 발생하면 그 금액을 청구하는)한다면 그 크레딧이 소진될 때 까지 사용할 수 있고, 익숙하기 때문도 있고. 아무튼 그래서 GCP에 올려볼 것이다.

 

Create VM Instance, Install Nginx, Code Server

 

일단 VM instance 하나를 만든다.

 일단 instance 하나를 만들고, ssh로 접속한다.

 

sudo apt-get update
sudo apt-get install nginx
sudo apt-get update
sudo su
vim /etc/nginx/sites-enabled/default

 위 명령어를 쳐서 nginx를 깔고, 

 

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        location / {
                proxy_pass http://localhost:8080/;
                # proxy_pass http://localhost:8081/; # 포트 변경 시
                proxy_set_header Host $host;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection upgrade;
                proxy_set_header Accept-Encoding gzip;
        }
}

 nginx config를 모두 지우고 이 글을 복붙해 넣는다. (만약 포트를 8080이 아닌 다른 것을 쓰고 싶다면, localhost:8080 부분의 포트를 바꾸면 된다.)

 

service nginx reload
curl -fsSL https://code-server.dev/install.sh | sh
code-server

 다음으로 위 명령어를 입력해 code-server를 잠깐만 실행시켜 볼 것이다. 잠깐만 실행시키는 이유는 code-server의 config yaml file을 만들기 위해서이다. 실행했다면 Ctrl + C로 프로세스를 종료하자.

 

vim ~/.config/code-server/config.yaml

# 포트 변경 시
bind-addr = 127.0.0.1:8081

 config가 만들어져 있다. 나오는 code-server config의 password를 원하는 대로 입력한다. 만약 앞에서 포트를 다른 것으로 변경했다면 config.yaml의 bind-addr의 포트도 동일하게 설정하면 된다.

 

service nginx start
code-server

 

 위 명령어로 nginx와 code-server를 실행시키고 GCP VM instance의 external IP를 주소창에 넣으면 코드서버가 실행된다. 저장해 둔 password를 입력하면 들어가진다. 물론 http로 해야 한다! 아직까지 https 설정은 하지 않았다.

 

 와! VS Code가 실행되었다. 그러면 이제부터는 c++ 실행 및 디버깅 환경구성을 해 보자.

 

service nginx start
code-server

 만약 instance를 껐다 키면 위 명령어를 수행해야 한다. 이렇게 하기 귀찮으면 instance가 켜지만 항상 code-server가 실행되게 nginx를 건드려야 한다.

 

su root

# 서비스 등록 (최초1회 실행)
sudo systemctl enable --now code-server@root

# 실행
sudo systemctl start code-server@root

# 중지
sudo systemctl stop code-server@root

# 재시작
sudo systemctl restart code-server@root

# 상태
sudo systemctl status code-server@root

 이 명령어만 치면 위 명령어 3개를 입력하면 container를 껐다 켜도 바로 code-server가 실행된다!

 

 

2. VS Code C++ Running Environment Configure

Install C++ Extensions

위 2개 extension을 설치하자.

 c++을 돌리기 위해 extension이 있어야 한다. 그리고 여기 없는 extension이 하나 있는데, C/C++ Tools이다.

 

# https://github.com/microsoft/vscode-cpptools/releases
# 최신 버전은 위 링크에서 확인할 수 있다.
# sudo wget https://github.com/microsoft/vscode-cpptools/releases/download/x.xx.x/cpptools-linux.vsix

# ex)
cd ~
sudo wget https://github.com/microsoft/vscode-cpptools/releases/download/1.14.3/cpptools-linux.vsix

 이 명령어를 쳐서 cpptools를 다운받자.

 

 그리고 ctrl + shift + p : extensions: install from vsix를 선택해 방금 받은 파일을 실행하면 깔린다.

 

그러면 C/C++ tools가 설치된다.

 잘 깔린 것을 확인할 수 있다.

 

 

Install Compiler and Debugger

sudo apt-get update
sudo apt-get install g++
g++ -v

sudo apt-get update
sudo apt-get install gdb
gdb -v

 그러면 이제 g++, gdb를 install 해 보자.

 

 다 깔렸으면 적당히 아무 코드를 작성하고 ctrl + F5 - C++ (GDB/LLDB) - g++를 누르자.

 

디버깅이 잘 된다!

 

 와! 이제 행복 c++ 코딩을 할 수 있게 되었다.

 

 

 

3. Domain 연결 및 SSL 설정

 그러나 조금 불안하다. code-server에 들어갔을 때 비밀번호를 설정해 두긴 했지만 GCP에 고정 IP를 할당했기 때문에 누군가가 해당 IP를 통해 송수신하는 데이터를 스니핑한다면 문제가 생길 것이다. 편리함을 위해 git token을 등록해 두었기 때문에 git이 털릴 수도 있다. 따라서 https 설정을 할 것이다.

 

Domain 구입 및 IP 연결

 먼저 domain을 하나 사야 한다. 나는 gabia에서 구매했다.

 

gabia의 hyelie domain 목록들

 

 gabia를 선택한 이유는 국내에서 활발하게 거래가 이루어지는 사이트이며, 상당히 저렴한 가격에 도메인을 팔고 있기 때문이다. .com이나 .co.kr, .kr과 같이 유명한 도메인들도 1년에 만원 선에 팔고 있다. 심지어 .shop은 500원이다(...) 나는 마음에 들었던 hyelie.site라는 도메인을 1800원에 구매했다.

 

ip와 dns 연결

 구매했으면 IP를 연결해야 한다. My가비아 - DNS 관리 툴 - 내 도메인 클릭 - dns 설정을 하면 위 창이 보인다. 여기서 type은 a로, host는 원하는 string을 설정하면 되고 값/위치는 연결할 IP를 넣어 주면 된다. 나의 경우는 GCP에서 설정한 고정 IP를 넣어 주었다.

 만약 host를 www로 하면 'www.hyelie.site'로 접근되며 abc로 하면 'abc.hyelie.site'로 접근되는 식이다.

 

 

SSL Setting

sudo su
vim /etc/nginx/sites-enabled/default

 container에 접속해서 위 명령어를 입력한다. nginx config file이며, 원래 입력했던 값을 지우고 아래와 같이 변경할 것이다.

 

server {
        server_name YOUR_DOMAIN;
        location / {
                proxy_pass http://localhost:8080/;
                proxy_set_header Host $host;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection upgrade;
                proxy_set_header Accept-Encoding gzip;
        }
}

 server_name 뒤에는 당신의 사이트를 입력하면 된다.

 

sudo snap install --classic certbot
sudo ln -s /snap/bin/certbot /usr/bin/certbot
sudo certbot --nginx

 이후에는 certbot을 이용해 https 설정을 할 것이다. 입력하면 email을 입력하고 SSL을 적용하는 등 몇 가지를 입력해야 하는데 잘 해석해서 입력해 주면 된다.

 

code-server에 https가 적용되었다.

 그러면 code-server에 https가 적용되었다!

 

 

*** 이외 VS code 설정할 것들

Ctrl + Alt + W로 현재 탭 닫기

Ctrl + `로 quick fix

terminal 기본설정 bash로 하기