GitHub

https://github.com/Backcoder-June

BackCoder 기록 그리고 숙달

Back to the AWS

AWS Apache2 VirtualHost 등록 => 80포트로 HTTP 와 WebSocket 사용하기

Backcoder 2022. 12. 24. 23:47

도메인을 구매하고,

도메인 사이트에서 AWS 인스턴스의 퍼블릭 IP 를 등록해두었다면, 

apache2 를 이용,  VirtualHost 설정에서 ServerName 과 ProxyPass 를 연결해 줍니다.  

 

[ 도메인 Freenom 예시 ]

도메인 생성 - manage domain - manage Freenom Domain

Name : www

Type : A

TTL : 300 / 3600 (캐쉬 Time)

target : AWS 인스턴스 퍼블릭 IP ( 포트번호 제외 )

 

 

 

[ apache2 웹서버 설치 ]

sudo apt-get install apache2

 

 

경로이동 

 

cd /etc/apache2/sites-available/

 

 

conf 파일을 새로 하나 생성해 줍니다. ( 기존 파일에 해도 되지만 따로 )

 

sudo vi 사이트이름.conf

 

VirtualHost 코드 작성

<VirtualHost *:80>
        ServerName www.사이트이름.cf

        ProxyPass / http://localhost:3000/
        ProxyPassReverse / http://localhost:3000/
</VirtualHost>

<VirtualHost *:80>
        ServerName 사이트이름.cf

        ProxyPass / http://localhost:3000/
        ProxyPassReverse / http://localhost:3000/
</VirtualHost>

 

=> AWS -  인스턴스 - HTTP ( 포트 : 80 ) 인바운드 규칙을 생성해두어야 합니다. 

=> 연결하고자하는 나의  "http://주소:포트/"  URL을 

도메인 사이트에서 구매해둔 ServerName www.내사이트.XXX 주소로 연결시켜 줍니다. 

 

여기서 VirtualHost 번호를 80 포트로 설정해주고 있기때문에 

나의 사이트 주소인 www.내사이트.XXX 뒤에는 가상으로 " :80 " 포트 가 숨어있게 됩니다. 

 

즉, www.내사이트.XXX   URL로도 접근이 되지만 :80포트가 생략되어있는 것이고 

실제로  www.내사이트.XXX:80    포트를 명시해줘도 접근이 가능합니다.  

 

 

 

이후에, 

 

proxypass 사용할 수 있도록 설정

sudo a2enmod proxy

 

http 로 proxy 할 수 있게 변경

 

sudo a2enmod proxy_http

Apache가 인식하도록 conf파일 추가

 

sudo a2ensite 내사이트도메인.com.conf

 

 

Apache 재시작 => 적용

sudo systemctl reload apache2

 

이렇게 설정이 끝나면 

구매한 도메인이 80 http 가상 포트를 사용하며 접근이 가능합니다. 

 

하지만 만약 사이트에서 WebSocket 을 사용하고 있을 시,

WebSocket 이 사용하고 있는 포트도 80port 여서 웹소켓 기능이 정상적으로 실행되지 않는 문제가 발생했습니다. 

아래와 같이 설정하여 80 포트를 http 와 websocket 두 요청의 경우에 사용가능 하도록 해줍니다.

 

 

 

 

 

[ WebSocket || http 80 포트 동시 사용 ]

 

[ apache2 rewrite 활성화 ]

sudo a2enmod rewrite

 

[ 도메인 conf 설정 변경 ]

위에서 만들어두었던 내도메인전용conf 파일 설정을 변경해줍니다. 

sudo vi /etc/apache2/sites-available/내도메인conf

 

 

[ 내도메인.conf ] 

LoadModule proxy_module modules/mod_proxy.so 
LoadModule proxy_http_module modules/mod_proxy_http.so 
LoadModule proxy_wstunnel_module modules/mod_proxy_wstunnel.so 
LoadModule rewrite_module modules/mod_rewrite.so

<VirtualHost *:80> ProxyPreserveHost On ProxyRequests Off

    ServerName www.내도메인.com

    RewriteEngine On
    RewriteCond %{HTTP:Upgrade} =websocket [NC]
    RewriteRule /(.*\/websocket) ws://어플리케이션아이피:포트/$1 [P,L]
    RewriteCond %{HTTP:Upgrade} !=websocket [NC]
    RewriteRule /(.*) http://어플리케이션아이피:포트/$1 [P,L]

#주석    ProxyPass / http://어플리케이션아이피:포트/
    ProxyPassReverse / http://어플리케이션아이피:포트/
</VirtualHost>

 -  VirtualHost 80 포트로 구매한 ServerName 도메인과 내 어플아이피포트를 연결하되,

(1)요청 Condition 이 websocket  일 때 

http:// 를 ws://  로  Rewrite 해줘서 웹소켓 요청을 받아냅니다. 

 

(2)요청 Condition이 != 웹소켓이 아닐 때는

원래대로 http:// 로 내 어플리케이션 아이피:포트 주소를 구매한 ServerName 에 :80 포트로 연결해 줍니다. 

 

=> Rewrite 를 이용해 websocket 과 http 요청을 모두 받아낼 수 있게됩니다. 

 

추가 ) 웹 서버 Apache 와 NginX 비교 장단점 

https://velog.io/@deannn/Apache와-NginX-비교-차이점

 

Apache와 NginX 비교, 차이점

Apache, NginX 장단점 비교

velog.io