유니티 WebGL 호스팅 하기 (static, css 적용 등)

장고에서 웹페이지를 호스팅 하는 내용 정리. 

 

1. 장고에서 app 생성 -> 해당 폴더에서 templates 폴더 생성 

2. html 파일을 templates 내부로 이동
3. urls.py와 views.py 수정

     * urls.py 에서 url 추가 후 views.py 의 함수 호출

     * views.py 에서는 다음의 코드 참조하여 html을 리턴

	....
    context = {}
    return render(request, '파일명.html', context)
    ....

 

html 내부에서 사용되는 css, javascript 등은 static 설정을 이용해야 한다. 

 

3. 장고 가상환경 폴더 -> settings.py 에 다음을 추가

import os.path

......

STATIC_URL = 'static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

 

4. 장고 앱 폴더 -> static 폴더 생성

5. 사용할 css, javascript 등을 static 폴더 안으로 이동

6. 2. 에서 이동한 html 파일 편집 -> css, javascript 등을 참조 하는 곳에 다음의 코드 수정
     * html 파일의 html 태그 위쪽에 {% load static %} 추가

     * href 태그를 사용 하는곳은 : "{% static '경로위치/파일명.css' %}"

      * javascript 의 경우 : "{% static '경로위치/js파일명.js' %}"

 

이 기본지식을 기반으로 WebGL을 호스팅 하는법

 

1. Unity WebGL 빌드 (결과물)
     * index.html

     * Build 폴더, StreamingAssets 폴더, TemplateData 폴더 가 생성됨.

2. 장고 앱폴더 -> templates 폴더 안에 index.html 이동

3. 장고 앱폴더 -> static 에 Build, StreamingAssets, TemplateData 폴더 이동

4. index.html 수정
     * buildUrl 변수를 수정

var buildUrl = "static/Build";

 

 

참고로 같은 네트워크에 있는 기기로 해당 페이지를 접근하기 위해서, settings.py의 allowed host를 '*' 세팅하고, 

python manage.py runserver를 0.0.0.0:포트번호 로 구동해야 한다.

이후 클라이언트에서 장고  ip:포트번호 입력하여 접속하면 된다