[ecs,laravel,nginx]ローカルではnginx経由でlaravelの画面が出るように設定できているのになぜかecsでうまくいかなかった話

はじめに

今回の内容は技術的な話というよりはこんなことが原因でうまくいかなかったりしたよという内容になっており、記事の肝は原因発見に至る思考部分になっています。
そのため今すぐ答えが欲しい方には向いていない内容になっていますので、あらかじめご了承くださいm(_ _)m

どんな画面がでた？

パブリックIPに接続した時の画面

Laravelの画面が出てない。。。

cloudwatch

エラーログ吐いてない。。。

原因発見までの思考

nginxは起動してるし、そもそもローカルでは動いてた。

ということは、ローカルと本番環境で違う下記のファイルを調べれば良いのかなぁ。

• docker-compose.ymlとecs-task-definition-for-web.json(タスク定義のjsonファイル)

• nginx/default.conf(ローカル)とnginx/ecs/conf.d/default.conf（本番）

とりあえずわかりやすい方からということでnginx/ecs/conf.d/default.conf（本番）の内容をnginx/default.conf(ローカル)に貼り付けてローカルで動くか試してみよう。

ん？動かない？あ、ターミナルで500エラーが出てる。。。

じゃあnginx/ecs/conf.d/default.conf（本番）が悪いんだ！

原因

さっそくnginx/ecs/conf.d/default.conf（本番）ファイルを見たところ、ミスタッチで変な改行が入っていた。

nginx/ecs/conf.d/default.conf（本番）

upstream php-fpm {
  server localhost:9000;
}

server {
  listen 80;
  server_name localhost; 
  root /var/www/html/public;

  add_header X-Frame-Options "SAMEORIGIN"; 
  add_header X-XSS-Protection "1; mode=block"; 
  add_header X-Content-Type-Options "nosniff";
  
  index index.php;
  
  charset utf-8;
  
  location / {
    try_files $uri $uri/ /index.php?$query_string;
  }

  location = /favicon.ico { 
    access_log off; log_not_found off;
  }

  location = /robots.txt { 
    access_log off; log_not_found off;
  }

  error_page 404 /index.php;
  
  location ~ \.php$ {
    fastcgi_pass php-fpm;
    fastcgi_index index.php;

# ↓の記述で変な改行をしてしまっていた
    fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_scr
ipt_name;
    include fastcgi_params;
  }

  location ~ /\.(?!well-known).* {
    deny all; 
  }
}

解決策

不要の改行を削除して成功！...とはいかなかった。
なぜなら修正内容を本番をに反映させなければならないからだ。
なので、下記の７つの手順を経ることで解決まで至ることができた。

1. ファイルの修正（改行削除）
2. ローカルでイメージ作成（docker-compose build）
3. ecr用にタグ付きimageを作成（docker tag nginx:latest xxxxxxxxx.dkr.ecr.ap-northeast-1.amazonaws.com/nginx:latest）
4. ecrにログイン（aws ecr get-login-password | docker login --username AWS --password-stdin https://xxxxxxx.dkr.ecr.ap-northeast-1.amazonaws.com）
5. ecrにプッシュ（docker push xxxxxxxxx.dkr.ecr.ap-northeast-1.amazonaws.com/nginx:latest）
6. タスク定義の更新（忘れがち。筆者もファイル修正後に見落としてつまづいた手順。コマンドはaws ecs register-task-definition --cli-input-json file://ecs-task-definition-for-web.json）
7. サービスの作成（下記のコマンド。インフラ構築全ての組み合わせコマンドなのでさすがに長い）

aws ecs create-service \
--cluster xxxx-ecs --service-name xxxx-service --task-definition xxxx-for-web:2 --launch-type "FARGATE" \
--load-balancers '[{"containerName":"nginx","containerPort":80,"targetGroupArn":"arn:aws:elasticloadbalancing:ap-northeast-1:xxxxxxxx:targetgroup/xxxx-targetgroup/6918a2b6af9b9004"}]' \
--desired-count 2 \
--network-configuration "awsvpcConfiguration={subnets=[subnet-xxxxxxx,subnet-xxxxxxxx],securityGroups=[sg-xxxxxxxxx],assignPublicIp=ENABLED}"

解決後の画面

ちゃんとlarabelの文字を拝むことができた。ここまで長かった。。。