[Web] AWS 세팅하기 - 포트포워딩, nohup, 구매한 도메인 연결, og태그

[Web] AWS EC2 서버 구매 및 접속하기 (Mac OS 기준)

 

[Web] AWS에서 포트 열어주기 및 Flask 서버 실행하기

 

EC2 서버 구매 및 접속, 그리고 Flask와 연동하는 작업까지 마쳤다면,

추가적으로 서버에 설정을 해주어야 하는 부분이 존재한다.

 

---

1.  포트포워딩

 

내 서버는 5001 포트에서 웹 서비스가 실행되고 있다.

그러나 매번 :5001 포트를 url에 붙이는 것이 번거롭기에, 이를 제거해줄 필요가 있다.

 

위 인바운드 규칙을 편집할 때 HTTP 기본 포트로 80 포트를 추가하였는데,

http://naver.com:80 으로 접속해도 네이버 페이지로 접속해지는 것을 확인할 수 있다.

네이버

이처럼 http에는 80 포트가 숨겨져 있는 것을 확인할 수 있다.

 

위 그림처럼, 포트 번호를 입력하지 않아도 자동으로 접속되기 위해 (사실 우리는 5000이 아닌 5001포트이지만)

80포트로 오는 요청을 5001 포트로 전달하게 하는 포트포워딩 작업이 필요하다

 

그러나 우리는 사실 이전 포스트에서 이 작업을 완료했다.

 

이전 포스트에서 initial_ec2.sh 파일을 파일질라의 원격 서버로 옮겨

sudo chmod 755 initial_ec2.sh

./initial_ec2.sh

위 코드를 입력하여 서버 환경을 통일해주었다.

 

이니셜 세팅에 위 포트포워딩 작업이 포함되어 있었기 때문에, 현 상황에서 포트번호를 뺀 주소를 입력하여도

문제없이 나오는 것을 확인할 수 있다.

 

그러나 만약 이니셜 세팅을 하지 않아 포트번호를 빼면 화면이 나오지 않는 경우,

아래 코드를 터미널 창에 입력하여 설정해야 한다.

sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5001

이렇게 되면 80포트로 들어오는 요청을 5001포트로 전달하는 포트포워딩 설정이 완료된다.

 

!! 그러나 주의할 점 !!

 

나의 경우 위의 상황에서 애를 많이 먹었는데,

initial_ec2.sh 파일을 sudo를 통해 실행시킨 뒤

위에 80포트를 5001포트로 변경하는 코드를 실행시켜도

포트포워딩이 되지 않았다 ㅠㅠ 그래서 이것저것 찾아보고 문의도 해보니

 

그냥 initial_ec2.sh 파일 내부에서 먼저 수정을 하란다..

 

sh파일의 경우 여러 번 실행하게 되면 오류가 생기기 때문에, 초기세팅 관련 입력했던 코드를 수정하고 싶다면

AWS에서 기존 인스턴스를 종료시켜버리고 새롭게 인스턴스를 생성하여, 새로운 퍼블릭 IPv4 주소를 사용해야 한다.

 

이 과정이 디게 번거로웠다.. 여러번 하다보니 너무 지쳤었는데

2~3일동안 애먹다가 코드 수정하니 한방에 해결됨 ㅜ

 

무튼 내 서버의 포트 번호가 다르다면 sh파일의 코드의 포트 번호를 수정하거나,

위에 80포트를 5001포트로 우회시켜주는 코드를 직접 터미널에 입력할 것 !

 

---

 

2. nohup 설정

 

nohup 설정은 SSH 접속을 끊어도, 즉 서버와 연결된 터미널 창을 종료해도 서버는 계속 유지되게끔 하는 설정이다.

 

먼저, 원격 접속을 종료하더라도 서버가 계속 돌아가게 하는 코드는 아래와 같다.

우분투에 접속한 터미널에 아래 코드를 입력한다.

nohup python app.py &

그러면 nohup: ignoring input and appending output to 'nohup.out' 이라는 문구가 뜨면서,

원격 서버에 nohup.out 이라는 out-파일이 생성되는데, 뭐 그냥 엔터를 눌러 넘어간다.

 

그렇게 되면 터미널을 종료해도 서버와 웹 페이지 창은 유지가 되게 된다.

 

반대로 이 서버를 강제 종료하는 코드는 다음과 같다.

# 아래 명령어로 미리 pid 값(프로세스 번호)을 본다
ps -ef | grep 'app.py'

# 아래 명령어로 특정 프로세스를 죽인다
kill -9 [pid값]

이 작업은, 원격 서버의 파일이나 데이터들을 업데이트하는 경우 등에 필요하다.

 

ps -ef 는 내 서버에서 돌아가고 있는 모든 프로세스들을 나타내는데,

| grep 'app.py' 코드를 뒤에 붙임으로써 app.py가 포함된 프로세스만을 나타내게 된다.

 

거기서 서버 상의 파일로 존재하는 프로세스를 kill하면 된다.

나같은 경우 11596과 11606을 kill하여 app.py를 강제종료 할 수 있었다.

 

---

 

3. 도메인 설정하기

 

https://www.gabia.com

웹을 넘어 클라우드로. 가비아

 

나는 가비아 사이트에서 웹 도메인 하나를 구매했었다.

 

회원가입 한 뒤, 원하는 도메인을 입력해서 구매를 하면 되는데

현재 .shop 도메인이 1년에 500원 할인 이벤트를 해서 500원주고 샀다.

 

이벤트가 아직 진행중이라면,

.shop 도메인을 선택하고 결제 기간을 1년으로 맞춘 뒤,

1,000원 이하 카드결제가 안되기에 무통장입금으로 결제할 것.

 

결제를 완료하면 10분정도? 뒤에 가비아 홈페이지의 서비스 관리에

내가 구매한 도메인이 나타날 것이다.

이제 내가 구매한 도메인을 직접 적용해보는 설정을 시작한다.

 

1) 가비아 사이트 로그인한 뒤 오른쪽 중간의 DNS 관리툴 클릭

관리툴로 들어가면 내가 구매한 도메인 정보가 나오는데, 오른쪽의 설정을 누른다.

 

2) DNS 설정

 

설정을 누르고 DNS 설정 오른쪽의 "레코드 수정"을 클릭하면

DNS를 설정할 수 있는 창이 나온다.

레코드 추가를 누른 뒤,

호스트에는 @

값위치에는 내 인스턴스의 퍼블릭 IPv4 주소를 넣는다.

 

이렇게 되면 해당 도메인으로 원격 서버에서 만든 페이지를 접속할 수 있다.

대신, 바로 적용되지는 않고 10분 이상 기다려야된다.

 

---

4. og 태그 설정하기

 

위 url이 정상적으로 작동한다면, 마지막으로 추가 세팅해주어야 할 것이 있다.

우리가 만든 도메인을 카카오톡으로 전송하면, 미리보기 느낌의 도메인 정보가 떠야 하는데

지금은 아무것도 뜨지 않는 상태이다.

대략 이런 상태이다. 네이버는 도메인 관련 사진과 링크가 포함된 그림이 뜨는데,

내 도메인에서는 아무 정보도 뜨지 않는다.

 

이것을 og 태그라고 하며, 해당 설정을 통해 이 기능을 구현할 것이다.

 

내가 만든 html 파일을 열어보자

 

기존의 코드에서 아래 코드를 추가해주어야 한다.

위치는 크게 상관이 없다. 나는 <script>와 <style> 사이에 추가했다.

<meta property="og:title" content="내 사이트의 제목" />
<meta property="og:description" content="보고 있는 페이지의 내용 요약" />
<meta property="og:image" content="{{ url_for('static', filename='ogimage.png') }}" />

title의 content에 사이트 제목을 입력하고

description의 content에 내용 요약본을 입력한다.

image의 content에는 static 폴더 안에 있는 이미지 파일명을 입력한다.

 

네이버로 치면 title은 "네이버", description은 "네이버 메인에서 다양한 ...", 이미지는 네이버 초록색 로고이다.

 

추가로 이미지는 800*400 이미지를 static 폴더에 넣으면 된다.

 

여기서 해당 파일을 원격 서버에 올려주어야 하는데,

서버가 켜져있다면 터미널에서 종료하고

nohup을 통해 서버가 켜져있다면, 위에서 설명한 서버 종료 코드를 통해

진행중인 프로세스를 종료한다.

 

그 후 파일질라에서,

기존 원격서버에 있는 파일과 폴더들을 삭제하고

수정한 파일과 폴더들을 다시 업로드한다.

 

 

!! 여기서 주의할 점 !!

 

해당 og태그의 이미지나 글을 로컬에서 수정한 후,

원격 서버로 올렸을 때 카카오톡 상에서 연동이 되지 않는 경우가 있다고 한다.

 

그건 페이스북도 마찬가지인데, 카카오톡의 경우 처음의 og태그를 한동안 저장해놓기 때문에

원격 서버로 업로드한다고 해도 바로 반영이 되지 않는다

 

이 경우 수동으로 수정해주어야 한다.

 

- 페이스북 og 태그 초기화 하기: https://developers.facebook.com/tools/debug/

공유 디버거 - Facebook for Developers

- 카카오톡 og 태그 초기화 하기: https://developers.kakao.com/tool/clear/og

카카오계정 로그인

나의 경우 카카오톡 해당 링크로 접속하여 로그인한 후,

이렇게 나의 도메인을 입력하여 og태그를 초기화하였다.

사투의 흔적..

내가 한 것처럼 중간에 수정해도 초기화하지 않는 이상 바로 반영이 안된다 ㅋ

 

그럼 여기까지 !