1. Backend:Expressのルート設定確認


確認事項としては下記 ・app.jsのAPI設定の確認 ・ALBのDNS確認 ・React側のAPI設定が.envでしっかり分けられている設計になっているか

1-1. app.jsのAPI設定の確認

1-1-1. app.useでAPI指定→細かなリクエスト部分はroutesで分けているため、backend側は特に問題なし

image.png


1-2. ALBのDNS確認

AWSログイン > EC2 > ロードバランサー > ALB > DNS名をコピーする


1-3. React側のAPI設定が.envでしっかり分けられている設計になっているか

1-3-1. ”fetch”と”axios”をgrepで検索、ログを.txtに転記してlog/に保存する

</> Bash
# logフォルダ作成
mkdir -p /mnt/c/Projects/log

# fetch & axiosをまとめて検索し、.txtへ転記
{
  echo "===== FETCH ====="
  grep -R "fetch" frontend/ \
    --exclude-dir=node_modules \
    --exclude=package.json \
    --exclude=package-lock.json

  echo
  echo "===== AXIOS ====="
  grep -R "axios" frontend/ \
    --exclude-dir=node_modules \
    --exclude=package.json \
    --exclude=package-lock.json
} > /mnt/c/Projects/log/api_search_result.txt

1-3-2. 対象を絞るため、API_URLで検索→env定義をみつけたらそれも検索(使用箇所を特定するため)

</> Bash
# 対象を検索し、.txtへ転記
{
  echo "===== API_URL ====="
  grep -R "API_URL" frontend/src

  echo
  echo "===== REACT_APP ====="
  grep -R "REACT_APP" frontend/src
} > /mnt/c/Projects/log/env_check.txt

1-3-3. 内容確認した感じ、.envを変更するだけで問題なさそうだったので.env.productionの変数を定義し、ALB_URLを設定する。


1-4. BackendのCORS設定確認

1-4-1. Reactの本番URLから、Cookie付きAPI通信を許可する設定になっているかを確認する