[ Cafe24 서버 호스팅 ] #2: Node.js + Angular 개발환경 준비하기 (설치 및 환경 설정)

✔️ 1. PuTTY ( EC2 SSH 접속 )

 

1️⃣ 홈페이지 접속 후, Download PuTTY 클릭

 

https://www.putty.org/

Download PuTTY - a free SSH and telnet client for Windows

 

2️⃣ PuTTY 설치

 

exe만 필요하기 때문에, 'Package file' 항목 아래 'Alternative binary file'에서 컴퓨터 사양에 맞는 exe 확장자 파일 설치

 

3️⃣ PuTTY.exe 열기

PuTTY.exe

 

4️⃣ EC2 SSH 접속

 

Host Name에 구매한 Cafe24 IP를 입력

 

⭐️ Cafe24 IP 확인 방법 ⭐️

 

1. Cafe24 호스팅 메인에서 "나의서비스관리" 클릭

 

2. 서버 접속 정보 항목에 IP 확인

 

3. PuTTY에서 Host Nam란에 IP를 입력 후, Open 클릭

 

※ PuTTY Security Alert 창이 뜬다면, Accept 클릭하여 진행 ※

PuTTY Open 직후 모습

 

4. 서버( IP 주소 )에 원격으로 접속

 

앞서 "#1: Cafe24 서버 구매하기" 3. 결제 진행 단계에서 입력했던 관리자 정보 입력

 

login as : 관리자 아이디 ( 수정한 게 없다면, 기본 root / Cafe24 서버접속정보에서 확인가능 )

password: 관리자 비밀번호 (입력하지 않는 느낌이 정상)

 

정보 입력 후, 

[root@아이디 ~] #

이렇게 나오면 접속 성공!!

 

※ 명령어 ※

df -h

disk free | free -h / 메모리?

 

※ 붙여 넣기 방법 ※

1. shift + insert

2. 마우스 우클릭

 

※ 예외 ※

※ 처음 설치 시, root 암호가 설정이 안 되어 있는 경우 - ex) Amazon Linux 2 AMI 등...

#root 비밀빈호 설정
  - sudo passwd root
 
1.root pw 지정.
  - su root- passwd root 
2.user add 및 권한세팅.- useradd smarttax
  - passwd smarttax

- https://snepbnt.tistory.com/442

[ AWS ] EC2 SSH 접속을 위한 사용자 추가하기

---

✔️ 2. Node.js / pm2

 

1️⃣ EC2 SSH 접속

 

2️⃣ 설치

1. Node 설치
sudo yum install https://rpm.nodesource.com/pub_16.x/nodistro/repo/nodesource-release-nodistro-1.noarch.rpm -y sudo yum install nodejs -y --setopt=nodesource-nodejs.module_hotfixes=1

2. Node 버전 확인
node -v

3. Node 삭제
sudo yum remove -y nodejs

4. pm2 설치
npm install pm2 -g

 

공부 Ver : v20.19.0

---

✔️ 3. FTP

1️⃣ 설치하기
$> yum install vsftpd
$> yum -y install vsftpd

-y는 yes의 줄임말.
설치 중간에 멈춰서 사용자 입력을 기다리는 아래 문구들을 물어보지 않고, 곧장 설치 진행
Is this ok [y/N]:

// 삭제하기
$> yum remove vsftpd

2️⃣ 설치확인 
$> rpm -qa | grep vsftpd
$> yum list installed | grep vsftpd

주의사항 : cafe24는 연결 시 에러 날 때 sftp로 하니 된다.

 

# root로 ftp 로그인.

- https://akaisun.tistory.com/36

aws에서 ftp root 로그인 방법

ec2-user로 로그인
sudo -s
vi /etc/ssh/sshd_config
/PermitRootLogin로 검색
#PermitRootLogin yes 주석해제
cp .ssh/authorized_keys /root/.ssh/
service sshd restart

---

✔️ 4. mariaDB

서버에서 작업 (putty, mobaxterm) / [root@아이디 ~] # 

 

⭐️ 참고 사이트 ⭐️

https://progtrend.blogspot.com/2019/01/centos-7-mariadb-103.html

CentOS 7에 MariaDB 10.3 설치하기

 

1️⃣ 설치 및 시작

1. 설치
sudo yum install MariaDB-server MariaDB-client
안되면,
yum install mariadb-server -y

2. mariadb가 부팅 시 자동 시작되도록 한다.
sudo systemctl enable mariadb

3. mariadb를 시작시킨다.
sudo systemctl start mariadb
# 또는 service 명령으로 시작시킬 수도 있다.
sudo service mariadb start

4. 세팅됐는지 확인.
systemctl is-enabled mariadb

공부 Ver : mysql  Ver 15.1 Distrib 10.3.39-MariaDB, for Linux (x86_64) using readline 5.1

 

2️⃣ mysql root password 세팅

1. mysql 접속
mysql -u root -p
엔터 후, 비밀번호 입력 접속 (최초엔 암호 없으니 자동 로그인)

2. password 세팅
ALTER USER root@localhost IDENTIFIED VIA mysql_native_password; SET PASSWORD = PASSWORD('자신의 암호');

3. 테이블 새로고침 ( 사용자 계정, 권한 등의 변경사항을 즉시 반영해 주는 명령어 )
flush privileges;

# federated 테이블 관련 세팅. mysql에서 실행해줘야 함.
INSTALL SONAME 'ha_federatedx';

 

3️⃣ mysql 권한 세팅

 

외부에서 연결할 수 있도록 권한을 세팅해주어야 한다.

 

https://java119.tistory.com/61

[MySQL || MariaDB] 데이터베이스 접근 권한 거부 Host 'IP' is not allowed to connect to this MySQL server

# 권한부여
GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY '패스워드';

# 데이터 베이스 확인
show databases;

# 사용자 계정 생성 'id'@'localhost' 이면 로컬에서만 접속 가능
CREATE USER 'ID'@'%' IDENTIFIED BY '패스워드';
CREATE USER 'ID'@'localhost' IDENTIFIED BY '패스워드';

# 사용자 권한 주기
//일반권한
GRANT ALL PRIVILEGES ON smarttax.* TO 'smarttax'@'%';
//SUPER 권한
grant super on *.* to 'smarttax'@'%';

# 새로고침 ( 사용자 계정, 권한 등의 변경사항을 즉시 반영해 주는 명령어 )
FLUSH PRIVILEGES;

# mysql database 사용.
use mysql;

# 사용자확인
select host, user, password from user;

# 사용자 계정 삭제 '사용자'@'접속위치'
DROP USER [사용자]@[서버];
예) DROP USER testUser@localhost;

# 이걸 해줘야 web에서 정상적으로 호출이 됨. 이거 안 하면 에러 발생.
GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY '패스워드';

# 스크립트 설치

# 시간 utc => kst로 변경
ln -sf /usr/share/zoneinfo/Asia/Seoul /etc/localtime

---

✔️ 5. FileZilla

 

1️⃣ FileZilla 설치

 

https://filezilla-project.org/download.php?type=client

└ 컴퓨터 사양에 맞는 FileZilla 다운로드 사이트 자동 이동

공부 Ver : 3.62.2

 

2️⃣ FileZilla 열고, 사이트 관리자 열기

 

3️⃣ 새 사이트 생성

 

4️⃣ 일반 설정 변경

"1. PuTTY ( EC2 SSH 접속 )"에서 언급했던, IP와 관리자 아이디 및 비밀번호 입력하여 연결

 

5️⃣ 연결 성공

---

✔️ 6. nvm ( Node.js Version Manager )

 

1️⃣ nvm 설치 

 

https://github.com/coreybutler/nvm-windows/releases

Releases · coreybutler/nvm-windows

 

2️⃣ nvm 설치 확인 / 버전 확인

 

# 명령프롬프트 열기 : 실행(Win + R)을 열어준 뒤, "cmd"(터미널) 입력

nvm

nvm --version

 

3️⃣ nvm으로 Node.js 설치 및 오류

 

1. Node.js 설치

nvm install v20.11.1
또는
nvm install 16

 

2. 설치 확인

nvm list

* 표시 : 현재 사용중인 버전

3. 버전 변경 및 사용

nvm use version
ex1) nvm use 20.19.0
ex2) nvm use 16

 

# 설치 오류

C:\Users\이름>nvm install v20.11.1 // 설치 오류
C:\Users\������\AppData\Roaming\nvm could not be found or does not exist. Exiting.
Downloading node.js version 20.11.1 (64-bit)...

Error while creating
C:\Users\������\AppData\Roaming\nvm\v20.11.1\node.zip - open C:\Users\������\AppData\Roaming\nvm\v20.11.1\node.zip: The system cannot find the path specified. Could not download node.js v20.11.1 64-bit executable.

원인 : 사용자 이름이 한국어인 경우 (즉, 경로에 한국어가 존재하는 경우)

해결 : 영어로 된 새로운 경로를 만든 후, 해당 경로에서 재설치 / 디렉터리 명 변경

 

참고 : 명령 프롬프트 터미널(cmd)을 시스템 권한으로 실행 시, 여러 오류를 방지할 수 있다.

 

⭐️ 참고 블로그 ⭐️

https://velog.io/@februaar/Node.js-%EC%9C%88%EB%8F%84%EC%9A%B0%EC%97%90%EC%84%9C-nvm-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0

[Node.js] 윈도우에서 nvm 설치하기

---

✔️ 7. Nodemon

 

Nodemon은 프로젝트 폴더의 파일이 저장되면, 서버를 재시작해주는 도우미.

한 줄 정의 : "Node.js + monitor" → 파일을 감시(monitor)해서 자동 재시작

 

💡 왜 필요한가?

 

보통은 아래처럼 해야 함

node app.js

 ➡ 서버 실행됨
 ➡ 코드 바꿈
 ➡ 서버 껐다가 다시 실행해야 함 😩

 

😎 그런데 nodemon을 쓰면?

nodemon app.js

 ➡ 코드 바꾸고 저장하면

 ➡ 자동으로 서버가 껐다 켜짐!

 

1️⃣ 설치 

 

1. cmd(터미널)에서 전역(global) 설치

npm install -g nodemon

 

2️⃣ 사용법

 

 # 기본 실행

nodemon app.js

 

# 패키지에 등록해서 npm 명령어처럼 쓰기

package.json 추가

"scripts": {
   "start": "node app.js",
   "dev": "nodemon app.js"
}

 

➡ 실행

npm run dev

 

# 참고

 

• nodemon은 .js, .ts, .json 같은 파일이 바뀌면 감지해서 재시작
• .env나 특정 파일만 감시하거나 제외할 수도 있음
• TypeScript 개발자는 ts-node랑 같이 쓰면 최고 조합

---

✔️ 8. MobaXterm ( Linux SSH 접속 )

 

리눅스 서버에 접속하거나 원격 시스템을 제어하기 위한 올인원 툴(도구)

“Windows에서 리눅스 서버를 다루기 위한 만능 리모트 터미널”

 

MobaXterm = 윈도우에서 리눅스를 다룰 수 있는 슈퍼툴

SSH, 파일 전송, 터미널, 텍스트 편집, GUI 앱 실행 등 올인원 기능!

 

MobaXterm은 Putty보다 훨씬 편하고 직관적이라 입문자한테 추천

 

1️⃣ 설치

 

https://mobaxterm.mobatek.net/

MobaXterm free Xserver and tabbed SSH client for Windows

 

2️⃣ 압축 풀고, 쭈욱 진행하여 완료 후, 모바엑스텀 실행

짠 !

실행 완료 !

 

3️⃣ 설정

 

# 한글 인코딩 설정

한글 파일명 문자들이 깨질 수 있기 때문에, 한글 인코딩 설정

 

# 다크모드 (선택)

한글 파일명 문자들이 깨질 수 있기 때문에, 한글 인코딩 설정

 

4️⃣ 연결

 

⭐️  Remote host : 접속할 원격 서버의 IP 주소 또는 도메인 이름

• ex) 내부 IP : 192.168.0.123 / 외부 도메인 : example.com
• 당신이 접속하고 싶은 서버가 어디 있는지 알려주는 주소

⭐️  Specify username : 접속할 서버의 사용자 계정 이름 

• ex) root (관리자 계정) / ubuntu, admin, user01 등
• 서버에 로그인할 때 사용할 "아이디"에 해당.

⭐️  Port : SSH 연결을 위한 포트 번호

• 기본값: 22
• 어떤 서버는 보안을 위해 포트를 바꿔놨을 수도 있음.
• 서버에 접속하는 문(문번호)이라고 생각하면 돼요.

⭐️  User private key : SSH 접속에 사용하는 개인 키 파일(.pem, .ppk 등)

• ex) AWS의 .pem 파일 / PuTTY용 .ppk 파일
• 패스워드 대신 사용하는 “전자 열쇠”예요
• 서버 측에는 "공개 키", 내 컴퓨터에는 "개인 키"가 있고, 서로 짝이 맞아야 접속 가능.

 

Session 추가 후, 최초 로그인 시, 패스워드 자동 저장 여부를 물어본다.

Yes를 클릭하면, 앞으로 아이디만 입력하면, 패스워드 입력 없이 자동으로 로그인이 된다.

Yes를 누르면, My master password를 등록 창이 나오는데, 적당히 입력하고 OK 누르면 됩니다.

---

✔️ 9. HeidiSQL

MySQL, MariaDB, MSSQL 등을 쉽게 관리할 수 있게 도와주는 윈도우용 데이터베이스 클라이언트 툴
“데이터베이스를 쉽게 보고, 수정하고, 쿼리도 돌릴 수 있는 GUI 프로그램”

 

1️⃣ 설치

 

https://www.heidisql.com/download.php

사이트 접속 후, 본인 PC에 맞게 맨 위 Installer 다운 받고, 특별한 점 없이 쭉쭉 진행.

공부 Ver : 12.1.0.6537 (64 Bit)

 

2️⃣ 실행

 

3️⃣ 설정 후 열기 

 

MySQL 또는 MariaDB 데이터베이스에 접속할 때 필요한 정보를 입력해 줍니다.

( 호스팅 관리 페이지에서 DB 정보 확인 가능 )

 

⭐️ 네트워크 유형 : 어떤 방식으로 접속할지 선택

• ✅ MariaDB or MySQL (TCP/IP)
• 일반적으로는 MariaDB or MySQL (TCP/IP) 선택
• 서버랑 원격 접속 시 보통 이거 씀

⭐️  호스트명 / IP : 데이터베이스가 설치된 서버 주소

• ✅ Cafe24 구매하고 받은 IP 입력
• 로컬 : 127.0.0.1 또는 localhost
• 원격 : 서버 IP (192.168.1.100, mydb.cafe24.com 등)

⭐️  사용자: 데이터베이스 로그인 계정

• ✅ MariaDB 설치 시 설정했던 계정 : root
• 예: root, admin, user1 등
• DB 서버에서 설정한 사용자 계정

⭐️  암호 : 해당 사용자 계정의 비밀번호

• ✅ MariaDB 설치 시 설정했던 비밀번호
• DB 만든 사람이 설정한 비밀번호

📌 연결 안 될 때 확인할 것

 

• 서버 방화벽에서 3306 포트 열려 있는지 확인
• MySQL/MariaDB가 외부 접속을 허용하고 있는지 (bind-address = 0.0.0.0)
• 사용자 권한에 외부 호스트 접속 허용이 있는지 (% 사용 등)

 

 

🔐 암호를 잊어버렸을 때 해결법

 

1️⃣ 루트 계정(root)으로 리눅스 서버 접속 가능할 때 (MobaXterm 등으로 SSH 접속 가능한 경우)

 

1. MySQL 서버 종료

sudo systemctl stop mysqld

 

2. 비밀번호 없이 MySQL 시작 (무결성 체크 끔)

sudo mysqld_safe --skip-grant-tables &

 

3. 다른 터미널 열어서 접속

mysql -u root

 

4. 비밀번호 재설정

FLUSH PRIVILEGES;
ALTER USER 'root'@'localhost' IDENTIFIED BY '새비밀번호';

MySQL 5.x는 아래처럼 쓸 수도 있어요:

SET PASSWORD FOR 'root'@'localhost' = PASSWORD('새비밀번호');

 

5. MySQL 다시 정상모드로 재시작

sudo systemctl restart mysqld

 

2️⃣ 웹호스팅(Cafe24 등)을 사용 중이라면

 

• 호스팅 관리자 페이지로 들어가세요.
• DB 관리 또는 DB 비밀번호 재설정 메뉴가 있어요.
• 비밀번호 초기화해서 새 비밀번호를 받을 수 있어요.

---

✔️ 10. VSCode (Visual Studio Code)

 

1️⃣ 홈페이지 접속 후, Download for Windows 클릭

 

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

2️⃣ 설치 진행

 

전부 체크 추천

 

⭐️  "Code(으)로 열기" 작업을 Windows 탐색기 파일의 상황에 맞는 메뉴에 추가 

• 파일 위에서 마우스 오른쪽 클릭했을 때, 나오는 메뉴에 "Code로 열기" 메뉴가 생깁니다. (예: .html, .js 파일 등)

⭐️  "Code(으)로 열기" 작업을 Windows 탐색기 디렉터리의 상황에 맞는 메뉴에 추가

• 폴더 위에서 마우스 오른쪽 클릭했을 때, "Code로 열기"가 생깁니다. 
• → 그 폴더를 프로젝트 폴더처럼 바로 VSCode로 열 수 있습니다.

⭐️  Code을(를) 지원되는 파일 형식에 대한 편집기로 등록합니다.

• .js, .json, .ts, .html 같은 지원되는 프로그래밍 파일들을 더블 클릭하면 자동으로 VSCode로 열리게 설정하는 옵션입니다.

⭐️  PATH에 추가(다시 시작한 후 사용 가능)

• 명령 프롬프트(cmd)나 PowerShell에서

code .

• 이렇게 입력해서 현재 폴더를 VSCode로 여는 기능을 가능하게 해 줍니다.

 

3️⃣ VSCode 실행

공부 Ver : 1.99.3

---

✔️ JDK, Git