[2020 WEB dev] Tutorial to host Wordpress with SSL for 1 yen while understanding the mechanism [Part 1]

The second part is currently being written. The first part is non-SSL, but it is a tutorial to host Wordpress for free

I intended to finish it short, but my career became longer (Chaban)

I have just started WEB development. The first WEB page is completed, drag and drop ʻindex.html` to the browser, and let your friends share the URL and see it ...

** What? σ (・ ω ・ ,, ｀)? ** **

** ~ 3 days later ~ ** "Well, do I have to sign a domain with a server to make it publicly available?"

** ~ 1 week later ~ ** "I was able to host my first website!"

~ 1 month later ~ "It's okay to create a lot of sites and make the main page look like a summary site, but it's hard to edit the HTML every time you update." "I think you should use Wordpress."

** ~ 2 months later ~ ** "Wordpress is amazing!" "Let's start blogging. Now you can join the ranks of affiliates!"

** ~ 3 months later ~ ** "It's harder than I imagined to write a blog." (Ended with a three-day shaved head) "Maybe coding is better for me than writing content." Create your own WP theme that allows you to manage your previous works. Every day I make and post only works that can't be helped there.

** ~ 4 months later ~ ** "Somehow I paid about 10,000 yen in total for the server and domain. I have no revenue, but ..." "You can't stay like this" Instead of coding with your own interests and pleasures, start thinking about how to make something valuable from the user's point of view.

** ~ 5 months later ~ ** Although there was a slight mental change, the desire to be able to operate the current site for free for the time being won. "Hate. AWS, GCP. No, even if you say PaaS ..."

** ~ 6 months later ~ ** "Okay, Apache settings and SSL were tough, but I managed to move to a completely free route!"

** ~ 7 months later ~ ** A few days after the mock exam, he is writing the acclaimed Qiita.

Roughly speaking, this is how it is now. (Very sloppy) By the way, during this time, I've taken a lot of detours such as doing machine learning and scraping with rails, laravel, or python.

Well, finally, let's get into the main subject.

As you can see in the tea leaves above, in the past I had a strong desire to open the website I wrote for the first time to the public, so I rented a web server and opened the site to the public, even though I went back and forth. However, I think there are many beginners who give up mainly because of money or time.

I don't care about the specs so much, so I think there are quite a lot of people who are involved in WEB development who want a space on the WEB that can be shared between myself and several others.

For such needs, even the cheapest rental server plan may be over-engineered, and it will be painful if the server fee is eaten even though there is no profit.

I myself am still a beginner in infrastructure, but after trial and error I came up with an "almost free" method, so I would like to take this opportunity to share it.

• He was a very nice guy. *

Overall picture

First, I will explain the overall flow. First of all, using Google Cloud Platform, at least until you can see the initial screen of Wordpress in the first part. After that, we will acquire an original domain as an option, and introduce security enhancement and introduction of convenient tools in the second part.

This is a tutorial written around hosting a Wordpress site, but more generally it can also be used as just a web server with a PHP runtime environment.

In fact, for developers, Worpdress alone wouldn't be enough, so we'll cover getting subdomains to host the main Wordpress site and other projects on one server.

If you want to have a WEB server for personal development, you can just use the first part, and if it becomes a site that will develop in the future, you can do it until the second part, and you will be able to scale up the infrastructure as appropriate later. Become.

There is only one charge for acquiring the domain in the second part, but since it is about 1 to 1,500 yen a year, it is much cheaper than renting a WEB server and doing it normally.

Minimum prerequisite knowledge

If you've arrived at this article, you're probably fine, but I won't explain the following, so if you have any questions, please check them out. ..

--What is Wordpress? --What is a domain / WEB server? --Basic Linux commands and terminal editor (this article uses vim)

Even if you have never touched PaaS such as AWS and GCP, if you build the environment according to the article for the time being, you will be able to grasp what it is like. I'm trying to eliminate lack of explanation and difficult terms, but if you don't understand something, just copy and paste the command. I think it's better to try this kind of thing for the time being and understand it later with less stress.

Please note that the explanation may be confusing for intermediate / advanced users.

Advantages / disadvantages of this environment (developer's point of view)

It is a merit and demerit of this environment that you feel compared to using an ordinary rental server.

Also, as long as you can do it for free, it will be an environment with low specifications, but if you charge it, you can scale up more flexibly than a rental server, so even if it will be a big project in the future, you can use it as an initial stage. Is no problem at all.

It's actually easier

I will do it in the first half, but when creating an instance with GCP's Compute Engine, it is convenient to [an image that has already been set up to server, Wordpress, SSL](https://console.cloud.google.com/ You can also use marketplace / details / bitnami-launchpad / wordpresspro? hl = ja & project = even-timing-282316 & rif_reserved).

I've used these things once, and even though they're optimized, I've been using them ever since because of the complicated directory layout and the fear of using them without knowing how they work. not. (It's a pain to read the document (beat))

Besides, I think it will be better to build these environments by yourself from scratch.

Flow of the first part

--Create a new VM instance using GCP (CentOS7) --Fix the IP address --Ssh connection from local machine --Set the firewall --Install Apache --Install & configure PHP --Install and configure MariaDB --Install & set up Wordpress

Up to here

--Web page browsing by directly typing an IP address such as 34.83.xxx.xxx instead of http://example.com --Site security is not good ――Cannot respond to a sudden increase in access

The problem remains.

Flow of the second part

--Obtaining your own domain (1 to 1,500 yen) --SSL with Cloudflare (full strict mode) --Recommended Wordpress plugins --Install phpMyAdmin --Get a subdomain and set up another project --Make the terminal look good --Migrate assets such as images of WP articles to Google Clould Storage (candidate for writing)

At this point, you have a Wordpress environment that is sufficient for viewing / managing by individuals (or a few people). Simultaneous access can be tolerated by 10 people or less, less than 10,000 VP per month, but the response will be slower than a general rental server in principle. However, if access increases, upgrade Compute Engine. (Upgrade Cloud Storage when assets such as images and videos increase.) It will be a scalable environment.

I'd like to say that this work can be done in about hours, but I think that it is completely different for beginners like me in the first half of the farce and those who have touched linux to some extent, so the statement is clear. I want to avoid it. Even if you are a complete beginner, it's okay if you try to imitate it at first, and I hope it will give you an opportunity to start studying infrastructure.

Let's run through to Wordpress's "Hello World!"!

STEP 0 Create a Google account (optional)

Create Google Account Of course, you can use the existing one.

By the way, I created a new one for this article. (Let's set up two-step verification !!!)

STEP 1 Register for GCP

Go to Google Cloud Platform (GCP) (https://console.cloud.google.com/?hl=ja&pli=1) to enable your free trial tier

Registration requires information such as your address and credit card, but you don't have to worry about being charged without your knowledge, and you can rest assured that you have $ 300 in grace.

Like AWS and Azure, GCP is called PaaS, which is a service that allows you to rent various types of machines on the cloud and really do various things (). Among them, we will use Google Compute Engine (GCE), a virtual machine with general-purpose computing functions, to make it a WEB server.

I'd like to ask you to find out more about each, but if you're a completely ignorant beginner and you're "understood" about PaaS, you're a genius. For the time being, try it without understanding the meaning, and as you do so, you will be able to understand it, so it's okay to move on. (I'm sorry for the lesson.)

Then rename the project.

The default is "My First Project", so change it to a concise and descriptive name from ** Navigation Menu> IAM & Administration> Settings ** in the upper left.

STEP 2 Create a GCE instance

Go to the instance creation screen with ** Navigation Menu> Compute Engine **. We will start the instance initial setting from "Create"

Please click as follows

Machine configuration

Go down and from "Change" on the boot disk

It is an instance of the maximum specifications that the above settings can be made in the Always Free frame.

• Always Free is a frame that can be used for free even after the free trial period ends. (Note that this frame has rare specifications changes)

The quote on the right says "$ 5.08 / month", but don't worry.

If you can see that the instance (virtual machine) is running like this, it is successful.

However, this external IP address (address for accessing the instance from the outside) will change every time you restart, so the next step is to fix it.

STEP3 Let's change from dynamic (ephemeral) IP to static IP

** Navigation Menu> VPC Network> External IP Address ** Change the external IP of the instance you just created from "ephemeral" to "static"

The name is appropriate.

Now restarting the instance will not change the IP address.

STEP 4 Let's SSH connection from the local machine

Here, connect to the created VM machine on the cloud with the terminal of the personal computer you are currently operating.

Actually, you can open the console screen with a browser and operate it there, but it may be used for a long time, so it is convenient to be able to connect from the local terminal.

The local machine is assumed to be a Mac. I think that the SSH connection that I will do from now on can be done with the same command on Windows, but if you can not do it, please check with "GCE SSH connection windows".

Now, open a local terminal and use the following command to generate the key required for the SSH connection.

ssh-keygen -t rsa -b 4096 -f ~/.ssh/id_rsa_gce -C '[Instance name]'

As you type, you'll be prompted to set a passphrase, which is optional. (The passphrase is not set by pressing enter twice with a blank space)

Next, register the generated public key with GCE.

cat ~/.ssh/id_rsa_gce.pub

Copy the long string displayed by (up to "ssh-rsa xxxx ~ == [instance name]").

Then click on the GCE instance name in your browser to open the details screen and click Edit.

At the bottom, paste the public key you saved earlier in the part that says There are 0 SSH authentication keys, and save it as it is.

Now that you're ready, type the following command locally

ssh -i ~/.ssh/id_rsa_gce [Instance name]@[External IP fixed earlier]

Last login: Fri Oct 23 14:10:59 2020 from xxxxx
[main@main ~]$

If the display looks like this, the connection is successful.

STEP 5 Change the SSH port

Currently, port 22 is used for SSH connection by default, but it is vulnerable to attack because it is the default. You may already see dubious logs around / var / log / secure.

Therefore, first of all, we will close this port 22 and make an SSH connection with other ports.

First of all, since the firewall is operated on the GCP panel, we will disable it here.

sudo systemctl disable firewalld

Then disable SElinux. This is done by directly rewriting the configuration file instead of entering a command.

Minimal vim

For those who are new to vim, here's a quick explanation. vim is a text editor tool on the terminal, and although it is very sophisticated, it seems to be difficult for beginners to get started. However, if you follow the steps below, it's okay for the time being.

1. Start the editor with vim [filename] --From the default browse mode to edit mode with ʻi --Normal character editing --Return to browsing mode with ʻesc --Save with : wq from the state of browsing mode and exit

See also: Practical Primer for Vim Beginners

Now open the configuration file.

sudo vim /etc/selinux/config

At this point, I think that SELINUX = enforcing is set, so rewrite it to disabled.

Please restart the instance on the GCE control screen for the settings to take effect.

The local terminal is disconnected without permission, so please reconnect with SSH after restarting.

ssh -i ~/.ssh/id_rsa_gce [Instance name]@[External IP]

And

getenforce

It is OK if the result of is Disabled.

Now, let's set the port. Please decide the port number in the range of ** 1024 to 49151 ** I will set it to 45678, so if you have this number in the future, please replace it with your own.

sudo vim /etc/ssh/sshd_config

Then, uncomment ("#") where it is # Port 22 and replace it with the port number you decided.

After saving

sudo systemctl restart sshd && sudo systemctl restart sshd

Restart sshd with and check the status.

● sshd.service - OpenSSH server daemon
   Loaded: loaded (/usr/lib/systemd/system/sshd.service; enabled; vendor preset: enabled)
   Active: active (running)since gold 2020-10-23 15:12:15 UTC; 11s ago
     Docs: man:sshd(8)
           man:sshd_config(5)
 Main PID: 1204 (sshd)
   CGroup: /system.slice/sshd.service
           ├─1184 sshd: [accepted]
           └─1204 /usr/sbin/sshd -D

October 23 15:12:15 main systemd[1]: Stopped OpenSSH server daemon.
October 23 15:12:15 main systemd[1]: Starting OpenSSH server daemon...
October 23 15:12:15 main sshd[1204]: Server listening on 0.0.0.0 port 45678. <=It is the number you set
October 23 15:12:15 main sshd[1204]: Server listening on :: port 45678.
October 23 15:12:15 main systemd[1]: Started OpenSSH server daemon.

• After a while, the SSH connection will be disconnected.

Then go to the GCP screen, go to ** Navigation Menu> VPC Network> Firewall ** and click default-allow-ssh to change the rule.

Go down from "Edit" in the upper right, change the tcp port to the number you set, and save.

Now you can connect from the new port, but there is still no rule to deny access from port 22, so create that.

Firefall settings From "Create firewall rule" at the top of the screen, set as follows. (The red frame is the changed part)

Note that these two rules are all applied by default, so if you increase the number of instances of GCE in the same project in the future, you will not be able to ssh to it on port 22, so keep it somewhere in mind. Put it down please.

Now, move to the terminal, and if it is still connected to the instance, disconnect it once with ʻexit`.

Here as before

ssh -i ~/.ssh/id_rsa_gce [Instance name]@[External IP]

Even if you can confirm that you cannot connect. So at the end of this step,

ssh -i -p [port number] ~/.ssh/id_rsa_gce [Instance name]@[External IP]

If you can connect as, it is successful. It was a bit long, but now it's a more secure environment.

STEP 6 Install Apache

This virtual machine will finally become a web server. There are two big towers of WEB server software, Apache and Nginx, but this time I would like to go with Apache.

From here on, there are many commands that require superuser privileges at runtime, so instead of doing sudo ~~ every time, first make it the root user.

sudo su -

Since it is easier to understand if the date and time of the access log is Japan time, change the time zone of the machine.

timedatectl set-timezone Asia/Tokyo

It is OK if the result of the date command is the current Japan time.

Apache installation

yum install -y httpd

Launch & Persistence

systemctl start httpd && systemctl enable httpd

Here, set the firewall again. I changed the SSH rules earlier, but this time it is a setting for another communication protocol, http and https. It's a familiar one.

Access via these two protocols is not allowed by default, so if you access it from a browser, it will be blocked and will not be displayed.

So let's allow these. It's easy, though.

Select an instance from the Compute Engine instance management screen and go to "Edit" in the upper right.

Just check these two items in the middle.

Actually, this is an item that can be set at the same time when creating an instance, but I think it's better to do it at this timing rather than checking it first without knowing the meaning. ~~ I usually forgot about it in front of the building I'm sorry ~~

Now, in the search bar of your browser http: // [instance IP address] Enter! If this screen appears, you are successful.

At this point, this machine can stream files in the public directory (/ var / www / html) as a web server.

The software called Wordpress, which is the purpose of this time, mainly has the function of "(1) the administrator writes an article" and "(2) generates HTML for display as a website" using the data.

(A system that embeds content such as articles in a template and distributes it in this way is called a CMS.)

In (1), a database is required as a data storage destination. A programming language called PHP is used to extract the necessary data from the database and do something like (2).

So, next, we will install the PHP execution environment and MariaDB (database).

STEP 7 Let's install PHP

I used the yum command when installing Apache. This is a tool for managing software packages on CentOS. When you type yum install httpd, it says repository, which looks for httpd in a warehouse on the cloud with lots of packages and installs it along with the other packages needed to run it. ..

I'm going to install PHP7.3 from now on, but I can't install it as it is because it's not in the default repositories.

So, first add the repository where PHP 7.3 is located.

yum install http://rpms.famillecollet.com/enterprise/remi-release-7.rpm

Now that you can install PHP 7.3, install it all at once, including the necessary libraries.

yum install -y php php-mysql php-mbstring php-gd --enablerepo=remi-php73

You can check if PHP 7.3 is included as follows.

[root@main ~]# php --version
PHP 7.3.23 (cli) (built: Sep 29 2020 08:33:03) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.3.23, Copyright (c) 1998-2018 Zend Technologies

here

vim /var/www/html/info.php

Start the editor with

<?php
  phpinfo();
?>

Please write and save.

Then http: // [IP address] /info.php Try to access.

The content you just entered is displayed as it is in text. This is because I installed PHP, but Apache hasn't loaded it yet, so I just delivered ʻinfo.php` as a text file.

systemctl restart httpd

By restarting Apache with, it will work with PHP.

Please reload the browser screen. If you see a screen like this, you are successful. After receiving the http request, Apache ordered ʻinfo.php` to run and sent the result back to the client.

On the terminal

php /var/www/html/info.php

Please try. I think that the same content as the browser was output.

Let's set PHP

Here are some settings that you should do before using Wordpress.

First of all, the PHP configuration file is /etc/php.ini, but make a backup before making any edits to it.

cp /etc/php.ini /etc/php.ini.bk

If PHP gets stuck due to an error, delete php.ini and rename php.ini.bk to php.ini and everything will be restored.

vim /etc/php.ini

Then, if you enter / timezone and press Enter, it will move to the time zone setting part, so enter edit mode with ʻi, uncomment (";") there, and ʻAsia / Tokyo Let's say .

Return to browse mode with ʻesc, press Enter with / post_max_size, and change the value here to about 128M`.

Similarly, change ʻupload_max_filesize to 128M`.

The last two settings are to avoid getting an error when doing heavy processing with Wordpress (uploading articles with large data, installing plugins, etc.).

For other settings such as log output, please refer to here. [PHP] Settings you want to do after installing PHP

Now, save the config file with : wq and close it

systemctl restart httpd

Restart Apache to load it. If you update ʻinfo.php` in your browser, you can see that the changed part is reflected and displayed.

STEP 8 Install MariaDB

Now that you have a PHP environment, it's time to install a database management system called MariaDB.

Use the following command to install, persist, and start all at once.

yum install -y mariadb-server \
&& systemctl enable mariadb \
&& systemctl start mariadb

When it comes to databases, some of you may be familiar with MySQL, but from the user's perspective, MariaDB is slightly upward compatible with it, but beginners will not often notice the difference.

Reference Compare MySQL and MariaDB! Let's check the features and differences of each DB!

mysql_secure_installation

Will start the interactive initialization. Basic Enter is fine, but you will be prompted to set the password for the root user of the database on the way, so enter a safe one. (The password will not be displayed even if you hit the keyboard, so be careful of typos.)

All done!  If you've completed all of the above steps, your MariaDB
installation should now be secure.

Thanks for using MariaDB!

And when the setting is completed

mysql -uroot -p

Log in as the root user of the database using the password you set earlier in. As it is, create a database for Wordpress as follows and check if it is added with show databases;.

MariaDB [(none)]> CREATE DATABASE wp;
Query OK, 1 row affected (0.00 sec)

MariaDB [(none)]> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| mysql              |
| performance_schema |
| wp                 |
+--------------------+
4 rows in set (0.00 sec)

Remarks SQL statements such as "CREATE" are in basic uppercase, but lowercase is fine. If you plan to have multiple Wordpress sites on this server, it's easier to use a distinguishable database name later.

The user I'm using now is called the root user, who can do anything. To prevent other unrelated database operations, Wordpress will then create a new user for it and give it operational privileges only on the wp database you just created.

MariaDB [(none)]> CREATE USER '[New user name]'@'localhost' IDENTIFIED BY '[New user password]';
Query OK, 0 rows affected (0.00 sec)

MariaDB [(none)]> GRANT ALL PRIVILEGES ON wp.* TO '[New user name]'@'localhost';
Query OK, 0 rows affected (0.00 sec)

Now that you have created a dedicated user, log out once with ʻexit;` and log in as that user.

MariaDB [(none)]> exit;
Bye
[root@main ~]# mysql -u [username] -p
Enter password:!! !! !! You can't see it even if you enter it! !! !!
Welcome to the MariaDB monitor.  Commands end with ; or \g.
Your MariaDB connection id is 11
Server version: 5.5.65-MariaDB MariaDB Server

Copyright (c) 2000, 2018, Oracle, MariaDB Corporation Ab and others.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

MariaDB [(none)]>

Here is the result of show databases;

MariaDB [(none)]> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| wp                 |
+--------------------+
2 rows in set (0.00 sec)

In this way, it is OK if only ʻinformation_schema` and the database created earlier are available.

STEP 9 Let's install Wordpress

Finally, Wordpress will be installed. When I try to download from Wordpress official website, the data is downloaded to the local machine as a matter of course.

There are many ways to put this on your GCE instance, but let's use wget here.

wget is a command to download contents from the Internet, and it is not included in the current CentOS, so install it first.

yum install -y wget

Go to the root of the public directory

cd /var/www/html

Download the latest Japanese wordpress.

wget https://ja.wordpress.org/latest-ja.tar.gz

If you try ls, you can see that there is latest-ja.tar.gz.

Then extract this file using the tar command.

tar xvfz latest-ja.tar.gz

If you try ls at this point, you will get this result.

[root@main html]# ls
info.php  latest-ja.tar.gz  wordpress

Here, we don't need anything other than wordpress, so let's delete it.

rm -rf info.php latest-ja.tar.gz

Now you have Wordpress data installed on CentOS.

Let's make a directory structure for the future

Next, for the convenience of the second part of this article, I will change the location of this Wordpress data, but since the content may be a little difficult, [You can skip here for a reason. ](#End of introduction)

By default, Apache uses / var / www / html as the root of the public directory. (Hereafter referred to as "document root")

Now http: // [IP address] /hoge.html I'm accessing like, but in the second half I get the domain and http://example.com/hoge.html You will be able to access it like that.

As personal development progresses, you may want to set up another project in addition to the Wordpress site.

When that happens, the Wordpress site http://example.com/wordpress/ To the top of another project http://example.com/anotherproject/ To

However, the Apache server considers these to be the same site, which causes confusion such as the logs of two projects being written to the same location.

In such a case, I think it is common to ** create a subdomain and connect it using Apache's VituralHost function **. You don't need to understand it in detail now, but in the DNS settings, the main Wordpress site is http://example.com, and another project is Suppose you want to assign it to http://another.example.com.

Then, depending on the settings on the Apache side, ʻexample.com and ʻanother.example.com can be assigned to different document roots.

The image looks like this.

This makes it easier to make settings such as restricting access to only one site.

When operating a large site with a lot of access, one site is hosted on one (or multiple) servers, but since there is no such need for individuals, we will continue to connect subdomains to the same server. can do.

However, setting using VirtualHost is after acquiring the domain in the second part, but for the above reasons, move Wordpress as follows.

End of introduction

systemctl stop httpd #I will stop Apache for the time being
cd /var/www
mv html/wordpress .
chown -R apache:apache wordpress/ #Change owner from root to apache user
rm -rf html

Next, in the Apache settings, change the default document root from / var / www / html to / var / www / wordpress.

cd /etc/httpd/conf
cp httpd.conf httpd.conf.bk # php.Make a backup like ini
vim httpd.conf

Search for / DocumentRoot and change it as follows.

After saving the settings

httpd -t

You can check for syntax errors with. This is useful to remember, as Apache configuration involves trial and error.

If it looks okay with Syntax OK

systemctl start httpd

Let's start with.

Try accessing / reloading http: // [IP address] with your browser, and if you see a screen like this, you are successful.

Enter the database and user information dedicated to worpdress set in STEP 8.

If you can register normally, the installation execution button will appear, so after pressing it, register the information as a Wordpress administrator.

After setting, log in with the user name and password you just set on the login screen. I was able to access the management screen!

Accessing http: // [IP address] / will take you to the main page.

Hello World! Thank you for your hard work.

Summary of the first part

--Created a new VM instance using GCP (CentOS7) --Fixed IP address --Ssh connection from local machine --Changed the port number used for SSH connection --Installed Apache --Installed & configured PHP --Installed & configured MariaDB --Wordpress was imported with wget --Changed document root in Apache --Installed Wordpress and logged in

The cost so far is 0 yen. From here you can create Wordpress themes and play around with them.

However, even if you use this server for personal development, the problem still remains.

――It is not easy to access by directly hitting the IP address. ――It is difficult to set up a site other than this Wordpress ――I can't respond even if I suddenly access something buzz --Insufficient security --The terminal is ugly (I'm tired of monochrome, and I can't type systemctl every time ...)

So, the second part will address this issue. However, security is limited to what I can do for free, and my ability is limited, so to avoid the worst, don't put really important information on this server.

About the second part Coming soon ...

Regarding the second part, the general composition is decided as described above. However, I think that even if I write the second part without getting the evaluation of this first part, it will only be buried in many articles, so if I earn dozens of LGTM, I will start editing work in earnest. If you have read this far, I would appreciate it if you like and share it.