/static 404 에러(css, js오류) | 아파치 장고 static 파일 모으기 (장고, 아파치)- [Linux]

문제

백엔드를 장고-아파치로 서버를 두고, 프론트를 리액트로 구현중

 

1) 아파치 서버에서 /etc/apache2/sites-enabled/000-edfault.conf 

Alias /static /home/django/venv/lib/python3.6/site-packages/rest_framework/static 등으로 따로 static경로를 추가해줘야 해당 static디렉토리의 css,js등을 불러오는 것을 확인했다.

 

그러나 이는 한 포트내에서만 가능했다. 나는 3333포트에 rest_framework, admin페이지, react페이지 모두 반환하고 싶었는데 아파치 설정으로는 모두 포트를 다르게 지정해줘야 해서 문제가 생겼다.

아래와 같이 할 경우에 하나만 인식을 하게되더라...

<VirtualHost *.:3333>
...
Alias /static /home/django/venv/lib/python3.6/site-packages/rest_framework/static
Alias /static /home/django/venv/lib/python3.6/site-packages/django/contrib/admin/static
Alias /static /home/django/frontend/build/static //리액트 빌드시 생기는 static

...
</VirtualHost>

위와 같이할 경우 3333포트 에서는 css, js를 하나만 불러옴

 

해결방법

이를 해결하기 위해서는 static디렉토리들을 프로젝트내에 한곳에 모아주는 작업이 필요했다.

다행이도 장고에서 해당 작업을 해주는 명령어가 존재했다.

python3 manage.py collectstatic

 

※ 해당 명령어 실행시 STATIC_ROOT를 지정해라 라는 오류가 나타날 수도있다. (필자는 나타남)

 

project/project/settings.py에 아래와 같이 수정

STATIC_URL = '/static/'

# STATIC_ROOT는 static디렉토리의 위치를 지정하는 곳이다.
STATIC_ROOT = '/home/django/backend/project/project/static'

# 리액트 일경우에는 아래와같이 리액트생성 디렉토리내의 build/static 추가해줘야함
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, '../../frontend', 'build', 'static'),
]

※ static디렉토리가 없을 경우에는 /project/project/static을 생성해주고 명령어를 실행한다.

 

결과

manage.py가 있는 디렉토리내에서 python3 manage.py collectstatic 명렁어를 실행하면 아래와 같이 질문이 나오면서 Yes누르면 static디렉토리들을 종합하게된다.

static디렉토리를 확인해보니

 

 

나와같은 문제를 겪는사람들은 나보다 빠르게..문제를 해결하길 바란다 시간이 아깝다..