EC2インスタンスを立てて、web to caseを検証してみる

概要

• Web to Caseを検証する必要があるので、せっかくだからEC2を立てて検証してみる
• そもそもEC2立ててやる必要ないだろうという声もあるのですが、IacやSalesforceなどの複数の技術領域を掛け合わせて実現するという目標でやってみたいと思いました。

やること

• Terraform でネットワークの設定含めてEC2周りをセットアップする
• SFDC Developer Edition を取得する
• recaptcha設定
• Web to Case 設定及び HTML を生成
• EC2 に生成した HTMLを配置
• ルーティングの設定
• 動作検証

最終的な構成は下記の通りとなる

Terraform でネットワークの設定含めてEC2周りをセットアップする

• ソースコード参照
  • https://github.com/Kyohei-takiyama/ec2-web-to-case/tree/main
• 構成図の紫色枠部分を作成する
• ポイント
  • HTMLを配信する用のWebサーバーはApacheを使用
    • Terraform内でApacheのインストールと起動を実行

recaptcha設定

• 下記URLから遷移し、サイト内に記載された手順に従って必要な情報を取得する
• 最後にサイトキーとシークレットキーが提示されるので控えておく。後のWeb to Caseの設定時に使用する
  • https://www.google.com/recaptcha/admin/create

Web to Case 設定及び HTML を生成

• 生成されたHTMLをindex.htmlを保存する。
  

EC2 に生成した HTMLを配置

• EC2にログイン

  # 権限を適切化
  chmod 400 web-to-case-key.pem
  ssh -i {作成したキーペア].pem ec2-user@{パブリックIPv4アドレス}
  

• scpコマンドで生成したHTMLを格納する

  # 格納するディレクトリは好きなもの->/var/www/html/{好きなもの}
  sudo scp -i {作成したキーペア].pem ~/yourhtmlpath/index.html ec2-user@{パブリックIPv4アドレス}:/var/www/html/contact
  

ルーティングの設定(EC2にログインして行う)

• httpd.confを編集する

  # Amazon Linux 2の場合
  sudo nano /etc/httpd/conf/httpd.conf
  

• httpd.confに下記を記載する

  /etc/httpd/conf/httpd.conf

  # 他の記述
  
  # URLパスをサーバー上のディレクトリにマッピング
  # ~/contact を /var/www/html/contact ディレクトリにマッピング
  Alias /contact /var/www/html/contact
  
  # 配置したHTMLを公開する設定
  <Directory /var/www/html/contact>
     Options Indexes FollowSymLinks
     AllowOverride None
     Require all granted
  </Directory>
  

• 設定後にApacheを再起動する

  sudo systemctl restart httpd
  

• /contactにフォームが表示された
  

動作検証

• recaptchaも問題なく動作した
• EC2から配信されたフォームを送信したところ問題なく作成された
  

まとめ

• 手間ではあるが、敢えていろいろな技術を織り交ぜてみると、なんか楽しいし、試さなければ気づけないものもあって良かったなと思いました。
• 無駄をもっと楽しんでいきたいと思いました。