How-to-run-things-locally.html 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. <!DOCTYPE html>
  2. <html lang="it">
  3. <head>
  4. <meta charset="utf-8">
  5. <base href="../../../" />
  6. <script src="page.js"></script>
  7. <link type="text/css" rel="stylesheet" href="page.css" />
  8. </head>
  9. <body>
  10. <h1>Esecuzione in locale ([name])</h1>
  11. <p>
  12. Se si usano solo geometrie procedurali e non si caricano texture, le pagine web dovrebbero funzionare direttamente
  13. dal file system, basta fare doppio click sul file HTML in un file manager e la pagina dovrebbe apparire funzionante nel browser
  14. (si vedrà <em>file:///yourFile.html</em> nella barra degli indirizzi del browser).
  15. </p>
  16. <h2>Contenuto caricato da file esterni</h2>
  17. <div>
  18. <p>
  19. Se si caricano modelli o texture da file esterni, a causa delle restrizioni di sicurezza del [link:http://en.wikipedia.org/wiki/Same_origin_policy same origin policy] del browser,
  20. il caricamento da un file system fallirà con un'eccezione di sicurezza.
  21. </p>
  22. <p>
  23. Per risolvere questo problema, conviene eseguire i file da un server locale. Questo permette di accedere alla pagina come:
  24. </p>
  25. <p>
  26. <code>http://localhost/yourFile.html</code>
  27. </p>
  28. <p>
  29. Anche se è possibile cambiare le impostazioni di sicurezza del browser invece di lanciare un server in locale,
  30. non lo raccomandiamo. Utilizzando questo approccio si potrebbe esporre il proprio dispositivo a molte vulnerabilità soprattutto se
  31. lo stesso browser viene utilizzato per la regolare navigazione sul web. Usare un server locale è una pratica standard nello sviluppo
  32. web. Qui sotto, spieghiamo come si installa e utilizza un server locale.
  33. </p>
  34. </div>
  35. <h2>Eseguire un server locale</h2>
  36. <div>
  37. <p>
  38. Molti linguaggi di programmazione hanno semplici server HTTP integrati. Non sono completi come i server di produzione
  39. come ad esempio [link:https://www.apache.org/ Apache] o [link:https://nginx.org NGINX], ma sono sufficienti per testare la tua applicazione three.js.
  40. </p>
  41. <h3>Plugin per i principali editor</h3>
  42. <div>
  43. <p>Alcuni editor hanno plugin che genereranno un semplice server su richiesta.</p>
  44. <ul>
  45. <li>[link:https://marketplace.visualstudio.com/items?itemName=yandeu.five-server Five Server] per Visual Studio Code.</li>
  46. <li>[link:https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer Live Server] per Visual Studio Code.</li>
  47. <li>[link:https://atom.io/packages/atom-live-server Live Server] per Atom.</li>
  48. </ul>
  49. </div>
  50. <h3>Servez</h3>
  51. <div>
  52. <p>
  53. [link:https://greggman.github.io/servez Servez] è un semplice server con GUI.
  54. </p>
  55. </div>
  56. <h3>Node.js five-server</h3>
  57. <div>
  58. <p>Server di sviluppo con un reload in tempo reale. Installazione:</p>
  59. <code>
  60. # Eliminare live-server (se è presente)
  61. npm -g rm live-server
  62. # Installare five-server
  63. npm -g i five-server
  64. # Aggiornare five-server (di volta in volta)
  65. npm -g i five-server@latest
  66. </code>
  67. <p>Esecuzione (dalla tua cartella locale):</p>
  68. <code>five-server . -p 8000</code>
  69. </div>
  70. <h3>Node.js http-server</h3>
  71. <div>
  72. <p>Node.js ha un semplice server HTTP. Installazione:</p>
  73. <code>npm install http-server -g</code>
  74. <p>Esecuzione (dalla tua cartella locale):</p>
  75. <code>http-server . -p 8000</code>
  76. </div>
  77. <h3>Python server</h3>
  78. <div>
  79. <p>
  80. Se hai installato [link:http://python.org/ Python], dovrebbe essere sufficiente eseguire
  81. i seguenti comandi da terminale (dalla cartella di lavoro):
  82. </p>
  83. <code>
  84. //Python 2.x
  85. python -m SimpleHTTPServer
  86. //Python 3.x
  87. python -m http.server
  88. </code>
  89. <p>Questo servirà i file dalla cartella corrente a localhost sotto la porta 8000, cioè nella barra degli indirizzi digita:</p>
  90. <code>http://localhost:8000/</code>
  91. </div>
  92. <h3>Ruby server</h3>
  93. <div>
  94. <p>Se hai installato Ruby, puoi avere lo stesso risultato eseguendo il seguente comando:</p>
  95. <code>
  96. ruby -r webrick -e "s = WEBrick::HTTPServer.new(:Port => 8000, :DocumentRoot => Dir.pwd); trap('INT') { s.shutdown }; s.start"
  97. </code>
  98. </div>
  99. <h3>PHP server</h3>
  100. <div>
  101. <p>Anche PHP ha un server web integrato, a partire da php 5.4.0:</p>
  102. <code>php -S localhost:8000</code>
  103. </div>
  104. <h3>Lighttpd</h3>
  105. <div>
  106. <p>
  107. Lighttpd è un server web generico molto leggero. Tratteremo l'installazione su OSX con HomeBrew.
  108. Diversamente dagli altri server di cui abbiamo discusso qui, lighttpd è un server di produzione completo
  109. pronto per la produzione.
  110. </p>
  111. <ol>
  112. <li>
  113. Installazione tramite homebrew
  114. <code>brew install lighttpd</code>
  115. </li>
  116. <li>
  117. Creare un file di configurazione chiamato lighttpd.conf nella cartella in cui vuoi eseguire il server.
  118. [link:http://redmine.lighttpd.net/projects/lighttpd/wiki/TutorialConfiguration Qui] trovi un esempio.
  119. </li>
  120. <li>
  121. Nel file di configurazione deve essere cambiato il valore di server.document-root con la directory da cui vuoi servire i file.
  122. </li>
  123. <li>
  124. Avvialo con
  125. <code>lighttpd -f lighttpd.conf</code>
  126. </li>
  127. <li>
  128. Inserisci l'indirizzo http://localhost:3000/ nella barra degli indirizzi del browser, questo servirà file statici
  129. dalla cartella che hai scelto.
  130. </li>
  131. </ol>
  132. </div>
  133. <h3>IIS</h3>
  134. <div>
  135. <p>Se usi Microsoft IIS come web server. Per favore aggiungi le impostazioni del MIME type relative all'estensione .fbx prima del caricamento.</p>
  136. <code>File name extension: fbx MIME Type: text/plain</code>
  137. <p>Per impostazione predefinita IIS blocca i download di file .fbx, .obj. È necessario configurare IIS per abilitare il download di questo tipo di file</p>
  138. </div>
  139. <p>
  140. Altre semplici alternative sono [link:http://stackoverflow.com/q/12905426/24874 trattate qui] su Stack Overflow.
  141. </p>
  142. </div>
  143. </body>
  144. </html>