Create a Raspberry Pi web server

From Computing Study
Jump to: navigation, search

Creating the webserver

I'm not going to describe the process of installing a webserver on a Raspberry Pi because there is already an excellent resource for this at https://www.pestmeester.nl/ . This is the guide I used when setting up my own Raspberry Pi webserver and I really would not be able to write a better one. It covers in great detail the installation of an operating system to your Raspberry Pi, how to secure and configure it, setting up SSH so that you can control it in a headless manner, mounting a USB drive for extra storage, configuring the firewall, installing and configuring Nginx and MySQL, creating your first website, accessing your website using a real domain name from the internet, SSL certificates so that your website uses https, your own email server, ownCloud server, and confirming that your setup is secure.

Nginx as reverse proxy for Tomcat

My portfolio includes projects that are written in HTML, PHP, and Java. Nginx can run the HTML and PHP websites but I need a Tomcat webserver to run the Java ones. I could have configured my router to divert to each webserver using port numbers, but this is confusing to the end user as well as being a waste of time setting up the security (and worrying about it) for both webservers. A better way is to have Tomcat running on the localhost:8081 as normal, then configuring Nginx so that requests for HTML or PHP are processed by itself but requests for Java are passed through to Tomcat, which returns some HTML code back to Nginx and is then returned to the user in one seamless action. This is called a reverse proxy and is the subject of this section.

Install Tomcat using the default settings. Find where Tomcat is looking for files or webapps. You can do this by opening a terminal and using cat to display the contents of the server.xml file:

cat /etc/tomcat8/server.xml

Look for the 'localhost', it's probably near to the bottom of the file. In mine it looks like

<Host name="localhost"  appBase="/var/lib/tomcat8/webapps"
      unpackWARs="true" autoDeploy="true">

The 'appBase' tells me that the server root is in '/var/lib/tomcat8/webapps'. I would recommend that you don't change this location. If, for example, you changed it to the same location as your Nginx webserver root and Nginx is configured to show directory listings, an attacker could potentially see the contents of your application's program files.

In Eclipse right click on the project in the Package Explorer and choose 'Export'. In the wizard, navigate to 'Web > WAR file'. Click Next and choose the options to suit. You generally don't want to export your source files. Place the WAR file that Eclipse has generated into the directory that you found earlier in Tomcat's server.xml.

In your Nginx domain configuration file (located in /etc/nginx/sites-available/), simply add:

location /[Name-of-your-web-application] {
    proxy_pass http://127.0.0.1:[port-tomcat-is-listening-on];
}

inside the 'server' section, replacing the square brackets and text with appropriate settings for your configuration. Now your application should be available on your webserver at

https://your-domain.com/[Name-of-your-web-application]

Dynamic DNS and Cloudflare

Here is an excellent guide to setting up Dynamic DNS and configuring your DNS servers to use Cloudflare on your Raspberry Pi

https://pimylifeup.com/raspberry-pi-port-forwarding/

URL substitution using regex

Often the directory structure leading from your website root can be a little messy, especially if you are hosting more than one service from the same location, such is the case with my portfolio. You can perform URL substitution with regex (Regular Expression) pattern matching to tidy things up for the end user, while still keeping a functional directory structure on your server's hard drive. This section contains a short tutorial on regex followed by some examples that I found useful in my server's config.

For a guide on using regular expressions, have a look at my short tutorial.

The contact page on my site lies inside the portfolio directory. To simplify things for the user this line rewrites /portfolio/contact.php as simply /contact.php, placing it directly after the domain.

rewrite ^/contact.php /portfolio/contact.php;

The HyperAV website has a section that is publicly viewable, and a section that contains config files, such as functions etc. The publicly viewable files are in a public directory. This line tidies up the URL and removes 'public' from it.

rewrite ^/hyperav/(.*)$ /HyperAV/public/$1;

^ means start at the beginning (after the domain)
Then the word I want displayed in the URL
Followed by any number of any characters to the end of the line

After the space is how the directory actually looks. The $1 is a variable and refers to the capture group.

This example will allow the browser to reposition the URL parameters into their new location. 

Final example takes a web application that is buries deep inside a directory structure and displays the shortened form. Again this example allows for URL parameters.

rewrite ^/photo-gallery/(.*)$ /Lynda_com/PHP_With_MySQL_Beyond_The_Basics/photo_gallery/public/$1;

MediaWiki

Put these commands in the file {wiki}/LocalSettings.php, extensions go in {wiki}/extensions/

Configure cache to speed up your wiki

$wgUseFileCache = true;
# $wgFileCacheDirectory = "$IP/wiki/cache”;
$wgShowIPinHeader = false;
$wgEnableSidebarCache=true;
$wgUseGzip = true;
$wgDisableCounters = true;
$wgMiserMode = true;
$wgEnableParserCache = true;
$wgCachePages = true;

$wgMainCacheType = CACHE_ANYTHING;
$wgMessageCacheType = CACHE_ANYTHING;
$wgParserCacheType = CACHE_ANYTHING;
$wgMemCachedServers = [];

Remove the talk tab

$wgHooks['SkinTemplateNavigation'][] = 'replaceTabs';
function replaceTabs( $skin, &$links) {  
        unset( $links['namespaces']['talk'] ); // Remove the talk action
        return true;
}

Display mobile friendly pages

Install the MobileFrontend extension

wfLoadExtension( 'MobileFrontend' );
$wgMFAutodetectMobileView = true;

Display syntax highlighting in code blocks

Install the SyntaxHighlight_GeSHi extension

wfLoadExtension( 'SyntaxHighlight_GeSHi' );

Display pictures inside a lightbox

Install the Multimedia Viewer extension

wfLoadExtension( 'MultimediaViewer' );