【AWS】動的Webサイト構築の備忘録

## はじめに

初心者の入門編として、AWSを用いて、動的Webサイトを構築する。

https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/ec2-lamp-amazon-linux-2.html

https://aws.amazon.com/jp/cdp/midscale-webservice/

## システム概略
システムダイアグラムは以下の通りである。

![Frontend3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483556/c73ad07c-0dd5-362e-22be-17441cfbde05.jpeg)


使用したサービスは以下の通りです。
- フロントエンド
    - AWS EC2
    - AWS Route 53
    - AWS Elastic IP
    - [Let’s Encrpyt](https://letsencrypt.org/ja/)(無料のSSL認証書発行局)
    - [お名前.com](https://www.onamae.com/)(日本最大級のドメインレジストラ、ドメイン取得サービスサイト)
      ICANN(ドメイン、IP、ポートの割り振りや割り当ての管理・調整する組織)から代理で取得する
      ※AWSでもドメインは取得できるが有料。詳細は[Qiita記事](https://qiita.com/grapefruit_0514/items/13dcb6ae79c8c610211d)を参照ください。

- バックエンド
    - AWS API Gateway
    - AWS VPC
    - AWS Lambda
    - AWS WAF
    - AWS S3
    - Apatch

- 開発環境
    - VS Code
    - AWS Cloud9
    - draw.io


## 事前準備

 1. AWSのアカウント登録
 1. VS Codeのインストール
 1. Pythonのインストール
 1. Draw.ioのインストール 

## システム構築

フロントエンドから開発して、次にバックエンドを開発し、最後にテストという流れで構築する。

### フロントエンド構築
#### 1. ドメインレジストラからドメインを取得する
[お名前.com](https://www.onamae.com/)に登録して、任意のドメインを取得する。

>例）
>sample0123456789.com

#### 2. EC2にドメインを割り当て、公開サーバーを作る
1. AWS Route53を開く
1. 「ホストゾーンの作成」をクリックする
1. ドメイン名に取得したドメイン名(sample0123456789.com)を入力する
1. 「ホストゾーンの作成」をクリックする
   ![Route531.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483556/b23a30b5-8196-0b83-42c9-a67384de6c66.png)
1. 作成したホストゾーンのドメイン名をクリックして管理画面を表示する
1.  レコードに記載されているネームサーバー名を各ドメインサービスのドメインレジストラに登録する
    例)	ns-****.awsdns-22.org ※末尾の.は削除する
    ![ネームサーバー10101.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483556/33594734-c430-14f0-ee77-d5f5db06638e.png)
   ![お名前2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483556/c3d92e30-deca-5b3b-33a4-6b758a770f98.png)
1. AWS EC2を開く
1. 「インスタンスを起動」をクリックする
1. 名前、OS、インスタンスタイプ、キーペアを決める。
    ※Amazon Linux 2 Kernel 5.10 AMI 2.0.20230320.0 x86_64 HVM gp2にするのに注意
    ![EC23.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483556/f122d6d4-12fc-a123-3da4-5cc5e474be7b.png)
    ![EC24.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483556/e21f49d8-47e6-ba9b-f847-5def711c2ef6.png)
    ![mykeypair10303.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483556/501bb934-7565-0c56-a004-c52df079a685.png)
1. ネットワーク設定で任意のサブネットを選択する
1. インバウンドセキュリティグループのルールで、タイプ=HTTPSを選択する
1. 1. ルールの追加で、タイプ=HTTPを選択する
1. ルールの追加で、タイプ=SSHを選択する
    ![EC25.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483556/535dd0c9-af46-a0f7-420f-25f5c06c0ad7.png)
1. 「インスタンスを起動」をクリックする
1.  インスタンス画面から「接続」をクリックして、SSHクライアントの下部のコマンドでSSH接続する
    ![EC2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483556/038f573b-eafb-ebef-181e-0b29a9f2ffa2.png)
1. EC2の管理画面の左側Elastic IPをクリックする
1. Elastic IP アドレスを割り当てるをクリックする
1. ネットワークボーダーグループに、EC2があるリージョンを選んで割り当てを押す
1. Elastic IPの管理画面から、作成したElastic IP アドレスにチェックを入れ、右上のアクションからElastic IP アドレスの関連付けをクリックする
1. Route53の作成したドメイン画面で、レコードを追加を押す
1. レコード名を空白、レコードタイプはA、Elastic IPを値に入れて、レコード作成を押す
1. EC2の管理画面でElastic IP アドレスが関連付けされたか確認する
1. nslookup ドメイン名(sample0123456789.com)でドメインが名前解決可能か確認する
   ```
   サーバー:  aterm.me
   Address:  192.168.10.1
   
   権限のない回答:
   名前:    sample0123456789.com
   Address:  54.165.***.**
   ```
これで任意のドメインを持つWebサーバーができた
    
ここまでの構成図
![Frontend1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483556/26cb45cc-07ac-06a9-2359-ec9de047b9d5.jpeg)

#### 3. Webサーバーソフトウェアで、Webページを公開する
1. 下記のコマンドでApatch(httpd)をインストールして、起動する
    ```terminal
    $ sudo yum -y update
    $ sudo yum install emacs
    $ sudo yum install emacs-nox //上記でインストールできなかった場合
    $ sudo yum -y install httpd
    $ httpd -v
    $ sudo systemctl start httpd && sudo systemctl enable httpd
    $ sudo systemctl is-enabled httpd
    ```
1. ブラウザのURL欄にドメイン(httpで)を打ち込み、Apatchのテストページが表示されるか確認する
1. ローカルで開発したHTML/cssなどをscpでサーバーに転送する
    ```terminal
    scp -i "mykeypair.pem"  -r .\folder  ec2-user@ec2-***********.compute-1.amazonaws.com:folder
    ```
1. サーバーで公開フォルダへ移動する
    ```
    sudo mv ./folder/* /var/www/html/
    ```
1. ブラウザで閲覧可能か確認する
    http://sample0123456789.com/index.html

#### 4. HTTPSを有効化する
下記公式サイトを参照して行う。
HTTPSはSSL(Secure Sockets Layer)／TLS(Transport Layer Security)のプロトコルを使った暗号化通信を行い、セキュアな通信を可能にする。

https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/SSL-on-amazon-linux-2.html

1. OpenSSLとmod_sslをインストールする
    ```
    $ sudo yum install openssl
    $ sudo yum install mod_ssl
    ```
    これでmod_ssl の設定ファイルが/etc/httpd/conf.d/ssl.confに、サーバーホスト用の自己署名 X.509 証明書とプライベートキーを生成するためのスクリプトが/etc/pki/tls/certs/make-dummy-certに作成された
1. テスト用に自己署名のダミー証明書とキーを生成するためのスクリプトを実行する
    ```
    cd /etc/pki/tls/certs
    sudo ./make-dummy-cert localhost.crt
    ```
    /etc/pki/tls/certs/ ディレクトリに新しいファイル localhost.crt が生成される
1. /etc/httpd/conf.d/ssl.conf ファイルを開き、次の行をコメントアウトする
    ```
    sudo emacs /etc/httpd/conf.d/ssl.conf
    # SSLCertificateKeyFile /etc/pki/tls/private/localhost.key
    ```
1. Apacheサーバーをリスタートする
    ```
    sudo systemctl restart httpd
    ```
1.　ブラウザでhttps://+ドメインで開く。
    信頼されていない自己署名ホスト証明書を使用してサイトに接続しようとしているため、ブラウザには一連のセキュリティ警告が表示される


### 5. 認証局CA(Certificate Authority)の署名証明書を取得する
認証局CAとは、信頼できる証明書を発行する組織のことである。

1. /etc/pki/tls/private/ に移動する
1.  新しいプライベートキーを生成する
    ```
    $ sudo openssl genrsa -out custom.key
    ```
1. 新しいプライベートキーに、制限の厳しい所有権とアクセス権を設定する
    ```
    $ sudo chown root:root custom.key
    $ sudo chmod 600 custom.key
    $ ls -al custom.key
    ```
1. CSR(Certificate Signing Request:証明書署名要求) を作成する。
    ```
    $ sudo openssl req -new -key custom.key -out csr.pem
    ```
1. CAにCSRを送信する。今回はCAとして、無料の認証局であるIdenTrust 社の[Let’s Encrpyt](https://letsencrypt.org/ja/)を使う。
    ```
    $ sudo amazon-linux-extras install epel
    $ sudo yum install certbot
    一回、Apacheサーバーを止めて
    $ sudo systemctl stop httpd
    最新版の証明書の作成
    $ sudo certbot certonly --standalone -d example.com
    >>Enter email address
    >> (Enter 'c' to cancel):********@gmail.com
    >>(Y)es/(N)o: Y
    >>IMPORTANT NOTES:
    >> - Congratulations! Your certificate and chain have been saved at:
    >>   /etc/letsencrypt/live/sample12094713568723.com/fullchain.pem
    >>   Your key file has been saved at:
    >>   /etc/letsencrypt/live/sample12094713568723.com/privkey.pem
    >>   Your certificate will expire on 2023-04-07. To obtain a new or
    >>   tweaked version of this certificate in the future, simply run
    >>   certbot again. To non-interactively renew *all* of your
    >>   certificates, run "certbot renew"
    >> - If you like Certbot, please consider supporting our work by:
    >>
    >>  Donating to ISRG / Let's Encrypt:   https://letsencrypt.org/donate
    >>   Donating to EFF:                    https://eff.org/donate-le
    ```
1. 正常に終了すると、/etc/letsencrypt/live 以下に最新版の証明書へのシンボリックリンクが作成されるので、/etc/pki/tls/certsにコピーしておく
    ```
    $ sudo ls /etc/letsencrypt/live/example.com/
    $ sudo cp -LR /etc/letsencrypt/live/example.com /etc/pki/tls/certs/
    $ sudo cp /etc/pki/tls/certs/example.com/* /etc/pki/tls/certs/
    ```
1. /etc/httpd/conf.d/ssl.confに以下のように設定する
    ```
    # SSLCertificateFile /etc/pki/tls/certs/localhost.crt 
    SSLCertificateFile /etc/pki/tls/certs/cert.pem
    # SSLCertificateKeyFile /etc/pki/tls/private/localhost.key 
    SSLCertificateKeyFile /etc/pki/tls/certs/privkey.pem
    # SSLCertificateChainFile /etc/pki/tls/certs/server-chain.crt 
    SSLCertificateChainFile /etc/pki/tls/certs/chain.pem
    ```
1. Apatcheを再起動する
    ```
    $ sudo systemctl start httpd
    ```
1. ブラウザでhttps:// でアクセス可能か確認する。セキュリティ警告が表示されなかったら成功。
    ```
    https://example.com/
    ```
1. 証明書は 3 ヶ月で有効期限が切れるので、以下コマンドを定期実行して更新する。
    crontab -eはviと同じ操作。
    ```
    $ sudo certbot renew --pre-hook "systemctl stop httpd" --post-hook "systemctl start httpd"
    $ crontab -e / sudo crontab -u root -e
    PATH=/sbin:/bin:/usr/sbin:/usr/bin
    * * 01 * * sudo certbot renew --pre-hook "sudo systemctl stop httpd" --post-hook "sudo systemctl start httpd"
    00 04 01 * * certbot renew --pre-hook "sudo systemctl stop httpd" --post-hook "sudo systemctl start httpd" // 毎月1日の4:00に実行
    //次の更新はいつなのか確認できる
    $ sudo certbot certificates 
    //証明書の削除
    $ sudo certbot revoke --cert-path  /etc/letsencrypt/live/sample12094713568723.com/cert.pem
    ```
ここまでの構成図
![Frontend2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483556/47e3e944-8586-d18c-bbae-9b65d8c92a8f.jpeg)


### バックエンド構築
#### 1. ローカルでwebアプリを開発する

今回はブラウザから渡された値をDynamoDBへ追加していくWebアプリを作る。
まずはDynamoDBを作成する。

1. [Amazon DynamoDB コンソール](https://console.aws.amazon.com/dynamodb/home)にログインする
1. 「テーブルの作成」を押す
1. テーブル名にHelloWorldDatabase、パーティションキーにIDと入力する
    ![DynamoDB2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483556/48c1ce52-74f1-3a27-86a5-593190f6eabf.png)
1. テーブルの作成を押す
1. HelloWorldDatabaseの設定画面で、追加情報を押し、Amazon リソースネーム (ARN)をコピーしておく
    ![DynamoDB3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483556/6e86ef9b-152f-9be4-a6ea-fb8629caa1f8.png)
1. 次に、以下のようにDynamoDBのテーブルへ名前と時間をJSON形式で送り、追記するPythonコードを書く。
```Python:lambda_function.py
# import the json utility package since we will be working with a JSON object
import json
# import the AWS SDK (for Python the package name is boto3)
import boto3
# import two packages to help us with dates and date formatting
from time import gmtime, strftime

# create a DynamoDB object using the AWS SDK
dynamodb = boto3.resource('dynamodb')
# use the DynamoDB object to select our table
table = dynamodb.Table('HelloWorldDatabase')
# store the current time in a human readable format in a variable
now = strftime("%a, %d %b %Y %H:%M:%S +0000", gmtime())

# extract values from the event object we got from the Lambda service and store in a variable
name = 'MyName'

def lambda_function(event):
    # write name and time to the DynamoDB table using the object we instantiated and save response in a variable
    response = table.put_item(
        Item={
            'ID': name,
            'LatestGreetingTime':now
            })
    # return a properly formatted JSON object
    return {
        'statusCode': 200,
        'body': json.dumps('Hello from Lambda, ' + name)
    }

print(lambda_function(name))
```

ローカル環境で実行すると、DynamoDBへMynameと実行時の時間が追記される。
![DynamoDB6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483556/e0cc85ef-fe78-d1b1-2dde-437c742bb302.png)


#### 2. AWS Lambdaへ移管する

1. [AWS Lambda コンソール](https://ap-northeast-1.console.aws.amazon.com/lambda/home?region=ap-northeast-1#)にログインする
1. 関数の作成を押す
1. 関数名をHelloWorldFunction、ランタイムにPython 3.9を選択する
1. 関数の作成を押す
1. 設定タブ->アクセス権限->実行ロールのURLを押す
    ![Lambda2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483556/58a1c60e-2ee2-e80e-0dc8-383d00dbc080.png)
1. IAMのロール画面に遷移する
1. 許可タブの許可を追加で、インラインポリシーの作成を押す
    ![IAM2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483556/5430234a-0a2b-c948-8f86-ac335cb58b39.png)
1. JSONタブをクリックし、以下を入力する。
    ※YOUR-TABLE-ARNは、DynamoDBのリソースフィールドのテーブルの ARN を置き換える
    ```JSON
    {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": [
                "dynamodb:PutItem",
                "dynamodb:DeleteItem",
                "dynamodb:GetItem",
                "dynamodb:Scan",
                "dynamodb:Query",
                "dynamodb:UpdateItem"
            ],
            "Resource": "YOUR-TABLE-ARN"
        }
        ]
    }
    ```
1. 名前にHelloWorldDynamoPolicyを入れ、ポリシーの作成を押す
1. Lambda関数のコンソール画面に戻る
1. 関数のコードを以下に置き換える
    ```Python
    # import the json utility package since we will be working with a JSON object
    import json
    # import the AWS SDK (for Python the package name is boto3)
    import boto3
    # import two packages to help us with dates and date formatting
    from time import gmtime, strftime
    
    # create a DynamoDB object using the AWS SDK
    dynamodb = boto3.resource('dynamodb')
    # use the DynamoDB object to select our table
    table = dynamodb.Table('HelloWorldDatabase')
    # store the current time in a human readable format in a variable
    now = strftime("%a, %d %b %Y %H:%M:%S +0000", gmtime())
    
    # define the handler function that the Lambda service will use as an entry point
    def lambda_handler(event, context):
    # extract values from the event object we got from the Lambda service and store in a variable
        name = event['firstName'] +' '+ event['lastName']
    # write name and time to the DynamoDB table using the object we instantiated and save response in a variable
        response = table.put_item(
            Item={
                'ID': name,
                'LatestGreetingTime':now
                })
    # return a properly formatted JSON object
        return {
            'statusCode': 200,
            'body': json.dumps('Hello from Lambda, ' + name)
        }
    ```
1. Deployを押す
1. Testを押す
1. イベント名にHelloWorldTestEventを入れる
1. イベントJSONを以下に置き換える
    ```JSON
    {
    "firstName": "Ada",
    "lastName": "Lovelace"
    }
     ```
1. テストタブへ行き、右上のテストを押す
1. 実行結果：成功が出て、"\"Hello from Lambda, Ada Lovelace\""が出れば成功

#### 3. AWS API gatewayでWebアプリのURLを作成する

1. [API Gateway Console](https://console.aws.amazon.com/apigateway/main/) にログインする
1. REST APIで構築を押す
1. プロトコルの選択でREST、新しいAPIの作成で新しいAPIを選択する
1. API名をHelloWorldAPIを入れ、エンドポイントタイプにエッジ最適化を選択する
   ![APIgateway2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483556/6d7c6098-c2f3-5fe6-6a38-db1d185d7d3a.png)
1. API の作成を押す
1. アクション->メソッドの作成->POST->横のチェックを押す
    ![apigateway3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483556/0db22868-96e4-c7a4-6b98-c9759af67eb8.png)
1. 統合タイプにLambda 関数、Lambda 関数にarn:aws:lambda:us-east-1:*****:function:HelloWorldFunctionを入れて、保存を押す
1. アクション->CORS を有効にするを押す
    ![APIgateway4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483556/a30a468f-45d5-5c12-21b7-b3825c6d1b7d.png)
1. POSTチェックボックスを選択して、CORS を有効にして既存の CORS ヘッダーを置換を押す
1. アクション->APIをデプロイを押す
1. デプロイされるステージで新しいステージを押し、ステージ名にdevを入れ、デプロイを押す
    ![APigateway5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483556/161b0fd3-294d-5353-d33e-ab65c39b531d.png)
1. URL の呼び出しのURLを控えておく
    ![APIgateway6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483556/a75fa71d-988b-1a2a-c296-23a48abef543.png)
1. リソース->POST->小さな青い稲妻のテストを押す
1. 下記のJSONを入力し、テストを押す
    ```JSON
    {
        "firstName":"Grace",
        "lastName":"Hopper"
    }
    ```
1. bodyに "\"Hello from Lambda, Grace Hopper\"が返ってきていれば成功

## Webサイトに実装する
#### 1. WebページにWebアプリのURLを埋め込み、ブラウザで実行してテストする

1. First NameとLast Nameを入力して、Call APIでLambdaを呼び出す
    ![画面html1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483556/dd48ccc2-5264-0298-8a82-2a282dbf8ee7.png)
1. するとDynamoDBのテーブル->テーブルアイテムの探索で、下部に呼び出した人の名前と時間が入力されていれば成功！

## セキュリティレベルを上げる
### AWS WAFを設定する

1. [API Gateway Console](https://console.aws.amazon.com/apigateway/main/) にログインする
1. 作成したAPIGatewayをクリックする
1. 画面左欄の「ステージ」をクリックする
1. ステージ名(dev)をクリックする
1. 設定タブのウェブアプリケーションファイアウォール (WAF)の ウェブ ACL を作成するを押す
    ![APIgateway7.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483556/d39186f3-2f42-3399-18f4-092e00ba0d2e.png)
1. NameにHelloWorldWAFを入れ、Regionに作成したAPIGatewayと同じリージョンを選択する
1. Add AWS resourcesで、Amazon API Gatewayから作成したAPIGatewayにチェックを入れ、Addを押す
    ![WAF3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483556/33a2e8aa-36b5-7b20-9ad8-654f62d42e51.png)
1. Nextを押す
1. Add rulesからAdd managed rule groupを押す
    ![WAFrule1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483556/15ccedf0-0e05-e578-afbe-dae29f69d546.png)
1. AWS managed rule groupsから「Core rule set」のAdd to web ACLにチェックを入れる
    ![WAFrule2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483556/18a84efd-9555-b360-f0d9-ed1c9ff7b9d1.png)
1. Add rulesを押す
1. Nextを押す
1. Nextを押す
1. Nextを押す
1. Create web ACLを押す
1. APIGatewayのステージ名(dev)の設定タブ画面に戻り、ウェブ ACLをありにして、作成したWAFを選択する

## Apacheの設定
Apacheの設定は、管理者権限を持つ場合、/etc/httpd/conf/httpd.confで設定し、それ以外のユーザーは各ディレクトリに.htaccessを設置し、そのディレクトリ下位に適応する。

Apacheの/(root)ディレクトリは、/etc/httpdでパスの最後にスラッシュ/を付けてはいけない。

```conf
Webサーバーとして80番ポートで処理をします。
Listen 80
デフォルトの文字コードを「UTF-8」に設定します。
AddDefaultCharset UTF-8

設定ファイルの場所と形式を設定します。「/etc/httpd/conf.d」ディレクトリ配下にある .confファイルは
すべて設定ファイルになります。
IncludeOptional conf.d/*.conf
クライアントにファイルを送る時に sendfile を使うかどうかを設定します。onは使います。
EnableSendfile on
```

```
動的モジュールを使用したい場合は、/etc/httpd/conf.modules.dディレクトリに記述する。
Include conf.modules.d/*.conf
```

```
Apacheを他のアカウントやグループで動かしたい場合は、ここを変更する。
Group apache
User apache　
```

```
このWebサーバーの管理者のメールアドレスを記述します。
ServerAdmin root@localhost
Webサーバーとして公開するホスト名を指定します。ホスト名は FQDN(Fully Qualified Domain Name) で記述します。
ServerName www.example.com:80
```

```
<Directory /> は、/(root)ディレクトリ配下に関しての設定しますよという意味です。AllowOverride none　← AllowOverride は 上位のディレクトリ（この場合は/(root)ディレクトリ）でした設定を下位のディレクトリで設定を上書きできるかどうか（オーバーライドできるかどうか）を設定します。

DocumentRoot "/var/www/html"　は、Webサーバーのトップディレクトリです。例えば「/var/www/html」ディレクトリ配下に「index.html」ファイルを置いた場合、「http://xxx-xxxx-xxxx.vs.sakura.ne.jp/index.html」でアクセスすることができます。

/var/wwwディレクトリ配下へのアクセス制御に関する設定です。
<Directory "/var/www/html">
    このディレクトリ(/var/www/html)配下に「.htaccess」ファイルを作成した場合、上書きするか
    AllowOverride None
    /var/wwwディレクト配下へのアクセスは全員が可能です。つまり、Webサイトを閲覧することができます。
    Require all granted
    シンボリックリンクをたどれるようにします。
    Options Indexes FollowSymLinks
</Directory>
```

```
<IfModule dir_module>← IfModule は条件分岐です。「IfModule dir_module」は、「もし dir_module が組み込まれている場合」という意味です。
    DirectoryIndex index.html　← DirectoryIndex とは一言で言うと、ディレクトリのインデックス一覧です。そのままの意味なのですが、ここでの意味は「もしindex.htmlファイルがあれば表示するよ。もしindex.htmlファイルがなければ、ディレクトリの一覧を表示するよ」という意味です。たまにサイトにアクセスしたときにリンクの設定が間違えていて、ファイルが全部見えてしまうことがありますが、その状態になるということです。（セキュリティ的によくありません）
</IfModule>
```

```
もしディレクトリに「.htaccess」ファイルや「.htpasswd」ファイルがあった場合、
ユーザーに表示するかどうかを設定しています。
もちろん「Require all denied」で表示させないように設定しています。
<Files ".ht*">
    Require all denied
</Files>
```

```
【例】http://sample.ne.jpの場合、「/var/www/cgi-bin/」ディレクトリを「http://sample.ne.jp/cgi-bin」
に割り当てます。つまりどのディレクトリを「cgi-bin」に割り当てるのか設定します。
<IfModule alias_module>
    ScriptAlias /cgi-bin/ "/var/www/cgi-bin/"
</IfModule>

cgi-binディレクトリの動作について設定します。
<Directory "/var/www/cgi-bin">
    AllowOverride None
    Options None　← オプションは何もありません。
    Require all granted
</Directory>
```

https://httpd.apache.org/docs/current/ 

ReactのようなSPAでは、クライアント上でreact-routerにより仮想DOMに遷移するので、サーバの方でルーティングされず、404 Errorになる。以下の手順でURL直打ちでも特定のページが開くようにする必要がある。

1. 対象のフォルダに以下の隠しファイルを作成する
```.htaccess
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
```
1. /etc/httpd/conf/httpd.confで親フォルダで設定した内容を子フォルダで上書きできるようにする
```
<Directory "/var/www/html">
AllowOverride All <- ここをNoneからAllにする
</Directory>
```

## 最終的な構成図

![Frontend3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483556/26fd267e-f501-e5ae-79bb-7b7e27dbdfae.jpeg)

## EC2のEBS容量の増やし方
EBSの容量はEC2の起動中でも変更できる。ただ処理中のジョブを保証するものではないので、ボリュームのスナップショットを作成していく方がよい

1. コンソールでEBSの容量を増やす
1. 下記コマンドでEC2のファイルシステムのパーティションを変更する
```
sudo lsblk
sudo growpart /dev/nvme0n1 1
sudo xfs_growfs -d
sudo resize2fs /dev/nvme0n1p1
```

https://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/recognize-expanded-volume-linux.html

## まとめ
AWSのサービスを用いて、動的Webサイトを構築した。

### 参考サイト

https://product.st.inc/entry/2020/12/13/091052