Raspberry PiでWebページ公開

# はじめに
　Raspberry Piを使用して、Webページを公開します。

 - 環境
    - 接続側：Windows10のコマンドプロンプトでのOpenSSH
    - サーバー側：Raspberry Pi3B Raspbian 10

# ファイアウォールのインストール＆設定
　まず、ファイアウォールをインストールします。Ubuntuにデフォルトでインストールされている、Uncomplicated Firewall(ufw)を使用します。

```
sudo apt-get install ufw
```
次に、ポート開放の設定を行います。Webページを公開するので、httpの80番とhttpsの443を開放します。また、sshも使用するので、22番も開放します。

```
sudo ufw allow 22
sudo ufw allow 80
sudo ufw allow 443
```

　上記のポート以外閉じるようにします。

```
sudo ufw default deny
```
　最後に、ファイアウォールを有効化します。

```
sudo ufw enable
```
　※ファイアウォールの設定確認。

```
sudo ufw status
```

# Nginxのインストール
　Webサーバーソフトは、Apache、IIS、LiteSpeed、Nginxなどがありますが、今回は、軽量なNginxをインストールします。


```
sudo apt-get install nginx
```
　インストールしたNginxを起動させます。

```
sudo systemctl start nginx
```

　ブラウザにRaspberry PiのIPアドレスを入力すると、Nginxのデフォルトページが表示されます。
<img width="491" alt="1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/9b9bf6ab-8469-3af4-82a7-5dd7608edea5.png">


# 公開するWebページをアップロードor作成
　公開したいWebページをRaspberry Piにアップロードするか、Vim、Visual Studio Code Insidersで利用できるRemote Developmentを使用してWebページを作成します。
　例として、下記のHTMLファイルを使用します。

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title> - Nginx on Raspberry Pi - </title>
	<style>
		body {
			width: 90%;
			margin: 40px auto auto auto;
			text-align: center;
			font-family: 'Yu Gothic', 'Hiragino kaku Gothic Pro', sans-serif;
		}
	</style>
</head>
<body>
	<h1>Raspberry PiにNginxをインストール！</h1>
</body>
</html>
```
　上記のHTMLファイルを`/var/www/html`にアップロードor作成します。
　Raspberry PiのIPアドレスをブラウザに入力し、作成したHTMLファイルの内容が表示されると成功です。
<img width="649" alt="2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/70be024e-6649-b4e7-0376-1960d33ab9b8.png">

# IPアドレスの固定(ルーター側設定)
　IPアドレスを固定するためにルーターの管理画面を使用します。ここでは、NEC製のルータ、Atermでの例です。メーカーごとに管理画面の設定が異なるので、マニュアル等を参照してください。
　MACアドレスのところに、b8:27から始まるRaspberry PiのMACアドレスを入力し、IPアドレスのところに、使用したいIPアドレスを入力します。
<img width="704" alt="3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/8936a03c-a1b5-1409-8a13-280c8657cc14.png">

# IPアドレスの固定(Raspberry Pi側設定)
　上記で設定したIPアドレスをRaspberry Piの設定ファイルに書き込みます。`/etc/dhcpd.conf`をエディタで編集します。

```
interface eth0 #有線LA
static ip_address=192.168.0.20 #上記で設定したIPアドレス
static routers=192.168.0.1 #NEC Atermの場合のルーターのアドレス
static domain_name_servers=192.168.0.1 #8.8.8.8のようなパブリックDNSでもOK
```
　設定後、Raspberry Piを再起動させます。

# ポートマッピング設定
　グローバルIPアドレスからのアクセスをRaspberry Piに中継するようにします。ルーターの管理画面から、ポートマッピング設定を開きます。
　LAN側ホストに設定したIPアドレスを入力します。HTTP、HTTPSを使用するので、ポートは80番と443番を指定します。
<img width="690" alt="4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/78a6e610-041b-a73d-fce3-6d991308edaa.png">
<img width="701" alt="5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483911/bc9f78a0-0504-aa63-30eb-7783a69fa06e.png">


# グローバルIPアドレスの確認
　<a href="http://taruo.net/e/" target="_blank">診断君</a>や<a href="https://env.b4iine.net/" target="_blank">確認くん+(Plus)</a>を利用して、自分契約回線のグローバルIPアドレス、リモートホストを確認します。

# Webページにアクセス
　ポケットWiFi、Wi2 300などのネットワークサービス、スマホ、テザリングなどの、ルーター以外の回線から、接続し、ブラウザのアドレス欄に契約回線のグローバルIPアドレスorリモートホストアドレスを入力して、アップロードor作成したHTMLファイルを表示できれば成功です。

# さいごに
　ダイナミックDNSを使用してドメインを取得することによって、本格的にWebページを公開することができます。また、Let's Encryptを利用して公開鍵を取得することによって、SSL/TSLを利用することができます。
　auひかりを使用していると、よほどのことがない限り、グローバルIPアドレスが変化がありません。なので、auひかりを使用している人は、無理にダイナミックDNSを使用しなくても良いと思いますが、公開するときにリモートホストアドレスだとわかりにくいので、ダイナミックDNSを利用してドメインを取得(無料or有料)するようにした方が良いと思います。