PageRenderTime 45ms CodeModel.GetById 15ms RepoModel.GetById 0ms app.codeStats 0ms

/dashboard/docs/configure-vhosts.html

https://gitlab.com/haris4445/techarena
HTML | 251 lines | 229 code | 18 blank | 4 comment | 0 complexity | 3744a4397105f2141360c27316975215 MD5 | raw file
    

  1. <!doctype html>
    2. 

  2. <html lang="en">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="utf-8">
    5. 

  5. 

  6.     <!-- Always force latest IE rendering engine or request Chrome Frame -->
    7. 

  7.     <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    8. 

  8.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    9. 

  9. 

  10.     <!-- Use title if it's in the page YAML frontmatter -->
    11. 

  11.     <title>Configure Virtual Hosts</title>
    12. 

  12. 

  13.     
    14. 

  14.     
    15. 

  15. 

  16.     <link href="/dashboard/stylesheets/normalize.css" rel="stylesheet" type="text/css" /><link href="/dashboard/stylesheets/all.css" rel="stylesheet" type="text/css" />
    17. 

  17.     <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    18. 

  18. 

  19.     <script src="/dashboard/javascripts/modernizr.js" type="text/javascript"></script>
    20. 

  20. 

  21. 

  22.     <link href="/dashboard/images/favicon.png" rel="icon" type="image/png" />
    23. 

  23. 

  24. 

  25.   </head>
    26. 

  26. 

  27.   <body class="docs docs_configure-vhosts">
    28. 

  28.     <div id="fb-root"></div>
    29. 

  29.     <script>(function(d, s, id) {
    30. 

  30.       var js, fjs = d.getElementsByTagName(s)[0];
    31. 

  31.       if (d.getElementById(id)) return;
    32. 

  32.       js = d.createElement(s); js.id = id;
    33. 

  33.       js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=277385395761685";
    34. 

  34.       fjs.parentNode.insertBefore(js, fjs);
    35. 

  35.     }(document, 'script', 'facebook-jssdk'));</script>
    36. 

  36.     <div class="contain-to-grid">
    37. 

  37.       <nav class="top-bar" data-topbar>
    38. 

  38.         <ul class="title-area">
    39. 

  39.           <li class="name">
    40. 

  40.             <h1><a href="/dashboard/index.html">Apache Friends</a></h1>
    41. 

  41.           </li>
    42. 

  42.           <li class="toggle-topbar menu-icon">
    43. 

  43.             <a href="#">
    44. 

  44.               <span>Menu</span>
    45. 

  45.             </a>
    46. 

  46.           </li>
    47. 

  47.         </ul>
    48. 

  48. 

  49.         <section class="top-bar-section">
    50. 

  50.           <!-- Right Nav Section -->
    51. 

  51.           <ul class="right">
    52. 

  52.               <li class=""><a href="/applications.html">Applications</a></li>
    53. 

  53.               <li class=""><a href="/dashboard/faq.html">FAQs</a></li>
    54. 

  54.               <li class="active"><a href="/dashboard/howto.html">HOW-TO Guides</a></li>
    55. 

  55.               <li class=""><a target="_blank" href="/dashboard/phpinfo.php">PHPInfo</a></li>
    56. 

  56.               <li class=""><a href="/phpmyadmin/">phpMyAdmin</a></li>
    57. 

  57.           </ul>
    58. 

  58.         </section>
    59. 

  59.       </nav>
    60. 

  60.     </div>
    61. 

  61. 

  62.     <div id="wrapper">
    63. 

  63.       <div class="hero">
    64. 

  64.   <div class="row">
    65. 

  65.     <div class="large-12 columns">
    66. 

  66.       <h1>Documentation</h1>
    67. 

  67.     </div>
    68. 

  68.   </div>
    69. 

  69. </div>
    70. 

  70. <div class="row">
    71. 

  71.   <div class="large-12 columns">
    72. 

  72.     <ul class="sub-nav">
    73. 

  73.       <li>
    74. 

  74. <a class="pdf" target="_blank" href="/dashboard/docs/configure-vhosts.pdf">          Download PDF
    75. 

  75.           <span>configure-vhosts.pdf</span>
    76. 

  76. </a>      </li>
    77. 

  77.     </ul>
    78. 

  78.     <article class="asciidoctor">
    79. 

  79.       <h1>Configure Virtual Hosts</h1>
    80. 

  80. <div class="paragraph">
    81. 

  81. <p>Apache makes it easy to have multiple websites or web applications running on the same physical server, and access each using a custom domain name. This is known as <em>virtual hosting</em>, and each virtual host can be mapped to a different subdirectory of the server.</p>
    82. 

  82. </div>
    83. 

  83. <div class="paragraph">
    84. 

  84. <p>This feature is especially useful in development scenarios, as it allows developers to isolate and access different applications using unique domain names. For example, the domains <em><a href="http://app01.localhost" class="bare">http://app01.localhost</a></em> and <em><a href="http://app02.localhost" class="bare">http://app02.localhost</a></em> could point to two separate applications on the same server. Or, you could create separate domains, such as <em><a href="http://client1/" class="bare">http://client1/</a></em>, <em><a href="http://client2/" class="bare">http://client2/</a></em> and so on, for multiple client websites hosted on the same server.</p>
    85. 

  85. </div>
    86. 

  86. <div class="admonitionblock note">
    87. 

  87. <table>
    88. 

  88. <tr>
    89. 

  89. <td class="icon">
    90. 

  90. <i class="fa icon-note" title="Note"></i>
    91. 

  91. </td>
    92. 

  92. <td class="content">
    93. 

  93. Virtual hosts created in this manner will not be accessible from other systems, unless those systems are separately configured to associate the custom domain used by the virtual host with the IP address of the XAMPP server.
    94. 

  94. This guide walks you through the process of setting up a new virtual host with XAMPP, by creating and configuring an example host named <em>wordpress.localhost</em> for a WordPress installation. It assumes that you have an existing WordPress installation at <em>C:\xampp\apps\wordpress\htdocs\</em> and accessible via the URL <a href="http://localhost/wordpress" class="bare">http://localhost/wordpress</a>.
    95. 

  95. </td>
    96. 

  96. </tr>
    97. 

  97. </table>
    98. 

  98. </div>
    99. 

  99. <div class="admonitionblock tip">
    100. 

  100. <table>
    101. 

  101. <tr>
    102. 

  102. <td class="icon">
    103. 

  103. <i class="fa icon-tip" title="Tip"></i>
    104. 

  104. </td>
    105. 

  105. <td class="content">
    106. 

  106. You can install WordPress with just a few clicks using the <a href="https://bitnami.com/stack/xampp#wordpress">Bitnami WordPress Module for XAMPP</a>.
    107. 

  107. </td>
    108. 

  108. </tr>
    109. 

  109. </table>
    110. 

  110. </div>
    111. 

  111. <div class="paragraph">
    112. 

  112. <p>Follow the steps below to create a virtual host:</p>
    113. 

  113. </div>
    114. 

  114. <div class="olist arabic">
    115. 

  115. <ol class="arabic">
    116. 

  116. <li>
    117. 

  117. <p>Change to your XAMPP installation directory (typically, <em>C:\xampp</em>) and open the <em>httpd-vhosts.conf</em> file in the <em>apache\conf\extra\</em> subdirectory using your favourite text editor.</p>
    118. 

  118. </li>
    119. 

  119. <li>
    120. 

  120. <p>Replace the contents of this file with the following directives:</p>
    121. 

  121. <div class="literalblock">
    122. 

  122. <div class="content">
    123. 

  123. <pre>&lt;VirtualHost *:80&gt;
    124. 

  124.        DocumentRoot "C:/xampp/htdocs/"
    125. 

  125.        ServerName localhost
    126. 

  126. &lt;/VirtualHost&gt;
    127. 

  127. &lt;VirtualHost *:80&gt;
    128. 

  128.        DocumentRoot "C:/xampp/apps/wordpress/htdocs"
    129. 

  129.        ServerName wordpress.localhost
    130. 

  130. &lt;/VirtualHost&gt;</pre>
    131. 

  131. </div>
    132. 

  132. </div>
    133. 

  133. <div class="imageblock">
    134. 

  134. <div class="content">
    135. 

  135. <img src="./images/configure-vhosts/image1.png" alt="image1">
    136. 

  136. </div>
    137. 

  137. </div>
    138. 

  138. <div class="paragraph">
    139. 

  139. <p>This contains two virtual host configuration blocks:</p>
    140. 

  140. </div>
    141. 

  141. <div class="ulist">
    142. 

  142. <ul>
    143. 

  143. <li>
    144. 

  144. <p>The first block is the default or fallback virtual host, which is used for all requests that are not matched by subsequent blocks.</p>
    145. 

  145. </li>
    146. 

  146. <li>
    147. 

  147. <p>The second block sets up a virtual host named <em>wordpress.localhost</em>. The DocumentRoot directive specifies the directory to be used when serving requests for this virtual host (in this case, the WordPress installation directory), while the ServerName directive specifies the custom domain name for the virtual host.</p>
    148. 

  148. </li>
    149. 

  149. </ul>
    150. 

  150. </div>
    151. 

  151. <div class="paragraph">
    152. 

  152. <p>To add more virtual hosts, simply duplicate the second virtual host block and modify the port number, DocumentRoot and ServerName directives as per your requirements. For example, if you want to use SSL with your custom domain name, you can add a new virtual host block for port 443.</p>
    153. 

  153. </div>
    154. 

  154. <div class="admonitionblock tip">
    155. 

  155. <table>
    156. 

  156. <tr>
    157. 

  157. <td class="icon">
    158. 

  158. <i class="fa icon-tip" title="Tip"></i>
    159. 

  159. </td>
    160. 

  160. <td class="content">
    161. 

  161. If you plan to have a large number of virtual hosts with very similar configuration, consider using wildcard-based subdomains with your virtual hosts.
    162. 

  162. </td>
    163. 

  163. </tr>
    164. 

  164. </table>
    165. 

  165. </div>
    166. 

  166. </li>
    167. 

  167. <li>
    168. 

  168. <p>Restart Apache using the XAMPP control panel for your changes to take effect.</p>
    169. 

  169. <div class="imageblock">
    170. 

  170. <div class="content">
    171. 

  171. <img src="./images/configure-vhosts/image2.png" alt="image2">
    172. 

  172. </div>
    173. 

  173. </div>
    174. 

  174. </li>
    175. 

  175. <li>
    176. 

  176. <p>At this point, your virtual host is configured. However, if you try browsing to the <em>wordpress.localhost</em> domain, your browser will show a failure notice, since this domain does not exist in reality. To resolve this, it is necessary to map the custom domain to the local IP address. To do this, open the file <em>C:\windows\system32\drivers\etc\hosts</em> and add the following line to it:</p>
    177. 

  177. <div class="literalblock">
    178. 

  178. <div class="content">
    179. 

  179. <pre>127.0.0.1           wordpress.localhost</pre>
    180. 

  180. </div>
    181. 

  181. </div>
    182. 

  182. <div class="imageblock">
    183. 

  183. <div class="content">
    184. 

  184. <img src="./images/configure-vhosts/image3.png" alt="image3">
    185. 

  185. </div>
    186. 

  186. </div>
    187. 

  187. <div class="paragraph">
    188. 

  188. <p>This takes care of mapping the <em>wordpress.localhost</em> domain name to the local machine, which always has the IP address 127.0.0.1.</p>
    189. 

  189. </div>
    190. 

  190. </li>
    191. 

  191. </ol>
    192. 

  192. </div>
    193. 

  193. <div class="admonitionblock note">
    194. 

  194. <table>
    195. 

  195. <tr>
    196. 

  196. <td class="icon">
    197. 

  197. <i class="fa icon-note" title="Note"></i>
    198. 

  198. </td>
    199. 

  199. <td class="content">
    200. 

  200. On some versions of Windows, you will not be able to edit the <em>C:\windows\system32\drivers\etc\hosts</em> file without administrator privileges. You can edit the file by right-clicking the Notepad icon and selected the "Run as administrator" menu option, then entering administrator credentials (if required) and clicking "OK" or "Yes" to proceed.
    201. 

  201. </td>
    202. 

  202. </tr>
    203. 

  203. </table>
    204. 

  204. </div>
    205. 

  205. <div class="paragraph">
    206. 

  206. <p>At this point, you should be able to enter the URL <a href="http://wordpress.localhost" class="bare">http://wordpress.localhost</a> in your browser&#8217;s address bar and see your WordPress installation. Here&#8217;s an example of what you should see:</p>
    207. 

  207. </div>
    208. 

  208. <div class="imageblock">
    209. 

  209. <div class="content">
    210. 

  210. <img src="./images/configure-vhosts/image4.png" alt="image4">
    211. 

  211. </div>
    212. 

  212. </div>
    213. 

  213.     </article>
    214. 

  214.   </div>
    215. 

  215. </div>
    216. 

  216. 

  217.     </div>
    218. 

  218. 

  219.     <footer>
    220. 

  220.       <div class="row">
    221. 

  221.         <div class="large-12 columns">
    222. 

  222.           <div class="row">
    223. 

  223.             <div class="large-8 columns">
    224. 

  224.               <ul class="social">
    225. 

  225.   <li class="twitter"><a href="https://twitter.com/apachefriends">Follow us on Twitter</a></li>
    226. 

  226.   <li class="facebook"><a href="https://www.facebook.com/we.are.xampp">Like us on Facebook</a></li>
    227. 

  227.   <li class="google"><a href="https://plus.google.com/+xampp/posts">Add us to your G+ Circles</a></li>
    228. 

  228. </ul>
    229. 

  229. 

  230.               <ul class="inline-list">
    231. 

  231.                 <li><a href="https://www.apachefriends.org/blog.html">Blog</a></li>
    232. 

  232.                 <li><a href="https://www.apachefriends.org/privacy_policy.html">Privacy Policy</a></li>
    233. 

  233.                 <li>
    234. 

  234. <a target="_blank" href="http://www.fastly.com/">                    CDN provided by
    235. 

  235.                     <img width="48" data-2x="/dashboard/images/fastly-logo@2x.png" src="/dashboard/images/fastly-logo.png" />
    236. 

  236. </a>                </li>
    237. 

  237.               </ul>
    238. 

  238.             </div>
    239. 

  239.             <div class="large-4 columns">
    240. 

  240.               <p class="text-right">Copyright (c) 2015, Apache Friends</p>
    241. 

  241.             </div>
    242. 

  242.           </div>
    243. 

  243.         </div>
    244. 

  244.       </div>
    245. 

  245.     </footer>
    246. 

  246. 

  247.     <!-- JS Libraries -->
    248. 

  248.     <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    249. 

  249.     <script src="/dashboard/javascripts/all.js" type="text/javascript"></script>
    250. 

  250.   </body>
    251. 

  251. </html>
    252. 

  252.