You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

149 lines
6.4 KiB

2 years ago
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>로컬 환경에서 구동 방법([name])</h1>
<p>
만약 procedural geometries 만을 사용하고 다른 텍스쳐를 불러오지 않았다면, 웹페이지는 파일 매니저에서 HTML파일을 더블클릭하는 즉시 작업을 시작할 것이고,
브라우저에서 바로 작업되는 화면이 나타날 것입니다. (주소창에 <em>file:///yourFile.html</em> 를 치면 확인이 될 것입니다.).
</p>
<h2>외부 파일에서 컨텐츠 불러오기</h2>
<div>
<p>
외부 파일에서 모델이나 텍스쳐를 불러올 경우, 브라우저의' [link:http://en.wikipedia.org/wiki/Same_origin_policy same origin policy]
보안 제한때문에 파일 불러오기가 실패가 될 것입니다.
</p>
<p>이 문제의 해결법은 두 가지가 있습니다.</p>
<ol>
<li>
브라우저에서 로컬 파일의 보안설정을 변경합니다. 이를 통해<code>file:///yourFile.html</code>로 들어가 확인할 수 있을 것입니다.
</li>
<li>
파일을 로컬 웹 서버에서 돌리는 방법입니다. <code>http://localhost/yourFile.html</code>로 들어가 확인할 수 있을 것입니다.
</li>
</ol>
<p>
1번 방법을 쓸 때, 일반 웹서핑을 같은 방식으로 쓰게되면 보안적으로 취약해지는 점을 인지해야 합니다. 안전한 개발을 위해
각각의 브라우저 프로필, 바로가기를 만드는 것도 좋습니다. 차례대로 방법을 알아봅시다.
</p>
</div>
<h2>로컬 서버에서 실행</h2>
<div>
<p>
많은 프로그래밍 언어는 기본적으로 간단한 HTTP 서버가 설치되어 있습니다. [link:https://www.apache.org/ Apache]나 [link:https://nginx.org NGINX]같은 프로덕션용 정도로 갖추어져 있지는 않지만, three.js를 테스트해보기에는 충분합니다.
</p>
<h3>유명 코드 에디터 관련 플러그인</h3>
<div>
<p>몇몇 코드 에디터들은 간단한 서버를 필요할 때 구축할 수 있게 플러그인을 마련해 두고 있습니다.</p>
<ul>
<li>Visual Studio Code의 [link:https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer Live Server]
.</li>
<li>Atom의 [link:https://atom.io/packages/atom-live-server Live Server].</li>
</ul>
</div>
<h3>Servez</h3>
<div>
<p>
[link:https://greggman.github.io/servez Servez]는 GUI 환경의 간단한 서버입니다.
</p>
</div>
<h3>Node.js http-server</h3>
<div>
<p>Node.js에는 간단한 HTTP 서버 패키지가 있습니다. 설치 방법:</p>
<code>npm install http-server -g</code>
<p>실행 (로컬 저장소에서):</p>
<code>http-server . -p 8000</code>
</div>
<h3>Python 서버</h3>
<div>
<p>
[link:http://python.org/ Python]이 설치되어 있다면, 커맨드라인으로 충분히 실행할 수 있습니다. (작업 디렉토리 내에서):
</p>
<code>
//Python 2.x
python -m SimpleHTTPServer
//Python 3.x
python -m http.server
</code>
<p>이 코드는 현재 디렉토리의 파일들을 localhost 8000번 포트로 내보내 줄 것입니다. 주소 예시는 다음과 같습니다.
</p>
<code>http://localhost:8000/</code>
</div>
<h3>Ruby 서버</h3>
<div>
<p>Ruby가 설치되어 있다면, 아래 코드를 사용하면 같은 결과를 확인할 수 있습니다.</p>
<code>
ruby -r webrick -e "s = WEBrick::HTTPServer.new(:Port => 8000, :DocumentRoot => Dir.pwd); trap('INT') { s.shutdown }; s.start"
</code>
</div>
<h3>PHP 서버</h3>
<div>
<p>PHP도 내장된 웹서버가 있어, php 5.4.0부터 다음과 같이 활용 가능합니다:</p>
<code>php -S localhost:8000</code>
</div>
<h3>Lighttpd</h3>
<div>
<p>
Lighttpd는 일반적인 목적의 아주 가벼운 웹서버입니다. 여기서에는 Homebrew를 통해 OSX에 설치하는 예를 소개해 보겠습니다.
다른 서버들과는 달리, lighttpd 프로덕션 서버로 사용될 모든 것이 갖추어져 있습니다.
</p>
<ol>
<li>
homebrew를 통해 설치합니다.
<code>brew install lighttpd</code>
</li>
<li>
웹서버에서 실행하고자 하는 디렉토리에 lighttpd.conf라는 설정파일을 만듭니다.
예제는 여기([link:http://redmine.lighttpd.net/projects/lighttpd/wiki/TutorialConfiguration link])에서 확인할 수 있습니다.
</li>
<li>
설정 파일에서, server.document-root를 서버로 쓰고자 하는 디렉토리로 설정합니다.
</li>
<li>
다음과 같이 실행합니다.
<code>lighttpd -f lighttpd.conf</code>
</li>
<li>
http://localhost:3000/ 로 들어가면 선택한 디렉토리의 파일들을 보여줄 것입니다.
</li>
</ol>
</div>
<h3>IIS</h3>
<div>
<p>마이크로소프트 IIS를 웹서버로 사용한다면, 실행하기에 앞서 .fbx 확장자와 관련된 MIME 타입 설정을 추가해야 합니다.</p>
<code>File name extension: fbx MIME Type: text/plain</code>
<p>기본적으로 IIS는 .fbx, .obj 파일의 다운로드를 막아 놓았습니다. IIS에서 이러한 파일들이 다운로드 될 수 있도록 설정해야 합니다.</p>
</div>
<p>
다른 간단한 방법으로는 Stack Overflow에서 논의된 내용([link:http://stackoverflow.com/q/12905426/24874 link])을 확인해 보세요.
</p>
</div>
</body>
</html>