사이드 프로젝트 20편 | AWS EC2 인스턴스로 웹 서버 배포하기 -2 (FileZilla, 무중단배포, 포트포워딩)

인스턴스 메모리가 부족해서 로컬에서 파일을 빌드하고 넘겨줄 예정이다. 이 과정을 쉽게 해결할 수 있는 오픈 소스 프로그램을 알아보자.

FileZilla

파일질라(FileZilla)는 무료로 사용 가능한 오픈 소스 프로그램이다. 워드프레스 운영자들에게 웹 호스팅 서버와의 파일 전송 및 관리를 간편하게 해주는 도구로 널리 사용된다.

 

1. FileZilla 설치하기

1. FileZilla 공식 웹 사이트에서 최신 버전의 ZileZilla를 다운로드한다.
2. 다운로드가 완료되면 설치 파일을 실행한다.
3. 설치 프로세스를 진행하고, 사용자 정의 설정이 필요한 경우 적절한 옵션을 선택하여 설치를 완료한다.

파일질라 다운로드 페이지

파일질라 다운로드 옵션

 

 

파일질라 다운로드 순서 (1, 2)

Desktop Icon은 생략해도 됩니다.

파일질라 다운로드 순서(3, 4)

파일질라 다운로드 순서(5, 6)

파일질라 다운로드 순서 (7)

파일질라 실행 모습

 

2. FileZilla 사용법

1. 서버 연결 설정

• FileZilla 실행 후 왼쪽 상단의 File > 사이트 관리자 > New site 클릭
• 아래와 같이 설정
  • 프로토콜 : SFTP
  • 호스트 : EC2 인스턴스의 퍼블릿 IPv4 주소
  • 포트 : 22
  • 로그온 유형 : 키파일
  • 사용자 : ubuntu
  • 키파일 : EC2 인스턴스 설정 시, 다운로드하였던 키파일
  • 위의 설정을 마쳤다면 연결 클릭

파일질라 사용법 순서1

확인 버튼을 클릭한다.

파일질라 사용법 순서2

파일질라 사용법 순서3

 다시 돌아와서 연결을 눌러준다.

파일질라 사용법 순서2

연결 성공

파일질라 AWS 연결 성공

 

아까 빌드하다가 작업이 멈췄기 때문에 빌드 파일을 삭제해 주고 로컬에서 빌드한 파일을 넣어준다.

드래그 앤 드롭하면 된다.

 

이제 인스턴스 접속해서 아래 명령어를 작성한다.

sudo npm i -g serve
serve -s build

 

 

📍 여기서 아래와 같은 에러가 발생했다. 

Cannot copy server address to clipboard: Couldn't find the `xsel` binary and fallback didn't work. On Debian/Ubuntu you can install xsel with: sudo apt install xsel.

xsel이 없다고 한다. 아래 명령어로 설치한다

sudo apt-get install xsel

 

 

📍  설치 후 빌드했더니 아래와 같은 에러가 나온다.

Cannot copy server address to clipboard: Both xsel and fallback failed.

아래 명령어로 다시 빌드한다.

serve -s -n build

 

이렇게 하면, 아래와 같이 serve에 성공함을 확인할 수 있다.

 

이를 외부 컴퓨터 환경에서도 접근가능 하게 하려면 puclic ip를 공유하면 된다. 

리액트는 3000 port로 배포될 텐데, public_ip:3000으로 접근하면 어디서든 들어올 수 있다. (IPv4 DNS)

 

그러나, 접속 결과, 접속 불가하다고 뜬다.

구글링 해보니 인스턴스 보안탭에서 인바운드 규칙을 추가해줘야한다.

 

인스턴스의 보안탭으로 이동하여 보안 그룹에 있는 아이디를 클릭한다.

 

인바운드 규칙 편집을 클릭한다.

 

유형은 사용자 지정 TCP로 설정하고 포트 범위는 나의 포트(3000)로 입력해 준다.

 

입력한 뒤 규칙 저장을 클릭하고 다시 3000 포트로 접속해 본다.

 

성공 ~!@!

 

 

pm2

실행 중인 서버를 터미널에서 종료하면 페이지에 접속할 수 없다. 인스턴스 컴퓨터에서 서버를 종료하면 배포 환경도 중단되기 때문이다. 이런 문제를 해결하기 위해서는 foreground의 앱을 background로 실행시켜 줄 도구가 필요하다. 

우리는 pm2를 사용해 볼 것이다.

pm2는 모든 디렉터리에서도 사용 가능해야 하기 때문에 -g를 붙여서 글로벌로 설치하자.

$ sudo npm -g install pm2

 

 

 

그다음 빌드 폴더를 serve와 pm2로 실행시킨다.

pm2 serve build 3000 --spa

 

아래와 같은 명령어를 통해 돌아가고 있는 pm2 프로젝트들을 확인할 수 있다.

pm2 list

 

 

포트포워딩

현재 URL로 접속할 때 3000포트로 접속하고 있다. 하지만 보통 웹페이지에 접근할 때 위와 같이 뒤에 포트번호가 붙어있는 것을 보지 않는다.

일반적으로 우리가 웹페이지에 접속할 때는 기본 포트가 뒤에 붙어있다.

http의 경우 80, https의 경우 443

기본 포트는 보이지 않도록 설정되어 있기 때문에 위 포트로 접속하면 포트는 보이지 않는다.

 

포트 번호를 보이지 않게 하기 위해서 80포트로 접속했을 때 (포트를 지정하지 않고  URL을 치고 들어왔을 때) 3000포트로 리다이렉트 시켜주면 된다.

 

아래와 같이 포트 리다이렉트를 해주는 명령어를 입력해보자

// 맨 뒤에 숫자만 자신의 실행하려는 포트번호를 입력해주면 된다.
sudo iptables -A PREROUTING -t nat -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5000

 

 

redirect 포트를 확인하고 싶다면,

sudo iptables -t nat -L --line-numbers

 

redirect 포트를 삭제하고 싶다면,

//sudo iptables -t nat -D PREROUTING [number]
sudo iptables -t nat -D PREROUTING 1

 

 

 

 

 

 

reference

1. https://happysisyphe.tistory.com/47

2. https://velog.io/@cjy0029/AWS-EC2-%ED%94%84%EB%A1%A0%ED%8A%B8-%EB%B0%B0%ED%8F%AC-%EC%9D%B4%EB%A0%87%EA%B2%8C%EB%A7%8C-%ED%95%B4%EB%B3%B4%EC%9E%90

3. https://velog.io/@kcj_dev96/%ED%94%84%EB%A1%A0%ED%8A%B8-%EB%B0%B0%ED%8F%AC-%EB%B0%A9%EB%B2%95-1%ED%8E%B8AWS-EC2-with-React-Express-%ED%99%98%EA%B2%BD