웹 프론트엔드 / 백엔드

Django와 Vanila JS를 사용해서 간단하게 구현했다

Vanila JS 및 프론트엔드

약국 및 편의점을 검색하여 지도에 뿌려주는 부분은 Kakao Map API를 사용해서, 서비스에서 요청을 보냈고 이에 대한 내용은 검색해보면 많이 나오니 패스하겠다.

또한 레이아웃을 구성하는 부분에서는 CSS grid를 사용해서 레이아웃을 적용하고, 애니메이션도 간단하게 적용해두었다.

손으로 카메라를 가렸습니다...

이런식으로 그냥 대충 구성했다.

Django 및 백엔드 / AWS 서빙

중요한 부분은 이곳이다. 재미있기도 했고, AWS 환경에서의 서빙이 흥미로웠다.

일단 최대한 제공되는 서비스를 안쓰는 방향으로 개발을 하기로 했다.
(비용적 문제도 있기도 하고..)

AWS는 정말 많은 기능을 지원해주지만 일단은 EC2를 이용해서 P2 인스턴스를 프로그래머스에서 결제해주셨기 때문에 이것을 가지고 개발을 했다.

Django는 정석대로 충실하게 개발을 했고, 딱히 다양한 기능이 필요없어서 진행하다보니 Flask를 사용했어도 상관없었을것 같다.

code conflict를 막기 위해 CI를 사용해서 해볼까도 싶었지만, 빈번한 커밋이 있었지 않았기 때문에 git push/pull 만으로 충분했다.

AWS 상에서의 배포자동화를 위하여 CodeBuild를 시간이 남는다면 시행해볼 예정이다.

생각보다 Django에 대해서는 쓸 게 많이 없어서 그냥 Django-Gunicorn-Nginx를 연결해서 도커 이미지로 만드는 방법에 대해 작성해보도록 하겠다.

gunicorn 설치

일단 gunicorn을 왜 사용하냐면, django를 배포하려고 하면 WSGI를 마주치게 되는데 WSGI는 CGI와 비슷한 놈인데, 그러면 CGI는 무엇이냐?
(CGI = Common Gateway Interface)

웹이 발전하게 되면서 동적으로 웹을 만들다보니, 데이터를 처리해야할 필요가 생겼다. 정적인 웹에서는 그냥 html을 가져다가 주면 끝이지만, 동적인 웹에서는 데이터를 처리하고 내보내주어야하기 때문이다.

이러한 과정에서 개발자들이 이 데이터를 처리하는 각자 사용하는 언어에 맞춰 제각각 사용하기 시작했는데, 이를 한꺼번에 통합해서 정해진 공통적인 규격으로 주고받자는 것이 CGI이다. 그러니까 이런저런 언어들이 사용자들의 다양한 요청을 이해할 수 있게 "이 문을 지나면 이러한 형태가 됩니다"하고 정해놓은 규약이자 프로그램이 바로 CGI라는 것이다.

그렇다면 WSGI는 무엇이냐면 Web Server Gateway Interface이다.
이것은 파이썬에만 있는데 다른 언어에서는 php 모듈 활성화, 스프링-톰캣이 이런 역할을 한다고 한다. 이것도 결국은 들어오는 요청을 정해진 형식으로 파이썬에 전해준다고 생각하면 되겠다.

gunicorn은 개발이 아니라 운영을 위한 도구이므로 로컬 환경에 설치할 필요가 없다. 하지만 우리는 테스트를 하고 도커 이미지로 만들 것이기 때문에 일단은 설치해보자.

pip install gunicorn

[web] 부분에 본인의 프로젝트명을 작성해주면 된다. manage.py가 있는 root에서 gunicorn을 wsgi가 있는 폴더명을 넣어서 실행하면 된다.

gunicorn --bind 0:8000 [web].wsgi:application

그러고 나면

manage.py runserver를 한 것과 비슷하게 이런 메세지가 실행된 채로 기다리고 있다.

[2020-04-17 00:59:12 +0000] [32356] [INFO] Starting gunicorn 20.0.4
[2020-04-17 00:59:12 +0000] [32356] [INFO] Listening at: http://0.0.0.0:8000 (32356)
[2020-04-17 00:59:12 +0000] [32356] [INFO] Using worker: sync
[2020-04-17 00:59:12 +0000] [32359] [INFO] Booting worker with pid: 32359

runserver와 똑같이 본인의 IP 주소 및 8000번 포트로 접속해서 확인해보면 된다. 단, static 파일은 제대로 적용이 안될 것이다.

http://[본인의 IP]:8000

Nginx 설치

기존에 웹 서버라고 하면 apache가 대표적이었는데, 성능을 중심으로 나온 Nginx가 요즘의 대세로 떠오르고 있다.

5년전만해도 빨간색의 비율이 높지만 요즘은 비슷한 걸 볼 수가 있다. (웹 서버에 대한 관심이 줄어든건가..?)

sudo apt install nginx

어찌됐건 위의 명령어로 우분투에서 nginx를 설치할 수 있다.

cd /etc/nginx/sites-available/

그 다음 위의 명령어를 실행할건데, 우분투에 nginx를 설치하면 자동으로 /etc/nginx/sites-available/ 경로에 모든 것을 만들어준다.

sudo vim [본인 프로젝트]

그 후, vim 에디터로 아래 내용을 복사해서 붙여넣으면 된다.

server {
        listen 80;
        server_name [서버 ip 혹은 도메인];

        location /static {
                alias /home/ubuntu/[스태틱파일 경로]/static;
        }

        location / {
                include proxy_params;
                proxy_pass http://unix:/tmp/gunicorn.sock;
        }
}

대괄호로 표시한 부분은 꼭 고쳐주자

cd /etc/nginx/sites-enabled/

그다음 위의 경로로 이동한다. (site-available 과는 다르다)
이제 환경파일을 enabled에 링크해주어야한다.

sudo rm default
sudo ln -s /etc/nginx/sites-available/[본인 프로젝트]
ls

이렇게 실행을 해보면 링크된 파일이 보인다.

이렇게 하면, nginx가 설치가 완료되었다.

gunicorn을 다시 실행하고 ip주소 혹은 도메인으로 접속하면 본인의 프로젝트가 보일 것이다.

gunicorn을 우분투 서비스에 등록해두면 서버가 꺼질 때마다 자동으로 다시 킬 수 있다.