website/raspberrypi/webserverOLD/webserver.js

import { addBanner, addArticle, addHeader, addParagraph, addSubHeader } from '/scripts/article.js';
import { addInset, addInsetList, addInsetCodeListing, addInsetBulletList } from '/scripts/inset.js';
import { addImageWithCaption, addButtonGroup, addSmallButtonGroup } from '/scripts/visuals.js';

const main = document.querySelector("main");
main.append(addBanner("Setting Up a Web Server", "Personal Project", "Step-by-step Guide"))
main.append(addArticle())
const article = document.querySelector("article")
article.append(addHeader("PREPARATION"))
article.append(addParagraph("The purpose of this guide is to list the steps required to set up my web server just in case I need to set it up from scratch at amy point.  There are a lot of guides for setting up a web server on a Raspberry Pi but I have found the guide on <a href='https://pimylifeup.com/raspberry-pi-apache/'PiMyLifeUp</a> to be really useful."))
article.append(addParagraph("I will be starting with a freshly installed copy of Raspberry Pi OS so we will start by making sure the operating system is up to date by running the commands"))
article.append(addInset(["sudo apt-get update", "sudo apt-get upgrade"]))
article.append(addParagraph("I have already enabled ssh via the advanced options in the Raspberry Pi imager and set the default user to philip with my usual web server password so as soon as the Pi boots up, I can ssh on to it.  I want to change the default ssh port so that it doesn't use port 22 and this can be done by editing the file"))
article.append(addInset("/etc/ssh/sshd_config"))
article.append(addParagraph("You should see a line that is commented out and has a value of 22 for the port."))
article.append(addInset("#Port 22"))
article.append(addParagraph("You should locate this line, uncomment it and change the port number to whatever value you want to use."))
article.append(addHeader("APACHE"))
article.append(addParagraph("Install Apache with the command"))
article.append(addInset("sudo apt install apache2 -y"))
article.append(addParagraph("Check it is running.  You can do that with the command"))
article.append(addInset("systemctl status apache2"))
article.append(addParagraph("Alternatively, we can open up a browser and type the ip address of the Raspberry Pi into a web server.  If the Apache server is running, you should see the Apache default page."))
article.append(addHeader("COPYING FILES OVER"))
article.append(addParagraph("This is a two stage process, the first stage involves copying files over from my PC to the Raspberry PI which I do via WinSCP.  One point worth mentioning here, which is something that I always forget, is that WinSCP uses port 22 even if you have set up your Raspberry Pi (as I have) to use a different port for SSH."))
article.append(addParagraph("The next step is to copy the files over to the HTML folder on the web server which you can do with a simple cp command but because I do this so often, I usually set up an alias to achieve this with a simpler command and it looks like this."))
article.append(addInset("alias webcopy='echo \"Starting to copy files\" && sudo cp -R /home/philip/FTP/website/* /var/www/html && echo \"File transfer complete\"'"))
article.append(addParagraph("So this is going to output a message when the copy process start, actaully copy the file and then output a message confirming the process has completed.  Notice the use of double ampersands which means that each command executes only when the previous command has successfully completed which is important her, because it means that the file copy operation will be completed before we output the message to confirm that."))
article.append(addParagraph("I also want to setup my server to use https for greater security - and because it looks more professional - I tried to do that by following the instructions at <a href='https://variax.wordpress.com/2017/03/18/adding-https-to-the-raspberry-pi-apache-web-server/comment-page-1/'>variax.wordpress.com</a> but I wasn't able to get that to work.  It's not critical to the operation of my site so I will come back to this later.  For now, note that I followed the process down to the stage where I entered this command"))
article.append(addInset("sudo a2ensite osztromok.com"))
article.append(addParagraph("This gave me the error"))
article.append(addInset("ERROR: Site osztromok.com does not exist!"))
article.append(addParagraph("Hopefully, I will be able to comeback to it later and complete the process."))
article.append(addParagraph("One final note here, the guide on PiMyLifeUp recommends changing ownership of the /var/www/html folder so you can edit files in it without needing elevated priviliges.  Since I don't usually edit the files in that way, I am happy for these to remain under the ownership of the root user so I have skipped that step."))
article.append(addHeader("PHP"))
article.append(addParagraph("Next, we want to install PHP and we can do that with the command"))
article.append(addInset("sudo apt install php7.4 libapache2-mod-php7.4 php7.4-mbstring php7.4-mysql php7.4-curl php7.4-gd php7.4-zip -y"))
article.append(addParagraph("Traditionally, you would test that PHP is installed and running by creating a simple page page, typically called index.php which contains some php to .  In this case, the PHP is"))
article.append(addInsetCodeListing(["&lt;?php", "    echo \"Today's date is \".date('Y-m-d H:i:s');"]))
article.append(addParagraph("If you can view the page, PHP is installed and working.  You can see the page I created to test PHP by clicking <a href='samples/index.php' target = '_blank'>here<\a>"))
article.append(addHeader("VIRTUAL HOSTS"))
article.append(addParagraph("I intend to setup some virtual hosts so it makes sense to look into that now.  The guide I am following to setup the web server includes a section on virtual hosts so I will be following the instructions from there.  For the purpose of this exercise, I will try to setup a virtual host with the url, resume.osztromok.com which I am hoping will host my online resume at some point.  To start with, we need to create a file called example.com.conf which goes in the sites-available folder so the command to create this with vim, including the absolute path is"))
article.append(addInset("sudo vi /etc/apache2/sites-available/resume.osztromok.com.conf"))
article.append(addParagraph("The contents of this file are shown below."))
article.append(addInsetCodeListing(["&lt;VirtualHost *:80&gt;", "    ServerName resume.osztromok.com", "    ServerAlias www.resume.osztromok.com", "", "    DocumentRoot /var/www/resume", "", "    ErrorLog ${APACHE_LOG_DIR}/resume.osztromok.com_error.log", "    CustomLog ${APACHE_LOG_DIR}/resume.osztromok.com_access.log combined", "&lt;/VirtualHost&gt;"]))
article.append(addParagraph("I decided to put the files for this site in the same folder as I have my website files in so var/www/html.  In this folder, I created a subfoler called virtual and the specific folder for that site is called resume.example.com so the full path for this site is"))
article.append(addInset("/var/www/html/virtual/resume.example.com"))
article.append(addParagraph("We can enable this site with"))
article.append(addInset("sudo a2ensite resume.osztromok.com.conf"))
article.append(addParagraph("I'm not convinced this will work but from the guidelines offered, I suspect this might be because I do have DNS setup with ionos to point to this subdomain but I'm not certain this is setup correctly."))
article.append(addParagraph("As I expected, it didn't work so this is something else I will need to revisit later.  When I try to visit the site, I'm getting a timeout but on a previous attempt with my old web server, I was a little bit closer so that might have been a more sensible approach.  Next time I try, I think it may be useful to have this record of the steps I took which would make it easier to reverse them when I try again."))
article.append(addHeader("MARIA DB"))
article.append(addParagraph("The guide didn't include installing MariaDB, but I will definetely use it so I am installing it with a separate guide form <a href='https://raspberrytips.com/install-mariadb-raspberry-pi/'>raspberrytips.com</a>.  The actual installation is fairly straightforward.  Since I ran sudo apt-get update and sudo apt-get upgrade earlier today, I won't do that now, so I can install it with the command"))
article.append(addInset("sudo apt install mariadb-server"))
article.append(addParagraph("At this point, we can access the database with mysql but there is no access for any user, so we need to sort that out now and we can do that whilst securing the installation with the command"))
article.append(addInset("sudo mysql_secure_installation"))
article.append(addParagraph("I have provided the following data in answer to the questions asked."))
article.append(addInsetBulletList(["Password for root", "Yes to switch to unix_socket authenticaton", "Password for root again", "Yes to all other questions"]))
article.append(addParagraph("We can then access mysql with the command"))
article.append(addInset("sudo mysql -uroot -p"))
article.append(addParagraph("and then insert the root password.  Next, I am going to add another user which will be under the name webadmin.  The command to create a user is"))
article.append(addInset("CREATE USER 'webadmin'@'localhost' IDENTIFIED BY '&lt;password&gt;';"))
article.append(addParagraph("The real password for webadmin will replace &lt;password&gt;, of course.  Next, I want to grant priviliges to webadmin for all databases and we do that with the command"))
article.append(addInset("GRANT ALL PRIVILEGES ON *.* TO 'webadmin'@'localhost';"))
article.append(addParagraph("Finally, we need to reload the permissions with"))
article.append(addInset("FLUSH PRIVILEGES;"))
article.append(addParagraph("We can now test this by coming out of the database and starting it up again with the new user credentials."))
article.append(addInset("sudo mysql -u webadmin -p &lt;password&gt;"))
article.append(addParagraph("I also created a database called links which I will use in my database with the command"))
article.append(addInset("create database links;"))
article.append(addParagraph("and I can verify that the database has been created with"))
article.append(addInset("show databases;"))
main.append(addButtonGroup(["Raspberry Pi", "/raspberrypi/raspberrypi.html", "Home", "/index.html"]))