Azure で Ubuntu / Apache2 で Web サーバを公開するまで

「Azure で最初のクラウドサーバを無料枠で作成する」
https://qiita.com/nanbuwks/items/120858191caf3b0a3f1c

で作成した、Ubuntu22.04サーバに、Apache2 を設定して Web サーバとして動かしてみます。

# apche2 をインストール

```
$ sudo apt install apache2
```

# ACL を設定

VirtualMachine にはまだドメインネームが割り当てられていません。なので http://example.com のような URL ではアクセスできませんが、パブリックIPアドレスが割り当てられているので、IP アドレスをURL に指定して Web ブラウザでアクセスしてみます。

Azure サービスのホーム画面から Virtual Machines を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/0ba11ab0-f645-e51c-7ee9-7c5bc52fe2eb.png)
パブリック IP アドレスを確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/5f35bf3f-47e1-3e7e-20fa-4206d0e32d91.png)

確認した IP アドレスを打ち込みます。これでWeb画面が出てほしいのですが・・・


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/568757a4-65c3-4e08-718e-f2f46381f7a9.png)

画面が表示されません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/9cf3dfc9-b193-bed9-3235-2ce446c4208c.png)

これは http 通信にセキュリティのためにアクセス制限がかかっているからです。
今回の設定では、 ネットワークセキュリティグループ test-azure-gen-nsg を操作して、http 通信を許可するようにします。

Virtual Machines の画面から使用している仮想マシンを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/3d6f044f-e34a-9bdd-04c8-0ec7c127e552.png)
「ネットワーク」を押して
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/634d91a6-b4b3-ac53-e517-ab4c94cfaffd.png)


「ネットワーク セキュリティ グループ」を押すと

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/349e3fde-1b2f-7716-8906-f2622cb56ff5.png)

現在のセキュリティ規則が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/25896ea0-52eb-cbde-f235-78461b448716.png)
「受信ポートの規則を追加する」を押して、以下のような内容を追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/2c3ce925-b7a0-3a90-9644-36cba3355161.png)
追加された状態。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/8faf2cbb-259b-6391-535d-37c99f25f9c1.png)

改めて、ブラウザで再読込するとテストページが表示されるようになりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/cfa3dc53-9de9-b843-5469-4dbc8af77c78.png)

# コンテンツの操作

この、画面に表示している html ファイルは以下の場所にあります。

```
$ ls /var/www/html
index.html
```

中身を見てみましょう

```
$ vim /var/www/html/index.html
```

以下のような html となってました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/7ac23c18-e12d-b381-e306-331a38416f55.png)

これから、独自に内容を作っていくのでこの html ファイルは削除してしまいましょう。

```
azureuser@test-azure-gen:~$ sudo rm /var/www/html/index.html
```

:::note warn 
現在 azureuser で操作しているので、 sudo をつけないとエラーが発生します。
```
azureuser@test-azure-gen:~$ rm /var/www/html/index.html
rm: remove write-protected regular file '/var/www/html/index.html'? y
rm: cannot remove '/var/www/html/index.html': Permission denied
```
:::

ブラウザを再読込すると、コンテンツが見えなくなってしまいました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/ab75f319-3959-30b2-842c-fa5075b5cda2.png)

`/var/www/html` に、適当なファイルを作ってみます。

```
azureuser@test-azure-gen:~$ sudo touch /var/www/html/tip
azureuser@test-azure-gen:~$ ls /var/www/html/tip
/var/www/html/tip
azureuser@test-azure-gen:~$ ls -alh /var/www/html/tip
-rw-r--r-- 1 root root 0 Apr  7 15:00 /var/www/html/tip
```

ブラウザからは、今作ったファイルが見えますね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/0cae4e20-2db7-22f4-1458-3d6a43ca069c.png)

tip は、中身の無いファイルでした。今度はちゃんとした html ファイルを作ってみます。
```
azureuser@test-azure-gen:~$ sudo vim /var/www/html/hello.html

```
「ミニマムな HTML5 ファイルを 「HTML Standard」を見ながら書く」
https://qiita.com/nanbuwks/items/19e7a5fafd6061efb909

を元に、以下のようなファイルを作ってみました。
```
<!DOCTYPE HTML>
<HTML><HEAD><META CHARSET=UTF-8><TITLE></TITLE></HEAD>
<BODY>
<H1>こんにちは</H1>
</BODY>
</HTML>
```

ブラウザで hello.html が見えるので、

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/c3617700-6b5f-b14a-4a0c-e0568741058f.png)
hello.html をクリックすると中身が表示されました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/f0f003c1-8820-23de-6c34-87930db50e96.png)

# ログを確認し、アクセス制限をかける

今ブラウザで見た記録は、ログに記録されています。

```
azureuser@test-azure-gen:~$ tail /var/log/apache2/access.log
182.170.165.119 - - [07/Apr/2023:14:59:23 +0000] "GET / HTTP/1.1" 200 588 "-" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36"
182.170.165.119 - - [07/Apr/2023:14:59:23 +0000] "GET /icons/blank.gif HTTP/1.1" 200 431 "http://20.125.147.200/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36"
182.170.165.119 - - [07/Apr/2023:15:00:14 +0000] "-" 408 0 "-" "-"
182.170.165.119 - - [07/Apr/2023:15:00:24 +0000] "GET / HTTP/1.1" 200 655 "-" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36"
182.170.165.119 - - [07/Apr/2023:15:00:25 +0000] "GET /icons/unknown.gif HTTP/1.1" 200 528 "http://20.125.147.200/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36"
182.170.165.119 - - [07/Apr/2023:15:01:16 +0000] "-" 408 0 "-" "-"
182.170.165.119 - - [07/Apr/2023:15:02:07 +0000] "GET / HTTP/1.1" 200 694 "-" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36"
182.170.165.119 - - [07/Apr/2023:15:02:07 +0000] "GET /icons/text.gif HTTP/1.1" 200 512 "http://20.125.147.200/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36"
182.170.165.119 - - [07/Apr/2023:15:02:47 +0000] "GET /hello.html HTTP/1.1" 200 450 "http://20.125.147.200/" "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36"
182.170.165.119 - - [07/Apr/2023:15:03:39 +0000] "-" 408 0 "-" "-"

```
ここから、テストでアクセスしたアドレスは 182.170.165.119 ということがわかったので、ACL の「ソース」に 182.170.165.119 と設定してみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/139524/cd413d1b-ea78-5172-16bf-1808ab7a5c5b.png)

そうすると、今自分がアクセスしている以外の グローバル IP アドレスからは画面が表示できなくなります。
開発中、テスト中などはこのように設定しておきましょう。