🟨 목 차 🟨
1. VSCODE 란 ?
1-1. VSCODE 주요 기능
1-2. VSCODE 특징
1-3. Visual Studio Code와 Visual Studio 차이
1-4. 내가 VSCode를 사용하려는 이유
2. aws에서 빌린 ec2-ubuntu와 VSCode 연동하기
3. aws에서 빌린 ec2-ubuntu와 VSCode 연동 후 간단한 설정
3-1. 폴더열기 - /home 설정
3-2. 파일로 이동(Cmd + p)
3-3. VSCODE에서 PHP 사용
3-3-1. VSCODE에서 PHP 사용할 때 permission denied 오류
3-4. VSCODE에서 MySQL 연동
이번 시간에는 VSCode란 무엇이고 무엇의 장점이 있어서 연동을 하는지, 연동 방법, 연동 후에 VSCode에서 Apache 및 PHP 적용 ,permission deniede 오류를 배워보겠습니다.
◼️ 1. VSCODE 란 ? ◼️
비쥬얼 스튜디오 코드(Visual Studio Code)는 마이크로소프트가 개발한 윈도우, macOS, 리눅스용으로 개발한 소스 코드 편집기이다.
◼️ 1-1. VSCODE 주요 기능
- 다양한 프로그래밍 언어 지원
[ 자바스크립트, 타입스크립트 , CSS, HTML는 기본으로 포함되어 있으나 그 외 언어 확장은 마켓플레이스로부터 확인 후 무료 다운] - 플러그인을 통해 편집 기능 추가 및 프로그래밍 언어 지원 등 확장 기능 추가
[ Git 연동, 한글 언어팩 등 ] - 디버깅 지원
- Git 제어
- 구문 강조 기능
- SSH 접속
◼️ 1-2. VSCODE 특징
- 맥 OS, 리눅스, 윈도우 등 메이저 운영체제들을 지원
- 인텔리센스[ 코드 자동 완성, 변수 타입, 함수 정의, 모듈 임포트 등 ]
- 디버깅, 리팩토링, 빌트인 깃Git, Diff 뷰어, 스니펫 등 기본으로 포함됨
- 다양한 확장을 지원하며, 이를 통해 100개 이상의 언어 지원
- 웹 기반 기술로 만들어져 있으며, 타입스크립트로 확장 개발 가능
- 마켓플레이스에 15,000개 이상의 확장이 공개되어있음[ 대부분 무료 ]
- 모든 기능에 대한 단축기를 자유롭게 변경 가능
- Application 안에서도 바로 검색하고 설치하는 것이 가능하다.
◼️ 1-3. Visual Studio Code와 Visual Studio 차이
가장 큰 차이는 Visual Studio Code는 Visual Studio와 다르게 IDE(코딩, 디버그, 컴파일, 배포 등 프로그램 개발에 관련된 모든 작업을 하나의 프로그램 안에서 처리하는 환경을 제공하는 소프트웨어)가 아니므로, 빌더가 내장되어 있지 않어 Visual Studio Code에서 빌드를 하기 위해선 마켓플레이스에서 확장 기능을 추가하여야 한다.
==> 즉, Visual Studio Code는 빌드가 지원되지 않는데, 마켓플레이스에서 원하는 빌더의 확장 기능을 추가하면 가능하다.
◼️ 1-4. 내가 VSCode를 사용하려는 이유
나의 상황은 현재 aws에서 ec2-ubuntu를 빌려서 Apache, PHP, MySQL을 설치해서 사용하고 있다.
이것들을 터미널 개발 환경(쉘)이 아닌 인텔리센스 [ 코드 문법 자동 완성, 변수 타입, 함수 정의, 모듈 임포트 등 ] 기능과 하나의 툴에서 개발을 하고 싶은 생각이 있었고, 파일명을 검색창에 검색을 하면 손쉽게 파일을 찾고 수정할 수 있는 기능이 필요했다.
[ Apache, PHP는 VSCode로 파일을 손쉽게 수정하여 결과를 확인 할 수 있으며, MySQL은 Workbench 툴을 이용하여 만들고 VSCode와 연동하여 간단하게 편집하는 방향으로 잡았다. ]
그렇게 하기 위해선 VSCode에서 SSH(서로 통신을 할 때 보안적으로 안전하게 통신을 하기 위해 사용하는 프로토콜,비밀번호를 사용하지 않고 Key를 사용)를 통해 원격서버에 접속하여 해결 할 수 있었다.
◼️ 2. aws에서 빌린 ec2-ubuntu와 VSCode 연동하기 ◼️
VSCode가 다운받았다고 가정을 하며 진행하도록 하겠습니다.
[ 다운로드를 받지 못하셨다면 https://code.visualstudio.com/ 에서 다운받아주세요. ]
1. 한국어로 보면 쉽기 때문에 VSCode 실행 후 마켓플레이스에서 한국어 확장 기능을 깔아준다.
2. 마켓플레이스에서 Remote -SSH 확장 기능을 설치한다.
3. Remote - SSH의 톱니바퀴를 클릭 -> 확장 설정을 클릭한다.
4. Config File 부분에 AWS 서버에서 다운로드 받은 키파일 폴더 위치에 있는 config의 경로를 넣어준다. 경로를 넣어줬다면 반드시 저장버튼 혹은 Ctrl+S (Mac에서는 Cmd+S)를 눌러 저장시켜준다.
[ 나는 경로가 ~/.ssh/ 디렉토리 안에 config라는 파일을 만들어 Host, HostName, User, IdentityFile 을 입력해줘서 config 파일을 넣어줌
config 파일을 만들지 않은 사람은 밑에 config 파일 만드는 방법은 밑에 있으니 걱정 말어라]
5. 원격탐색기를 클릭 -> 톱니바퀴를 클릭한다.
6. 톱니바퀴를 누르면 설정한 경로에 config 파일이 나타난다. 이것을 선택해 주면 파일이 자동으로 생성된다.
[ 파일의 내용은 아래와 같이 채워넣어라.]
Host 'ssh 접속 이름 아무거나'
Hostname '고정적 IP' //고정적 IP를 사용하지 않으면 인스턴시를 중지 또는 종료 했을 경우 다시 재시작을 하면 IP가 바뀌기 때문에
User 'ubuntu' //나는 ubuntu OS를 빌렸기 때문, EC2 Linux를 빌렸을 경우 ec2-user
IdentityFile 'AWS에서 다운받은 키의 위치' //.ssh/폴더에 넣어놨으니 거기서 찾아보아라- Host : ssh 접속이름을 정하는거다. 원하는 이름 아무렇게 만들어준다.
- HostName : 실제 접속하고자 하는 서버의 주소를 입력한다. AWS 인스턴스에서 퍼블릭 IP4 주소를 입력하면 된다.
[ 고정적 IP를 무조건 추천한다. 이유는 ec2 인스턴스를 중지 또는 종료 했을 경우 다시 재시작을 하면 IP가 바뀌기 떄문에 바뀐 IP를 계속해서 입력해줘야 하기 때문에 번거롭다. 그래서 무조건 해라 .
하는 방법으로는 AWS 홈페이지에서 네트워크 및 보안 -> 탄력적 IP에 들어가서 탄력적 IP 할당 버튼을 클릭하여 할당을 하고 현재 사용하려는 인스턴스와 탄력적 IP를 연결해주면 된다. ] - User : ubuntu 서버를 빌렸을 경우 ubuntu로 설정, Amazon Linux 서버를 빌렸을 경우 ec2-user로 설정
- IdentityFile : 아마존에서 다운받은 .pem 키 파일의 위치를 넣어준다. [무조건 ./ssh 폴더안에 키가 있을 것이다.]
7. 원격탐색기 -> config 파일의 Host이름(필자는 login으로 설정함) -> 새 창
8. 정상적으로 작동
◼️ 3. aws에서 빌린 ec2-ubuntu와 VSCode 연동 후 간단한 설정 ◼️
◼️ 3-1. 폴더열기 - /home 설정
필자는 Apahce, PHP, Mysql 3개를 사용하기 위해 마켓플레이스에서 각각 다운 받아 줬다. 이것들의 파일을 사용하기 위해서는 맨 처음의 폴더 위치에서 사용하는것이 가장 올바르다.
즉, 폴더 열기 버튼을 누르고 원하는 디렉토리 설정을 /home 라고 설정하는 것이 편하다.
나는 폴더 열기 버튼이 어떤 기능인 지도 모르고 이상한곳으로 설정을 하고서 계속해서 내가 원하는 파일들을 검색을 해보았는데 검색이 안되었기 때문이다.
◼️ 3-2. 파일로 이동(Cmd + p)
예를 들어 Apache 웹서버를 사용하기 위해 /var/www/html/index.html의 파일을 찾으려면 폴더의 위치를 하나하나 들어가는 것이 아니라 이동 탭 -> 파일로 이동 (단축키 : Cmd + p)를 선택한 후 원하는 파일명 검색한다. 일부분만 입력해도 파일명이 나오니 엄청 편하다.
◼️ 3-3. VSCODE에서 PHP 사용
◼️ 3-3-1. VSCODE에서 PHP 사용할 때 permission denied 오류
ec2-ubuntu와 VSCode와 연동 후에 VSCode에서 ec2-ubuntu의 Apach 웹서버를 이용하려고 html 파일을 수정하려고 했으나 permission denied 오류가 떴다.
==> 이 오류의 원인을 살펴보면 내가 편집하려는 파일의 소유자는 root이지만 내가 접근한 것은 root가 아니라는 말이다.
그래서 이 오류를 해결해주기 위해서는 터미널(쉘)을 이용하여 chown 명령어로 소유자를 ssh의 계정으로 변경을 해주면 되는것이다.
[ 필자는 aws에서 ec2-ubuntu를 빌렸기 때문에 ssh의 계정이 ubuntu 이다. ]
[ex] sudo chown -R ubuntu *
==> *의 의미는 전체라는 뜻이다.
◼️ 3-4. VSCODE에서 MySQL 연동
1. 마켓플레이스 -> MySQL 검색 후 설치한다.
2. 설치 후에 왼쪽 메뉴바 -> MySQL 아이콘 클릭 -> 상단의 [+] 버튼을 클릭 후 빨간 박스에 정보를 입력
[ Host : 나는 AWS의 ec2-ubuntu 를 빌렸고 빌린 서버의 탄력적 IP(퍼블릭 IPv4 주소)를 넣어주었다.(이 부분은 자동으로 입력됨)
Username : 이 부분에는 MySQL에서의 유저 이름을 입력해준다.
Password : 이 부분에는 MySQL에서 생성한 유저 계정을 들어갈때 입력했던 비밀번호를 입력해주면 된다.
Port : 3306을 넣어줬다.(이 부분은 자동으로 입력됨)
3. VSCODE에서 MySQL을 사용해봤는데 한눈에 보기 편하기는 하나(내가 이용하본 바로 직관적이였다.) sql문을 입력하거나 기능을 추가할때 불편한점이 있다.
그래서 내가 이용하는 방법은 MySQL Workbench를 이용하여 DB 구조를 설계를 하고나서 VSCODE에서 확인하는 용도로 사용하면 좋았다. 여러분들은 편한 방법을 이용하면 좋을 거 같다.
