이 때까지 uwsgi 를 이용한 배포를 사용했었다. 그러다 개인 서버를 ubunt22.04 로 업그래이드 하고 이번에는 gunicorn 을 사용해보기로 했다. 개인 서버이기 때문에 여러 flask 가 배포될 수 있는 환경이다. 그래서 virtualenv 환경은 나에게 필수이다. 그리고 프로세스가 죽지 않도록 관리하기 위해 systemd 를 적용했다. 그러다 보니 일반적은 gunicorn 환경보다는 좀 복잡한 편이다.
전체 환경은
flask + gunicorn + Nginx  그리고 systemd 설정이다. 
Ubuntu 22.04
Ngin 1.22.0
gunicorn 20.1.0
Flask 2.2.2
Python  3.10.6

참고 사이트
* https://docs.gunicorn.org/en/stable/deploy.html#using-virtualenv
* https://stackoverflow.com/questions/42219633/running-two-instances-of-gunicorn/42230370#42230370

nginx 를 설치한다든지 파이썬 가상환경을 설치하는 등의 과정은 생략했다. 인터넷에 나보다 더 잘 설명해둔 자료가 많기에 어렵지 않을 것이다. 다만 gunicorn 으로 배포시 systemd target 을 등록하는 과정은 찾기 어려워서 기록을 남겨둔다. 

0.
여러개의 flask 가 동작하는 환경이기 때문에 프로젝트명을 통일하는게 좋다. 여기서는 flask_labstoo  이다. 
1. virtualenv 환경 구축
  내 경우 이런 환경은 /opt/py_envs/  아래 폴더에 구축하는 편이다.  /opt/py_envs/flask_labstoo  디렉토리에 virtualenv 환경을 구축했다. 
2. gunicorn 설치
 gunicorn 을 apt 로 설치할 수도 있고, 파이썬으로도 설치할 수 있다. virtualenv 환경을 사용해야하는 경우라면 꼭 해당 virtualenv 가 active 된 상태에서 pip instal gunicorn  으로 설치해야한다.
이 경우 gunicorn 위치가 /opt/py_envs/flask_labstoo/bin/gunicorn  에 존재하게 된다.
3. 파이썬 소스코드 받기
 내 소스코드의 위치는 /user/share/nginx/flask_labstoo   이다. 
4. gunicorn 설정 테스트
/usr/share/nginx/flask_labstoo 디렉토리에서 아래 코드를 실행시킨다. 
/opt/py_envs/flask_labstoo/bin/gunicorn --workers 2 --bind 0.0.0.0:8000  main:app
여기서 main 은 flask 가 동작하는 wsgi 파일명이다. 내 경우는 main.py 에 flask 를 동작하는 코드가 아래 처럼 들어있다.

======== main.py ========
from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello_world():
    return "<p>Hello, World!</p>"

if __name__ == '__main__':
    PORT = os.getenv('PORT') or 9000
    if len(sys.argv) == 1 or sys.argv[1] == "runserver":
        app.run(host='0.0.0.0', port=PORT, debug=True)

================================

이렇게 해서 웹브라우저에서 8000 포트로 접속이 가능한지 테스트 해 본다. 경우에 따라서 리눅스 서버의 포트 open 이 안되어 있거나 클라우드 서버의 port 가 안 열려 있으면 접속이 안되는 경우도 있다. 
 working 디렉토리 상관없이 gunicorn 을 실행하기 위해서는 아래와 같이 사용해야 한다. systemd 설정 할 때는 아래 코드를 사용하게 될 것이다. 
/opt/py_envs/flask_labstoo/bin/gunicorn --workers 2 --bind unix:/var/run/flask_labstoo_gunicorn.sock --chdir /usr/share/nginx/flask_labstoo main:app
--chdir 를 사용해서 

5. sytemd 설정
systemd 의 여러 서비스들의 묶음을 target 이라고 한다. gunicorn 이 여러개가 실행될 때, 이 서비스를 묶기위해 guicorn target 을 설정하게 된다. 그리고 systemd 서비스를 등록하게 하기위해 서비스 템플릿을 사용하게 된다. 

sudo vim /etc/systemd/system/gunicorn.target
==== gunicorn.target ====
[Unit]
Description=Gunicorn

[Install]
WantedBy=multi-user.target
========


서비스 템플릿파일 생성한다.   %i 를 잘 사용해야 한다.

sudo vim /etc/systemd/system/gunicorn@.service
==== gunicorn@.service ====
[Unit]
Description=gunicorn daemon
After=network.target
PartOf=gunicorn.target
# Since systemd 235 reloading target can pass through
ReloadPropagatedFrom=gunicorn.target


[Service]
User=root
Group=root
# WorkingDirectory가 동작하지 않음.
# WorkingDirectory=/user/share/nginx/%i

ExecStart=/opt/py_envs/%i/bin/gunicorn --workers 2 --bind unix:/var/run/%i_gunicorn.sock  --chdir /usr/share/nginx/%i  main:app

[Install]
WantedBy=gunicorn.target

========


우선 처음에 타켓서비스를 등록하고 서비스를 등록하고, 서비스를 시작해야 한다. 

sudo systemctl start gunicorn.target
sudo systemctl enable  gunicorn@flask_labstoo
sudo systemctl start gunicorn@flask_labstoo

sudo systemctl enable  gunicorn@flask_labstoo 하는 과정에서  gunicorn@.service 파일의 %i 부분에 flask_labstoo  가 들어가서 등록되게 된다. (이 말은 추가적으로 flask 서버를 배포할 때는 소스파일, virtualenv 등 이름을 잘 정해야 한다는 것을 의미한다.

잘된다면 이것으로 끝나야 한다. 잘 동작하는지 확인은 sudo systemctl status gunicorn@flask_labstoo 으로 확인가능하다. 잘동작한다면  Active: active (running)   이 보여야 한다. 잘 안된다면 sudo  journalctl -u gunicorn@flask_labstoo  명령어도 더 자세한 에러 상태를 알 수 있다. 키워드을 찾아 인터넷에 검색해 가면서 해결해야 한다. 그리고 여기서 위에서 설정한 것을 변경할 필요가 있다면 변경 후 시스템을 재로딩한 후 서비스를 다시 동작시켜야 한다. 
sudo systemctl daemon-reload
sudo systemctl restart gunicorn@flask_labstoo

systemd 설정 명령어

#### systemd 설정 명령어 ####

# taret 등록과 부팅시 자동시작(stop 은 제거)
sudo systemctl start gunicorn.target
sudo systemctl stop gunicorn.target

# 서비스 추가 삭제
# 위의 gunicorn@.service 에서 %i 대신 flask_labstoo  가 들어가게된다. 
sudo systemctl enable  gunicorn@flask_labstoo
sudo systemctl disable gunicorn@flask_labstoo

# 서비스 시작, 종료
sudo systemctl start gunicorn@flask_labstoo
sudo systemctl stop gunicorn@flask_labstoo
sudo systemctl restart gunicorn@flask_labstoo

# 시스템 재로딩시
# 모든 변경 사항을 적용한다. 위의 파일을 수정하고 나서 적용해야 한다.
sudo systemctl daemon-reload

# 시스템 오류 확인
sudo systemctl status gunicorn.target

# 서비스 오류 확인
sudo systemctl status gunicorn@flask_labstoo
# 좀 더 상세한 오류 확인
sudo journalctl -u gunicorn@flask_labstoo

잘 동작한다면 /var/run/flask_labstoo_gunicorn.sock 이라는 파일이 생성되어야 한다. 이 파일을 통해 nginx 와 통신하게 한다. 


6. Nginx 설정 
/etc/nginx/sites-available 폴더에 적당한 파일 생성. 여기서는 labstoo 라는 이름이다. 

======== labstoo ========
server {
    listen 80;
    server_name labstoo.com;
    return 302 https://labstoo.co$request_uri;
}

server {

    listen 443 ssl http2;
    ssl_certificate /etc/letsencrypt/live/labstoo.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/labstoo.com/privkey.pem;

    server_name labstoo.com;
    client_max_body_size 100M;
    keepalive_timeout  0;
    
    # GET, POSST, PUT, DELETE, PATCH 만 가능
    if ($request_method !~ ^(GET|POST|PUT|DELETE|PATCH)$ ) {
        return 444;
   }
   

    root /var/www/flask_labstoo/;
    access_log /var/log/nginx/flask_labstoo_access.log;
    access_log /var/log/nginx/flask_labstoo_request.log   post_log;
    error_log /var/log/nginx/flask_labstoo_error.log;

    location /static/ {
        alias /usr/share/nginx/flask_labstoo/static/;
    }

    location /{
        include proxy_params;
        proxy_pass http://unix:/var/run/flask_labstoo_gunicorn.sock;
    }

}
================================

내 경우에는 letsencrypt 인증서를 설정했다. 
가장 중요한 부븐은 proxy_pass 부분으로 해당 sock 파일의 위치가 gunicorn 에서 생성한 sock 파일위치와 동일해야한다. 

이 설정 후 nginx 를 재시작시키면 된다. 


추가 필요작업
* gunicorn 에서 로그를 남기는 과정을 설정하지 않은 것 같다. flask 에러가 발생히 확인을 위해 로그를 남기는 세팅이 필요하다. 
* systemd 설정에서 그냥 root 권한으로 gunicorn을 실행하도록 했는데, 이 부분을 www-data 같은 것으로 실행하도록 설정해야 해킹이 발생할 때 대비할 수 있을 것 같다. 

 

 전에 HTTP/2 Server Push 사용하기(https://yiunsr.tistory.com/852)  라는 글을 적은 적 있다. 이 때 나는 Nginx 의 http2_push 만을 이용한 방법을 이야기 했다.
 우선 http2 server push 는 html 페이지가 전달될 때, 해당 html 페이지에서 사용하는 css, js, img 등을 같이 한 번에 보내는 방법이다. http2_push 의 경우는 nginx 설정에 들어가기 때문에 고정적인 asset 만 가능하다. (HTTP/2 Server Push 사용하기(https://yiunsr.tistory.com/852)  를 참고할 것) 그런데 이번에 알게된 http2_push_preload 의 경우 flask 에서 Reponse 하는 Header 에 따라서 동적으로 nginx 에게 http2 sesrver push 리소스를 알려줄 수 있다. 이렇게 하면 nginx 에서 알아서 해당 리소스를 같이 http2 server push 해서 보내가 된다. 
내 경우 Flask-Assets 이라는 것을 이용해서 js, css 파일을 번들링해서 하는 파일이름에 hash된 이름이 들어간다.  (app_common.js?7a0733ee 이런 식으로 파일의 hash 가 생성되어 추가된다. ). 이 때마다 nginx 설정을 변경하는 것은 너무 불편하다. 이런 것을 자동으로 구현 할 수 있게 된다. 
예를 flask 만을 들었는데, django 의 경우도 가능할 것 같다. reponse header 를 수정할 수 있는 모든 플러그인은 가능할 것 같다. (그래서 PHP 같은 것도 가능할 것 같다. ) 

 사용하기 위해서는 nginx  에서 설정하는 방법은 아래와 같이 on 시키면 된다. 

location  = / {
        include uwsgi_params;
        uwsgi_pass .............
        ............
        http2_push_preload on;
        ............
    }


 여기서 중요한 것은 Flask 서버쪽에서도 설정이 필요하다. 일반적으로 Request Header 를 이용하는 경우는 있어도 Response Header 를 이용하는 경우는 거의 없을 것이다. 크롬 DevTools 을 통해 네트워크를 보면 Response Header도  볼 수있다. 

이 Response Header 에 link 키에 </static/js/script.js>; rel=preload; as=script    같은 것을 넣어주면 된다. 이러면 Nginx 가 자동으로 html 전달되는 동안 /app/script.js 파일도 같이 전달한다. css 의 경우 </static/css/common.css>; as=style; rel=preload 같은 형태로 넣으면 된다. 2개 이상일 경우 이것을 ,(콤마) 로 구별해서 넣을 수 있다. </static/js/script.js>; rel=preload; as=script,</static/css/common.css>; as=style; rel=preload   당연히 이 경로는 해당도메인/static/js/script.js 가 접근가능하도록 설정되어 있어야 한다. 

Flask 에서는 Reponse Header 는 https://stackoverflow.com/a/25860353/6652082  에서 나타난 것처럼 할 수도 있고 https://stackoverflow.com/a/63691704/6652082 에서 처럼 return 할 때 지정할 수도 있다. 
대략 아래와 같은 형태가 될 것이다. 

from flask import make_response

@main.route('/', methods=['GET'])
def index():
    resp = make_response(render_template('main/index.html'))
    resp.headers["link"] = "</static/js/script.js>; rel=preload; as=script,</static/css/common.css>; as=style; rel=preload"
    return resp

 

당연히 HTML 코드는 아래 처럼 되어 있을 것이다. 

<html>
    <link href="/static/css/common.css" rel="stylesheet">
    <body>
        Hello, World
    	<script src="/static/js/script.js"></script>
    </body>

</html>

만약 HTTP/2 를 지원하지 않는다면  기존과 같이 HTML 을 랜더링 할 때 common.css, script.js 파일을 서버로 요청할게 될 것이다. 



여기에 더 나가서 cookies 를 잘 이용하면 이미 해당 리소스가 있는 경우(최근에 해당 페이지에 접근해서 리소스를 받은 경우) http2 server push 가 필요없는 경우 굳이 보내지 않도록 설정할 수도 있다. 내 경우에는 Flask-Assets 때문에 좀 더 고민을 해봐야 한다. 어느정도 코드가 정리되면 올리도록 하겠다. 

 

회사에서 외주 퍼블리시 한 HTML 코드를 보다보니, 화가 났다. 내 기준에으로 코드가 너무 엉망이었다. 수정이 쉽도록 CSS 를 통해서 grid 를 사용할 수 있도록 해주어야 하는데, 그렇게 되어 있지 않았다. (처음부터 이것을 분명히 짚고 넘어갔지만 가격때문에 강하게 주장할 수 없었다. 사실 이런 것을 원하면 전문 업체에게 요청하는게 맞다. )
 CSS를 잘 이용하면 javascript 없이 구현 가능한 코드인데 이 코드를 js 로 구현했다. checkbox 와 radio 형식의 버튼을 자바스크립트 onclick 이벤트시 class 를 추가하는 방식으로 구현하고 있었다. 이 코드는 아무리봐도 css checkbox 를 이용하면 될 것 같아서 구현해 보았다. 

https://jsfiddle.net/nahanmil/bkqj7x4c/11/



IE 11 에서도 정상적으로 동작한다.