[WEB/Error] Django + uWSGI + NGINX + HAproxy 진행 시 CSS 적용 안되는 에러 및 해결 방법 총정리

제대로 정리된게 없어서 진짜 오진장 삽질하고, 이건 써야겠다 하고 생각만 오만번 하다가 이제 정리..

여기서의 에러는 크롬 검사 눌렀을 때, css 파일 자체가 보이지 않는 상황을 말함.

 

서버에 웹 배포할 때, django → uwsgi → nginx → haproxy 순으로 적용시키니까, 이 순서로 차례차례 정리해보겠음

 

 

[Django CSS 적용 안되는 에러]

사실 나는 django 실행시키면서 css 적용이 안되는 에러가 생기진 않았는데, 방법은 찾아둔게 있어서 정리.

 

css 적용이 안되면 일단 가장 먼저 (1) 경로 확인해주고,

분명 그 경로가 맞음에도 불구하고 css 파일을 가져오지 않는다면, (2) static 내용들을 한 폴더로 모아주어야 함.

 

settings.py에 static을 한 폴더로 몰아 저장하고, 그 경로를 설정해주기 위해 아래와 같이 코드 추가하기

('main'은 제가 설정한 장고 앱 이름이므로, 장고 앱 이름은 사용자에게 맞게 작성해주세요.)

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.2/howto/static-files/

STATIC_URL = '/static/'

# static path
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'main', 'static'),
)

# collect static file for deployment
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

 

위와 같이 코드를 작성해주면, static 내용들을 한 폴더로 모아줄 수 있도록 명령어를 실행시켜야 함. 터미널 창에 manage.py 파일 있는 곳으로 가서 아래 명령어 입력

python manage.py collectstatic

 

그러면 프로젝트 내에 static이라는 폴더가 생성된 것을 볼 수 있음. 이제 다시 django 실행시키면 적용된 것을 확인할 수 있음

python manage.py runserver

 

 

[uWSGI CSS 적용 안되는 에러]

나는 CSS 적용 안되는 에러가 여기서부터였는데, 위 collectstatic 해준 후 해결되었음. 위 해결방법 참고 바람.

 

 

[NGINX CSS 적용 안되는 에러]

django랑 uwsgi css 적용 되었는지 확인해보고 진행하기. 안되었으면 django랑 uwsgi 순서대로 css 적용시키는 문제부터 해결해야 함.

 

대부분 nginx.conf 파일에서 제대로 수정 안되었거나, static location 할당 안해주었거나, location 경로 문제일 것임.

nginx.conf 파일 찾아서, 아래와 같이 location /static 부분 작성해줌으로써 static에 대한 서버 따로 할당해주기.

(nginx 설치 시 제 포스터 참고하셨다면 /home/user/apps/nginx/nginx/conf/ 안에 있습니다. nginx.conf랑 nginx.conf.default 둘 다 수정하셔야지 아마 오류 안뜨실거에요!)

 

static 경로는 위에서 collectstatic 해서 생긴 static 폴더 경로 작성하면 됨

server {
	listen			80;
    	server_name		localhost;
    
    	location /static {
    		alias /home/user/apps/myweb/static;
    	}
    
	...
    	...
    	...

 

그리고 nginx 재시작.

 

 

[HAproxy CSS 적용 안되는 에러]

이거 제대로 정리된 정보가 없어서 삽질만 진짜 오만번 함.

위 모든 과정을 다 거치고, nginx 실행시켰을 때 CSS 적용되는거 확인했는데, haproxy 들어가니까 적용 안된다?하면

 

일단, (1) 오른쪽 마우스 누르셔서 검사 페이지 들어가고 새로고침 함 해보세요.. 왠지 모르겠는데 이러다 적용된 것도 있었어서...

안된다면, (2) haproxy.cfg 파일 안에서 static 서버를 따로 할당해주어야 함.

만약, 제 포스터 참고하셨다면(https://hyewon-s-dev.tistory.com/12), haproxy.cfg 위치는 /home/user/apps/haproxy/haproxy/haproxy.cfg에 있음

 

haproxy.cfg 아래와 같이 코드 추가시키기

[frontend]

frontend PassThrough1 # for css
	bind	*:80
	acl url_static       path_beg       -i /static /images /javascript /stylesheets /css /js /img /fonts /admin
    	acl url_static       path_end       -i .jpg .gif .png .css .js

	http-request set-header X-Forwarded-Port %[dst_port]
	http-request set-header X-Forwarded-Proto http if !{ ssl_fc }
	http-request set-header X-Forwarded-Proto https if { ssl_fc }
	
	use_backend	static	if url_static
	default_backend		static

[backend]

backend static
	balance	roundrobin
	server	static 127.0.0.1:80/static/css/main.css check

(여기 .css 경로는 각자 맞는 경로로 입력해주세요.)

 

이렇게 작성하고 haproxy 재실행하니 css 잘 적용 됨.. 

 

 

 

 

 

+ 추가적으로, 이건 정리 언제할지 몰라서 적는 팁인데, css가 서버에 적용되었음에도 불구하고 수정된 css 내용이 화면에 적용이 되지 않는다면, chrome 내의 캐시에 기존 css가 저장되어있어서 새로 파일을 불러오지 않아 생기는 문제일 수 있음.

나 같은 경우, flask든 django든 run하고 접속할 때는 무조건 게스트모드로 들어감. (아니면 크롬 캐시 삭제도 ㄱㅊ. 번거로워서 걍 게스트모드로 접속해서 개발함)

 

 

 

 

시간은 금이에요 .. 도움 되시길..

 

피드백, 틀린 부분 지적 환영입니다 :)