Wilkyway

1. Build

"create-react-app ." 명령으로 react app 생성 후 배포를 위해서는 아래의 명령으로 buid 합니다.

npm run build

이렇게 하면 build 폴더가 생성되는데 필요한 파일을 서버가 작동하는 폴더에 위치시키면 됩니다.

2. httpd.conf 항목 추가

매번 build된 파일을 apache가 서비스하는 폴더로 옮기는 작업은 번거롭습니다. 현재 작업중인 폴더를 직접 서비스하도록 추가하고 싶다면, httpd.conf파일에 아래의 항목을 추가해줍니다.

Alias /react "D:/05_Program_dev/03_web/04_react_hello/build"

<Directory "D:/05_Program_dev/03_web/04_react_hello/build">
    Options Indexes FollowSymLinks
    AllowOverride None
    Require all granted
</Directory>

이렇게 하면 'localhost/react'로 접속 시도시 해당 폴더에 접속하게 됩니다. 따라서 작업한 파일을 보려면

'localhost/react/index.html'로 시도하면 됩니다. 

3. package.json homepage 수정

아직 apache 설정이 익숙치 않아서 이것저것 건드려봅니다. 어떤 앱은 2번까지만 수행해도 되고, 또다른 경우에는 여전히 흰 화면만 나오고 있습니다. 이것이 정답인지 알기는 힘들지만, 이럴땐 homepage속성에 접근하고자 하는 url을 입력했더니 수행 가능해졌습니다.

4. .htaccess 파일 추가??

.htaccess 파일을 생성하는 방법이 있습니다. 배포 폴더 내에 또는 Build하기 전 /publish 폴더 내에 .htaccess 파일을 추가하여 아래와 같이 작성해줍니다. 

<.htaccess>

Options -MultiViews 
RewriteEngine On 
RewriteCond %{REQUEST_FILENAME} !-f 
RewriteRule ^ index.html [QSA,L]

이 방법을 쓰려면 httpd.conf 파일의 AllowOverride 부분을 AllowOverride All로 해야합니다. 그래야 .htaccess의 접근을 허용해줍니다. 그러나 이 방법 성능 및 보안의 문제가 있다고 하여 사용을 권장하지는 않는 것 같습니다. (참고자료)

또..어떤 분은 아래와 같이 속성을 지정한다고 했는데 이건 저도 안해봤습니다. 이래저래 안될경우 따라해보려고 소스만 남겨놓습니다. 상황에 맞게 시도해보시기 바랍니다.

FallbackResource ./index.html

오늘은 Flask 앱을 Apache와 연동시키는 작업을 해보겠습니다. 나중에 나오지만 mod_wsgi설치, httpd.conf파일 수정 등 산넘어 산입니다. ^^;;;

1. 아파치 직접 설치해도 되겠지만, 저는 XAMPP 를 깔겠습니다. 초보니까요..^^;; 이걸 사용하면 Apache, MySQL, PHP 서버를 버튼 클릭으로 간단히 켜고 끌 수 있게 해 줍니다. 주소는 https://www.apachefriends.org/index.html

설치 방법은 다른 글들을 확인하시기 바랍니다.

2. 아파치 인식시키기

우리 목표는 아래 명령을 수행해서 mod_wsgi를 설치하는게 우선적인 목표입니다.

pip install mod_wsgi

그런데, 아파치를 설치 했음에도 에러가 발생할 확률이 높습니다. 중간 부분에 아파치가 설치되지 않았다는 문구가 있을 겁니다. 그럴 때에는 아래와 같이 입력하여 아파치를 인식시켜줍니다. "F:\Apache24"부분은 각자의 apache 경로로 하시는거 주의하세요^^

set "MOD_WSGI_APACHE_ROOTDIR=F:\Apache24"

3. mod_wsgi 설치 관련 C++ 컴파일러 설치

여기서부터가 본격적인 시작이라고 보시면 되겠습니다. 리눅스 환경에서는 구성하기가 나름 쉬운 것 같은데, 윈도우 환경에서는 조금 까다롭습니다. 아직은 여전히 pip install mod_wsgi를 해도 빨간 에러가 계속 나올겁니다. 이제 C++ 컴파일러를 설치해야 합니다. VC++ 14.0 이상이 설치되어 있어야 한다고 합니다. 인터넷 검색하셔서 VC Build Tools 다운받으시면 됩니다. 찾기 어려울까봐 인터넷에 돌아다니는 파일 올립니다.  

이거 깔고 pip install mod_wsgi 이렇게 설치하시면 아마 될겁니다. 그 다음에도 안되는 다른 사이트 좀 더 살펴보시기 바랍니다...저는 여기까지만...ㅠㅠ

다른 OS의 경우에는 F:\Apache24\modules\mod_wsgi.so 파일이 생성된다는데, 윈도우는 좀 다릅니다. 설치하고 나면 위 경로와 같이 Python 설치 경로의 Scripts 폴더에 가 보시면 mod_wsgi-express.exe 파일이 있을 겁니다. 제대로 설치 된 것이라고 보면 됩니다.

4. httpd.conf 파일 설정

다음으로 아파치 환경설정파일을 손을 봐줘야 합니다. 위치는 F\Apache24\conf\httpd.conf 이고 넣을 내용은 

mod_wsgi-express module-config

라고 치면 나오는 내용을 복사해 넣습니다.

파이썬이 C:\program Files\Python38 을 사용하고 있는줄 알았는데, 아나콘다에서 다시 설치한 버전이 있었네요. wsgi는 다른 곳에 딸렸는데, 실행은 anaconda 버전으로 한다??...ㅠㅠ. 암튼 그 내용을 httpd.conf에 넣어줍니다.

LoadFile "c:/programdata/anaconda3/python38.dll"
LoadModule wsgi_module "c:/programdata/anaconda3/lib/site-packages/mod_wsgi/server/mod_wsgi.cp38-win_amd64.pyd"
WSGIPythonHome "c:/programdata/anaconda3"

파일을 열면 내용이 엄청 많은데, LoadModule 뒷부분에 바로 이어서 넣어주면 됩니다.

위 그림에서 WSGIScriptAlias / "D:/05_Program_dev/04_python/04_flaskapp/httpd.wsgi" 부분은 잠시 뒤에 설명하겠습니다.

 - LoadFile과 LoadModule 부분은 mod_wsgi 모듈을 로드하기 위한 부분이고

 - WSGIPythonHome은 파이썬 실행파일이 있는 폴더를 인식시켜주는 부분입니다.

5. httpd.wsgi 작성

실제 앱을 구동시킬 wsgi파일을 구현합니다.

import sys

sys.path.insert(0, "D:/05_Program_dev/04_python/04_flaskapp")

from app import app as application

필자의 앱은 아래와 같이 구성되어있는데, 위 코드의 sys.path.insert의 두번째 인자는 이 flask앱 폴더(04_flaskapp)를 경로 포함하여 넣어주면 되고, 임포트 하는 부분에서는 내부의 앱을 불러오면 됩니다. from app import app 하게 되면 파이썬 특성에 따라 __init__.py가 자동으로 실행되고, __init__.py 내부에 선언한 라우팅에 따라 template들을 출력하게 됩니다. 

사실 프로그램 구동을 위한 start_app.py를 실행하려고 했는데 직접 __init__.py를 불러오는 꼴이 되었습니다. 한단계 덜 거치는게 좋은 것도 같은데... 어떤게 좋은 건지는 계속 공부해보도록 하겠습니다.

6. httpd.conf에 연결

위에서 만든 httpd.wsgi를 아파치 서버에서 실행하도록 연결해 주려면 아까 수정하던 httpd.conf를 사용하여 인식시켜줘야 합니다.

WSGIScriptAlias / "D:/05_Program_dev/04_python/04_flaskapp/httpd.wsgi"

라우팅 "/" 로 들어오는 경우에는 "D:/05_~~~~.wsgi"를 실행한다 정도로 이해하시면 되겠습니다.

..

....

......

다른 블로그들을 보면 <Directory> <Files> 등을 설정하는 부분이 있는데, 현재로서는 의미를 잘 모르고, 이렇게만 해도 인식이 되는 것을 확인했습니다. 

아래는 이것저것 시도해보았지만 잘 안된 부분인데, 주요 인자가 있어서 혹시 필요한 경우를 대비해 기록으로 남겨놓을 까합니다.

LoadFile "c:/programdata/anaconda3/python38.dll"
LoadModule wsgi_module "c:/programdata/anaconda3/lib/site-packages/mod_wsgi/server/mod_wsgi.cp38-win_amd64.pyd"
WSGIPythonHome "c:/programdata/anaconda3"

<VirtualHost *:80>
    ServerName localhost
    WSGIScriptAlias / "D:/05_Program_dev/04_python/04_flaskapp/httpd.wsgi"
    <Directory "D:/05_Program_dev/04_python/04_flaskapp/">
        Options Indexes FollowSymLinks
        AllowOverride None
        Require all granted
    </Directory>

    <Directory "D:/05_Program_dev/04_python/04_flaskapp/app">
        WSGIApplicationGroup %{GLOBAL}
        Order deny,allow
        Allow from all
    </Directory>

</VirtualHost>

<IfModule wsgi_module>
## 웹서비스 "/" 경로에 wsgi 인터페이스 경로 지정
WSGIScriptAlias / /apps/python/src/flask/httpd.wsgi
## Python app 프로세스 실행 환경 설정
WSGIDaemonProcess app user=python group=apps threads=1
</IfModule>

## Python app 서비스를 위한 app source 경로 권한 설정
<Directory "/apps/python/src">
    Options Indexes FollowSymLinks
    AllowOverride None
    Require all granted
</Directory>

<Directory /apps/python/src/flask>
    WSGIApplicationGroup %{GLOBAL}
    Order deny,allow
    Allow from all
</Directory>

VirtualHost *:80 => 호스트를 지정하며 포트는 80포트를 사용한다. 포트가 겹쳐도 호스트가 다르기 때문에 상관없다.

ServerAdmin => 서버의 주인.

ServerName => 서버의 주소. 이 주소를 통해서 접근.

ServerAlias => 축약된 형태로 접근할 별명.

ErrorLog => 서버 접근시 일어는 에러 메시지를 기록하는 파일을 정한다. 이 속성을 정했다면 반드시 해당폴더가 존재해야한다.

CustomLog => 서버 기록을 기록하는 파일을 정한다. 이 속성을 정했다면 반드시 해당폴더가 존재해야한다.

WSGIDaemonProcess => wsgi를 데몬으로 실행시킬 때 프로세스 이름. 사용자 정의 가능

WSGIProcessGroup => wsgi프로세스 그룹이름. 사용자 정의가능

WSGIScriptAlias => wsgi를 실행시킬 스크립트의 위치. 우리가 만든 파일의 위치를 지정해준다.

Alias => 특정 파일의 별면. 보통 static으로 해야 하는데, 이는 WAS가 static에 접근해야하기 때문

- 끝 -