【2020年WEBdev】仕組みを理解しながら１円でSSL化してWordpressをホストするまでのチュートリアル【前編】

# 前編は非SSLですが無料でWordpressをホストするまでのチュートリアルです
## 短く終わらせるつもりだったけど長くなった経歴（茶番）

WEB開発をはじめたばかり。
初めてのWEBページが完成し、ブラウザに`index.html`をドラック＆ドロップして、いざ友達にURLを共有して見てもらおうと...
![IMG_0086.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563935/850a25fe-5927-e610-1c5d-9635a7be624d.png)

**あっれ〜？σ(・ω・,,｀)？**

***

**〜 3日後 〜**
「なるほど、一般公開するにはサーバーとドメインを契約しなければいけないのか」

**〜 1週間後 〜**
「自分が作ったはじめてのWEBサイトをホストできた！」

**〜 1ヶ月後 〜**
「たくさんサイトを作って、メインページをそれらのまとめサイト的な形にしたのはいいけれど、更新のたびにHTMLを編集するのが大変だな」
「Wordpressを使うといいみたい。。」

**〜 2ヶ月後 〜**
「Wordpressすげー！」
「ブログ始めようかな。これでアフィリエイターの仲間入り！」

**〜 ３ヶ月後 〜**
「ブログって書くの想像以上に大変だな」
（三日坊主で終わった）
「やっぱ自分にはコンテンツを書くより、コーディングのほうが合っているのかもしれない」
今までの作品を管理できるようなWPテーマを自作。そこにしょうもない作品ばかり作っては投稿する日々。

**〜 ４ヶ月後 〜**
「なんだかんだサーバー・ドメイン代合計10,000円ぐらい払ってきたな。収益ゼロだけど...」
「このままじゃいけない」
自分の興味本位や快楽の赴くままコーディングをするのではなく、ユーザー視点でどうしたら価値あるものが作れるのか考えはじめるように..

**〜 5ヶ月後 〜**
と、ちょっとした精神変化があったものの、とりあえず今のサイトを無料で運営できるようにしたいという欲が勝った。
「はて。AWS, GCPとな。いや、PaaSって言われても。。」

**〜 6ヶ月後 〜**
「よし、Apacheの設定とかSSLとかキツかったけど、なんとか完全無料路線に移行できた！」

**〜 7ヶ月後 〜**
模試を数日後に控え、絶賛Qiita執筆中。

***

と、大雑把にこんな流れで今に至ります。（だいぶいい加減）
ちなみに、この間にrailsやlaravel、はたまたpythonで機械学習やスクレイピングをやってみたりなど結構寄り道しています。

さて、やっとのことですが本題に入ります。

上の茶葉にもあるように、過去の私ははじめて書いたWEBサイトを一般公開したいという気持ちが強く、右往左往しながらもWEBサーバーを借りてサイトを公開するに至りました。
けれども、主に金銭、もしくは時間などの理由で断念する初心者の方も多いと思います。

スペックはそこまで気にしないから、自分と他数人の間で共有できるWEB上の空間が欲しいというニーズは私たちWEB開発に携わる人間であれば結構多かったりするのではないでしょうか。

このようなニーズには、レンタルサーバーの最安プランでもオーバースペックだろうし、収益がないのにサーバー代が食われるばかりでは辛い気持ちになってきます。

私自身、インフラに関してはまだまだ初心者ですが、試行錯誤の上に「ほぼ無料」な方法にたどり着いたので、この場を借りて共有したいと思います。

![IMG_0087.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563935/78e59a16-1731-97a7-0fc2-c53951791266.png)
*彼はとてもいいやつであった。*

## 全体像

まずは全体の流れから説明します。
まずはじめに[Google Cloud Platform](https://console.cloud.google.com/?hl=ja)を利用して、最低限Wordpressの初期画面が見れるまでを前編に。
その後にオプショナルで独自ドメインを取得し、セキュリティ強化や便利なツールの導入などを後編で紹介していきます。

これはWordpressサイトをホストすることを中心に書かれたチュートリアルですが、さらに一般的に、ただのPHP実行環境付きWEBサーバーとしても利用できます。

実際、開発者の場合ですとWorpdressだけでは物足りなくなるだろうと思うので、サブドメインを取得してメインのWordpressサイトと他のプロジェクトを1つのサーバーでホストするところまでをカバーします。

個人開発用にWEBサーバーを持っておきたいのなら前編だけで大丈夫ですし、今後発展していくサイトになる場合は後編までやって、あとから適宜インフラのスケールアップができるようになるといった構成になります。

後編のドメイン取得で唯一料金が発生しますが、年間1円から1,500円程度なので、WEBサーバーを借りて普通にやるより断然安く済みます。

### 最低限の前提知識
この記事にたどり着いたぐらいの方であればおそらく皆さんは問題ないと思いますが、以下に関する説明はしませんので、分からないことがあったら各自調べてください。。

- Wordpressとは
- ドメイン/WEBサーバーとは
- 基本的なLinuxコマンドとターミナルエディタ（本記事ではvimを使用します）

なお、AWS, GCPなどのPaaSに触れたことがなくても、とりあえず記事に従って環境を構築すれば、なんとなくそれがどのようなものかが掴めるようになります。
説明不足や難しい用語は排除しているつもりですが、分からないことがあってもとりあえずコマンドコピペしていけば大丈夫です。
こういうのはとりあえずやってみて、後から理解するという形の方がストレスも少なくて良いと思います。

中・上級者の方にとっては説明が回りくどく感じる部分もあるかもしれませんが、ご了承ください。

### 本環境のメリット/デメリット （開発者視点）
普通のレンタルサーバーを利用する場合と比較して感じる本環境のメリット・デメリットです。

| メリット | デメリット |
| ---- | ---- |
|  最低スペックだと非常に安い  |  レスポンスが遅い（急なアクセスに弱い）  |
| 自由に設定ができる | 初心者には難しい要素が多い |
| 「モダンな技術を使ってる私・俺カッコいい」感を味わえる | 多機能すぎて混乱に陥りやすい |
| **勉強になる** | 初めてだと詰まって時間がかかるかも |

また、無料でできる範囲ではどうしても低スペックな環境となりますが、課金すればレンタルサーバーよりも柔軟にスケールアップができるので、将来的に大きなプロジェクトになるものであってもその初期段階として使う分には全く問題ありません。

### 本当はもっと簡単にできる

前半でやりますが、GCPのCompute Engineでのインスタンス作成の際、便利なことに[既にサーバーやWordpress、SSLまでの設定を済ましてあるイメージ](https://console.cloud.google.com/marketplace/details/bitnami-launchpad/wordpresspro?hl=ja&project=even-timing-282316&rif_reserved)を利用する方法もあります。

一度私もこういった物を利用したことがあるのですが、最適化されていると言えど、複雑なディレクトリ配置や、仕組みをよくわからないまま使っている恐ろしさがあったのでそれ以来使っていません。（ドキュメント読むのがめんどくさい（殴））

それに、１から自分でこれらの環境を構築した方が勉強になると思います。

### 前編の流れ
- GCPを使って新しいVMインスタンスを作る（CentOS7）
- IPアドレスを固定する
- ローカルマシンからSSH接続する
- ファイヤウォールの設定をする
- Apacheをインストール
- PHPをインストール＆設定
- MariaDBをインストール＆設定
- Wordpressを設置＆設定

ここまでだと

- `http://example.com`ではなく`３４.83.xxx.xxx`のようなIPアドレス直打ちでのWEBページ閲覧
- サイトのセキュリティがイマイチ
- 急激なアクセス増加になった時に対応できない

といった問題が残ります。

### 後編の流れ
- 独自ドメイン取得（1~1,500円）
- CloudflareでSSL化（full strictモード）
- Wordpressのおすすめプラグイン
- phpMyAdminをインストール
- サブドメインを取得し、別のプロジェクトを設置する
- ターミナルの見た目を良い感じにする
- WP記事の画像などのアセットをGoogle Clould Storageに移行 (執筆候補)

ここまでで、個人（もしくは数人）で閲覧/管理する程度であれば十分なWordpress環境の出来上がりです。
同時アクセスは１０人以下、月間１万VP程度未満なら余裕で耐えられますが、レスポンスは一般的なレンタルサーバーよりも原則遅くなります。
しかし、アクセスが増えるようなら Compute Engine をグレードアップしたり。
（画像や動画などのアセットが増えてきたら Cloud Storage をアップグレードしたり。）
という感じにスケーラブルな環境となります。

この作業は大体何時間でできますと言いたいところなのですが、茶番の前半にある私のような初心者の方と、ある程度linuxなどに触れたことがある方では全然違うと思うので、明言は避けたいと思います。
完全に初心者な方でも、はじめは見よう見まねでやれば全然OKですし、ここからインフラ周りの勉強をはじめるきっかけとなったら嬉しいです。


では、Wordpressの「Hello World！」まで駆け抜けていきましょう！

## STEP 0　Googleアカウント作成（任意）
[Googleアカウント作成](https://www.google.com/intl/ja/account/about/)
もちろん既存の物を使ってもOKです。
![step0-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563935/798f7a34-cb26-8708-795b-24438b20b091.png)

ちなみに私はこの記事のために新しく作成しました。
（皆さんは二段階認証を設定しましょうね！！！）

## STEP 1 GCPに登録しよう
[Google Cloud Platform (GCP)](https://console.cloud.google.com/?hl=ja&pli=1)にアクセスして、無料トライアル枠を有効にします
![step1-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563935/d68b2658-fed9-75ea-7b30-6f5759f56649.png)


登録には住所、クレジットカードなどの情報が必要ですが、知らぬ間に課金される心配はありませんし、$300分の猶予もあるので安心です。

GCPは、AWSやAzure同様、PaaSといって、まあ、クラウド上でいろんなタイプのマシンを借りることができ、本当にいろんなことができるサービスのことです（）
その中で、Google Compute Engine (GCE) という、汎用的なコンピューティング機能を持った仮想マシンを利用して、それをWEBサーバーにしていきます。

詳しいことは各々調べてくださいと言いたいところですが、もしあなたが全く無知の初心者で、PaaSについて調べて「なるほど理解」ってなったらあなたは天才です。
とりあえず意味もわからずやってみて、そうやってるうちに分かるようになってくるものなので、先に進んで大丈夫です。
（教訓臭くてごめんなさい。）

次に、プロジェクトの名前を変更します。

デフォルトでは「My First Project」となっているので、 **左上のナビゲーションメニュー > IAMと管理 > 設定** から簡潔でわかりやすい名前に変更してください。
![step1-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563935/68b61b43-73e6-dc12-25cc-8a44736a7a91.png)

## STEP 2 GCEインスタンスを作成しよう

**ナビゲーションメニュー > Compute Engine** でインスタンス作成画面に行きます。
![step2-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563935/d20206f2-769b-5f2b-8c01-cd19b5f056b4.png)
「作成」からインスタンス初期設定をはじめていきます

![step2-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563935/cf113f99-ba3e-9d1d-669b-6e1cf837547e.png)
以下のようにポチポチしていってください

| 項目 | 備考 |
| --- | --- |
| 名前 | 後によく使用するので覚えられるようなものにしましょう。 |
| リージョン | [us-west/central/east]のいずれか **ただしus-east4を除く** ※us-west1が地理的に一番日本から近いです |
| ゾーン | 適当に |

マシンの構成

| 項目 | 値 |
| --- | --- |
| シリーズ | N1 |
| マシンタイプ | f1-micro |

下に行って、ブートディスクの「変更」から
![step2-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563935/3142764d-4b60-3833-ed85-60f64275a812.png)

| 項目 | 値 |
| --- | --- |
| OS | CentOS |
| バージョン | CentOS7 |
| ブートディスクの種類 | 標準の永続ディスク（HDD） |
| サイズ | 30 (GB) |

以上の設定がAlways Free枠でできる最大スペックのインスタンスです。
※Always Freeとは、無料トライアル期間が終わっても、ずっと無料で使える枠のことです。
（この枠は稀に仕様変更があるので注意）

右側の見積もり金額に「$5.08/月」とありますが、気にしないでください。

こんな感じにインスタンス（仮想マシン）が起動しているのが分かったら成功です。
![step2-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563935/6feb0902-8977-f15b-32da-b34027561caa.png)

しかし、この外部IPアドレス（インスタンスに外部からアクセスするための住所）は、このままだと再起動するたびに変わってしまうという状態なので、次はそれを固定させる作業をします。

## STEP3 動的（エフェメラル）IPから静的IPに変更しよう

**ナビゲーションメニュー > VPCネットワーク > 外部IPアドレス**
から、今作成したインスタンスの外部IPを「エフェメラル」から「静的」に変更します

![step3-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563935/ac837a7e-178c-d84e-5516-8d9ff0469735.png)


![step3-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563935/8a659d7c-9d10-40f4-107e-375fb913be2b.png)
名前は適当に。

これでインスタンスを再起動してもIPアドレスが変わることはなくなりました。

## STEP 4 ローカルマシンからSSH接続しよう
ここでは作成したクラウド上にあるVMマシンに、皆さんが今操作しているパソコンのターミナルで接続します。

本当は、コンソール画面をブラウザで開いてそこで操作することもできるのですが、これから長いこと使うことになるかもしれないので、ローカルのターミナルから接続できるようにしておくと便利です。

> ローカルマシンはMacを想定しています。
> 今からやるSSH接続はWindowsでも同じコマンドでできると思いますが、できなかった場合は「GCE SSH接続 windows」で調べてみてください。

では、ローカルのターミナルを開いて、以下のコマンドでSSH接続に必要な鍵を生成します。

```
ssh-keygen -t rsa -b 4096 -f ~/.ssh/id_rsa_gce -C '[インスタンス名]'
```

入力すると、パスフレーズの設定を促されますが、そこは任意で大丈夫です。（空白でenterを2回でパスフレーズは設定されません）

次に生成された公開鍵をGCEに登録していきます。

```
cat ~/.ssh/id_rsa_gce.pub
```
で表示される長い文字列（"ssh-rsa xxxx〜== [インスタンス名]" まで）をコピーします。

そうしたら、ブラウザでGCEのインスタンス名をクリックして詳細画面を開き、「編集」をクリックします。

![step4-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563935/c1b79805-d07c-fdfe-0e60-359dacc9bd2d.png)

一番下の方の`SSH 認証鍵が0 個あります`とある部分に先ほど保存した公開鍵をペーストし、そのまま保存します。
![step4-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563935/43391f09-1e16-d51b-fdf7-a95c42e761c8.png)

これで準備が整ったので、ローカルで以下のコマンドを打ちます

```
ssh -i ~/.ssh/id_rsa_gce [インスタンス名]@[先ほど固定した外部IP]
```

```
Last login: Fri Oct 23 14:10:59 2020 from xxxxx
[main@main ~]$
```
のような表示になったら接続成功です。

## STEP 5 SSHのポートを変更する
SSH接続には現在デフォルトで22番ポートを利用していますが、デフォルトなだけあって攻撃を受けやすいです。
`/var/log/secure`あたりで、すでに怪しげなログが見られるかもしれません。

そのため第一にこの22番ポートを閉鎖し、他のポートでSSH接続をするようにしていきます。

まず、ファイアウォールはGCPのパネルで操作していくので、こちらでは無効化しておきます。

```
sudo systemctl disable firewalld
```

次に[SElinux](https://www.redhat.com/ja/topics/linux/what-is-selinux)を無効化します。
これはコマンドを入力するのではなく、設定ファイルを直接書き換えるといった方法をとります。

### 最低限のvim
ここで初めてvimを使用する方のために、一応さくっと説明しておきます。
vimはターミナル上でのテキストエディタツールで、非常に高機能なのですが初心者には手が出しづらい印象があります。
といっても、以下の流れをおさえればとりあえずは大丈夫です。

1. `vim [ファイル名]` でエディタ起動
- `i` でデフォルトの閲覧モードから編集モードへ
- 普通に文字編集
- `esc`で閲覧モードに戻る
- 閲覧モードの状態から`:wq`で保存して終了

参照: [Vim初心者に捧ぐ実践的入門](https://qiita.com/okamos/items/c97970ab34ff55ff3167)

では早速設定ファイルを開きます。

```
sudo vim /etc/selinux/config
```

![step5-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563935/f00d76e7-deb8-4b7d-1b47-18e92436777a.png)
ここで、`SELINUX=enforcing`となっていると思うので、それを`disabled`に書き換えます。

設定を反映するために、GCEのコントロール画面でインスタンスを再起動してください。
![step5-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563935/d6fa20f3-0bb1-b000-ff84-bf7c08b3bca7.png)

ローカルのターミナルの方は、勝手に接続が切れてるので、再起動後にまたSSH接続してください。

```
ssh -i ~/.ssh/id_rsa_gce [インスタンス名]@[外部IP]
```

そして

```
getenforce
```

の結果が`Disabled`となっていればOKです。

では、ポートの設定をしていきます。
ポート番号は**1024から49151の範囲で任意に決めてください**
私は45678にしますので、今後この数字があったら各自のものに置き換えてください。

```
sudo vim /etc/ssh/sshd_config
```

で、`# Port 22`となっているところのコメントアウト("#")を外して、自分が決めたポート番号に置き換えます。
![step5-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563935/2b5402e2-46cf-0765-80b0-16c51ac01ea7.png)

保存したら

```
sudo systemctl restart sshd && sudo systemctl restart sshd
```

でsshdを再起動＆ステータス確認します。

```
● sshd.service - OpenSSH server daemon
   Loaded: loaded (/usr/lib/systemd/system/sshd.service; enabled; vendor preset: enabled)
   Active: active (running) since 金 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

10月 23 15:12:15 main systemd[1]: Stopped OpenSSH server daemon.
10月 23 15:12:15 main systemd[1]: Starting OpenSSH server daemon...
10月 23 15:12:15 main sshd[1204]: Server listening on 0.0.0.0 port 45678. <= 自分が設定した番号になっている
10月 23 15:12:15 main sshd[1204]: Server listening on :: port 45678.
10月 23 15:12:15 main systemd[1]: Started OpenSSH server daemon.
```
※しばらくすると勝手にSSH接続が切れます。

次にGCPの画面に移動して、 **ナビゲーションメニュー > VPCネットワーク > ファイアウォール** から、 `default-allow-ssh`をクリックしてルールを変更していきます。
![step5-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563935/acdf59ee-af27-8a62-6aa1-91aa7ce8bfc5.png)

右上の「編集」から下に行って、tcpポートを自分の設定した番号に変更し、保存してください。
![step5-5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563935/2623d6d9-5907-3873-7a04-4f665da2e100.png)

これで新しいポートからの接続ができるようになりましたが、22番ポートからのアクセスを拒否するルールがまだなので、そちらを作成します。

ファイアフォールの設定画面トップの「ファイアウォール ルールを作成」から、以下のように設定します。（赤枠が変更を加えた部分です）
![step5-6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563935/ab7fc00f-7df2-6131-c9a2-8098c0579fd7.png)

![step5-7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563935/96cedd13-2035-6a2a-27c4-20b57f7fe898.png)

注意ですが、この2つのルールは全てデフォルトで適応されるものなので、今後同じプロジェクトでGCEのインスタンスを増やしたりした場合、それに22番ポートでssh接続することはできないので心のどこかに留めておいてください。

さて、ターミナルに移りまして、まだインスタンスと接続されている場合は`exit`で一度接続解除してください。

ここで先ほどと同じように

```
ssh -i ~/.ssh/id_rsa_gce [インスタンス名]@[外部IP]
```
としても接続ができないことが確認できると思います。
ではこのステップの最後に、

```
ssh -i -p [ポート番号] ~/.ssh/id_rsa_gce [インスタンス名]@[外部IP]
```
として接続できたら成功です。
少し長かったですが、これでよりセキュアな環境となりました。

### STEP 6 Apacheをインストールしよう
いよいよこの仮想マシンがWEBサーバーになります。
WEBサーバーソフトウェアにはApacheとNginxという二大巨塔があるのですが、今回はApacheでいきたいと思います。

なお、ここからは実行時にスーパーユーザー権限を必要とするコマンドが多いので、毎回`sudo ~~`とする代わりに、はじめにルートユーザーになっておきます。

```
sudo su -
```

アクセスログの日時は日本時間であった方がわかりやすいので、マシンのタイムゾーンを変更します。

```
timedatectl set-timezone Asia/Tokyo
```

`date`コマンドの結果が現在の日本時間になっていたらOKです。

Apacheインストール

```
yum install -y httpd
```

起動＆永続化

```
systemctl start httpd && systemctl enable httpd
```

ここでまたファイアウォールの設定をします。
先ほどはSSHのルールを変えましたが、今度はそれとは別の通信プロトコルである`http`と`https`についての設定です。皆さんお馴染みのやつですね。

この２つのプロトコル経由でのアクセスはデフォルトで許可されていないので、このままだとブラウザからアクセスしてもブロックされて表示されません。

ですので、これらを許可するようにします。
といっても簡単です。

Compute Engine のインスタンス管理画面からインスタンスを選択して、右上の「編集」に移動します。
![step6-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563935/d84660b4-5062-168f-fd0b-e3d33717b714.png)

中盤にあるこの2つの項目にチェックをするだけです。

実はこれ、インスタンスを作成するときに同時に設定できた項目なのですが、意味もわからずはじめにチェックするよりかは、このタイミングでやるほうが腑に落ちるのではないでしょうか。
~~というのは建前で普通に忘れていましたゴメンナサイ~~

さて、ここでブラウザの検索バーに
`http://[インスタンスのIPアドレス]`
でEnter！
この画面がでたら成功です。
![step6-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563935/0cb495b2-84af-334a-7c55-e3f55a1fce0c.png)

ここまでの段階でこのマシンは、WEBサーバーとして公開ディレクトリ（`/var/www/html`）においたファイルをストリームすることができるようになりました。

今回の目的である Wordpress というソフトウェアは主に、「①管理者が記事を書き」、そのデータを使って「②WEBサイトとして表示するためのHTMLを生成する」という機能を持ちます。

（このように、テンプレートに記事などのコンテンツを埋め込んで配信するシステムをCMSといいます。）

①では、データの格納先としてデータベースが必要です。
データベースから必要なデータを抜き出して、②のようなことをするのに、PHPというプログラミング言語を使用します。

というわけで、次はPHPの実行環境とMariaDB（データベース）をインストールしていきます。

## STEP 7 PHPをインストールしよう

Apacheをインストールするとき `yum` コマンドを使用しました。
これはCentOSでソフトウェアのパッケージを管理するツールです。
`yum install httpd` と打つと、 `リポジトリ`といって、パッケージが沢山置いてあるクラウド上の倉庫から `httpd` を探し、それを実行するのに必要な他のパッケージとともにインストールしてくれます。

今から`PHP7.3`をインストールしますが、デフォルトのリポジトリ群にはどこにもないのでこのままではインストールすることができません。

というわけで、まずはPHP7.3が置いてあるリポジトリを追加します。

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

これでPHP7.3がインストールできるようになったので、必要なライブラリも含めて一気にインストールします。

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

以下のようにしてPHP7.3が入っているか確認できます。

```
[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
```

ここで

```
vim /var/www/html/info.php
```
でエディタを起動し、

```
<?php
  phpinfo();
?>
```
と書いて保存してください。

そうしたら `http://[IPアドレス]/info.php`
にアクセスしてみてください。

今入力した内容がそのままテキストで表示されています。
これは、PHPをインストールしたものの、Apacheがそれをまだ読み込んでいないため、ただのテキストファイルとしてそのまま`info.php`を配信したからです。

```
systemctl restart httpd
```
でApacheをリスタートすることで、PHPと連携するようになります。

ブラウザの画面をリロードしてください。
![step7-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563935/0d03ba6e-2959-0960-a740-ddaf190bb35f.png)
このような画面が表示されたら成功です。
Apacheはhttpリクエストを受け取った後、`info.php`を実行するように命令し、その結果をクライアントに送り返しました。

ターミナル上で

```
php /var/www/html/info.php
```
とやってみてください。
ブラウザと同じ内容が出力されたと思います。

#### PHPの設定をしよう
Wordpressを利用するにあたり、やっておいた方がいい設定を紹介します。

まず、PHPの設定ファイルは`/etc/php.ini`なのですが、これに編集を加える前に一応バックアップを取っておきます。

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

もし、PHPがエラーで動かなくなったら、`php.ini`を削除し`php.ini.bk`を`php.ini`にリネームすれば全て元どおりになります。

```
vim /etc/php.ini
```

で、`/timezone`と入力してEnterを押下するとタイムゾーン設定の部分に移動してくれるので、`i`で編集モードにして、そこのコメントアウト（";"）を外して `Asia/Tokyo` とします。
![step7-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563935/5c88d12d-a4f9-ea19-477f-326aa6500a5d.png)

`esc`で閲覧モードに戻り、`/post_max_size`でEnterして、ここの値を`128M`ぐらいに変えておきます。
![step7-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563935/f3d86059-471a-549b-c578-251d7834881b.png)

同様にして`upload_max_filesize`も`128M`に変更しましょう。
![step7-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563935/3a8a291e-bac0-5f9b-f095-d28002fde6db.png)

最後の2の設定は、Wordpressで重い処理をするとき（データの大きい記事をアップロード、プラグインのインストールなど）にエラーに引っかからないようにするためです。

>ログ出力などのその他の設定は任意でこちらを参照してみてください。
>[【PHP】PHPをインストールしたらやっておきたい設定](https://qiita.com/knife0125/items/0e1af52255e9879f9332)

では、`:wq`で設定ファイルを保存して閉じて

```
systemctl restart httpd
```

でApacheを再起動して読み込ませます。
ブラウザで`info.php`を更新すると、変更を加えた部分が反映されて表示されているのがわかります。
![step7-5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563935/5ab083b3-53c4-840c-eac2-645cca2d155d.png)


## STEP 8 MariaDBをインストールしよう

PHPの環境ができたので、次はMariaDBというデータベース管理システムをインストールします。

以下のコマンドで一気にインストールから永続化&起動までします。

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

データベースというと、MySQLをご存知な方もいると思いますが、利用者目線からするとMariaDBはそれの若干上位互換なのですが、その違いを実感する場面は初心者にはあまりないでしょう。

>参考
>[MySQLとMariaDBを比較！各DBの特徴や違いについて確認しよう！](https://style.potepan.com/articles/19653.html)

```
mysql_secure_installation
```
で、対話形式での初期設定を開始します。
基本Enterでいいのですが、途中データベースのルートユーザーのパスワードを設定するように促されるので、安全なものを入力してください。（キーボードを打ってもパスワードは表示されませんので、タイプミスに気をつけてください）

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

Thanks for using MariaDB!
```
と、設定が完了したら

```
mysql -uroot -p
```
で先ほど設定したパスワードを使って、データベースのルートユーザーでログインします。
![step8-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563935/00f4e3eb-0568-957c-da25-d0719b3182f2.png)
このまま、以下のようにしてWordpress用のデータベースを作成し、`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)
```

>備考
> "CREATE" などのSQL命令文は基本大文字にしていますが、小文字でも大丈夫です。
>複数のWordpressサイトをこのサーバーにおく予定がある場合は、区別がつくようなデータベース名にしておくと、あとで楽です。

今使っているユーザーはルートユーザーといって、なんでも出来てしまうユーザーです。
Wordpressには、関係のない他のデータベースの操作を禁止するために、次ではそのための新しいユーザーを作成し、それに今作成した`wp`データベースのみに対する操作権限を与えます。

```
MariaDB [(none)]> CREATE USER '[新規ユーザー名]'@'localhost' IDENTIFIED BY '[新規ユーザーのパスワード]';
Query OK, 0 rows affected (0.00 sec)

MariaDB [(none)]> GRANT ALL PRIVILEGES ON wp.* TO '[新規ユーザー名]'@'localhost';
Query OK, 0 rows affected (0.00 sec)
```

これで専用のユーザーが作成できたので、一度`exit;`でログアウトして、そちらのユーザーでログインします。

```
MariaDB [(none)]> exit;
Bye
[root@main ~]# mysql -u [ユーザー名] -p
Enter password: ！！！入力しても見ることはできません！！！
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)]>
```

ここで`show databases;`の結果が

```
MariaDB [(none)]> show databases;
+--------------------+
| Database           |
+--------------------+
| information_schema |
| wp                 |
+--------------------+
2 rows in set (0.00 sec)
```
このように、`information_schema`と先ほど作成したデータベースのみになっていればOKです。

## STEP 9 Wordpressを設置しよう

いよいよWordpressを設置します。
[Wordpressの公式サイト](https://ja.wordpress.org/download/)からダウンロードしようとすると、当たり前ですがローカルマシンにデータがダウンロードされてしまいます。

これをGCEインスタンスに設置する方法はいろいろありますが、ここでは`wget`を使いましょう。

`wget`は、インターネットからコンテンツをダウンロードするためのコマンドで、今のCentOSには入っていないので、まずはインストールします。

```
yum install -y wget
```

公開ディレクトリのルートに移動して

```
cd /var/www/html
```

最新の日本語wordpressをダウンロードします。

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

`ls`してみると、`latest-ja.tar.gz`があるのが確認できると思います。

次に、このファイルを`tar`コマンドを使って展開します。

```
tar xvfz latest-ja.tar.gz
```

この時点で`ls`してみると、このような結果となります。

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

ここで、`wordpress`以外はいらないので、削除してしまいましょう。

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

さて、これでWordpressのデータをCentOSにインストールすることができました。


#### 将来を見据えたディレクトリ構造にしよう
続いてこの記事の後編の都合により、こWordpressのデータの場所を変更していくのですが、少々内容が難しいかもしれないので[理由は置いておいてこちらにスキップしても構いません。](#前置き終わり)

Apacheはデフォルトでは、`/var/www/html`を公開ディレクトリのルートとしています。（今後は「ドキュメントルート」といいます）

今は`http://[IPアドレス]/hoge.html`
のようにアクセスしていますが、後半ではドメインを取得し、
`http://example.com/hoge.html`
という感じでアクセスするようになります。

個人開発が進むと、Wordpressのサイトだけでなく、別のプロジェクトも設置したくなるかもしれません。

そうなったとき、Wordpressのサイトは
`http://example.com/wordpress/`
をトップにして、別のプロジェクトのトップを
`http://example.com/anotherproject/`
とする

みたいな方法でも構わないのですが、Apacheサーバー的にはこれらを同じサイトとみなしてしまうので、同じ場所に2つのプロジェクトのログが書き込まれるなどして混乱の元となります。

このような場合、**サブドメインを作成し、ApacheのVituralHost機能を使って結びつける**のが一般的だと思います。
今は詳しく理解する必要はありませんが、DNSの設定でメインのWordpressサイトは`http://example.com`、別プロジェクトは
`http://another.example.com`に割り当てるとします。

そうするとApache側の設定によって、`example.com`, `another.example.com`をそれぞれ別のドキュメントルートに割り当てることができます。

イメージとしてはこんな感じです。

| プロジェクト名 | URL | ドキュメントルート | 
| --- | --- | --- |
| ブログ | `https://example.com` | `/var/www/wordpress` |
| 楽しいサイト | `https://tanoshii.example.com` | `/var/www/tanoshii` |

こうするとこで、片方のサイトにだけアクセス制限をするなどといった設定がしやすくなります。

アクセスの多い大きなサイトを運営するとなると、1つ（もしくは複数）のサーバーに1つのサイトをホストするのですが、個人ではそのような必要性はないので、どんどん同じサーバーにサブドメインを結びつけていくことができます。

といっても、VirtualHostを使って設定するのは後編でドメインを取得した後なのですが、以上の理由にのっとり、次のようにWordpressを移動させておきます。

##### 前置き終わり
```
systemctl stop httpd # 一応Apacheを止めておきます
cd /var/www
mv html/wordpress .
chown -R apache:apache wordpress/ # 所有者をrootからapacheユーザーに変更
rm -rf html
```

次に、Apacheの設定で、デフォルトのドキュメントルートを`/var/www/html`から`/var/www/wordpress`に変更します。

```
cd /etc/httpd/conf
cp httpd.conf httpd.conf.bk # php.ini同様にバックアップ作成
vim httpd.conf
```

`/DocumentRoot`で検索して、以下のように変更していってください。
![step9-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563935/28244cc4-8abe-50d0-c97e-5377f5284ce9.png)

設定を保存した後、

```
httpd -t
```
で、構文エラーがないかチェックできます。
Apacheの設定には試行錯誤がつきものなので、これは覚えておくと便利です。

`Syntax OK`と、大丈夫そうなら

```
systemctl start httpd
```
で起動してみましょう。

ブラウザで`http://[IPアドレス]`にアクセス/リロードしてみて、このような画面がでたら成功です。
![step9-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563935/f79f4dbb-02ec-919d-8c67-d7cdaf9c7665.png)

STEP 8 で設定したworpdress専用のデータベースとユーザーの情報を入力します。
![step9-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563935/78fce4a7-b65d-9c67-7aa5-f53de1d86cc2.png)

正常に登録できたらインストール実行ボタンが出るので、それを押した後、Wordpress管理者としての情報を登録します。
![step9-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563935/96049d68-544c-d0dc-3b6e-088bdaf36b47.png)

設定後、ログイン画面で今設定したユーザー名とパスワードでログインして
![step9-5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563935/0af23a40-f2b5-0e80-1074-7f43b20826e9.png)
管理画面にアクセスすることができました！

`http://[IPアドレス]/`にアクセスすると、メインページが表示されます。
![step9-6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563935/66993629-642d-0baa-383f-3892641dea33.png)

**Hello World!**
お疲れ様でした。

## 前編のまとめ

- GCPを使って新しいVMインスタンスを作った（CentOS7）
- IPアドレスを固定した
- ローカルマシンからSSH接続した
- SSH接続に使用するポート番号を変更した
- Apacheをインストールした
- PHPをインストール＆設定した
- MariaDBをインストール＆設定した
- Wordpressをwgetで取り込んだ
- Apacheでドキュメントルートを変更した
- Wordpressをインストールし、ログインした

ここまでかかったコストは0円です。
ここからWordpressのテーマ作って遊んだりいろいろできます。

しかし、個人開発でこのサーバーを利用するにしても、まだ問題は残ります。

- 流石にIPアドレス直打ちでのアクセスはダサい
- このWordpress以外のサイトを設置するのが難しい
- なんかバズって急にアクセス来ても対応できない
- セキュリティが不十分
- ターミナルがダサい（モノクロで疲れるし、毎回`systemctl`って打ちなくないよ...）

というわけで、後編はこれの問題に対応していきます。
ただし、セキュリティについては無料で対策できる範囲、そして私の能力的にも限界があるので、最悪の事態を回避するためにこのサーバーに本当に大事な情報は置かないようにしましょう。

## 後編について Coming soon...
後編に関しては上記のように大体の構成は決まっています。
しかし、この前編の評価が得られないまま後編を書いても数多ある記事に埋もれてしまうだけだと思うので、数十LGTMを稼げたら本格的に編集作業に入ろうと思います。ここまで読み進めてくれた方はどうぞ「いいね」や共有をしてくれると幸いです。