aws 배포 실패

[정중식]

이런 화면인데요 왜 실패했는지 잘 모르겠습니다.

vercel에도 배포를 해봤는데

Comment.js 모듈을 찾을 수 없다고하네요 혹시 제가 뭘 잘못한걸까요?


/app/detail/[id]/page.js

// dynamic route
// (props)=>{}; 하고,
// console.log(props); 해주면 유저가 다이나믹라우터 자리에입력한 값이 콘솔에뜸
// 다이나믹라우터란?${id}를뜻함 전체에시=> localhost:3000:/detail/${id}
import { connectDB } from '@/util/database';
import { ObjectId } from 'mongodb';
import Link from 'next/link';
import Comment from './Comment';
import PostLike from '../../../component/PostLike';
import { getServerSession } from 'next-auth';
import { authOptions } from '@/pages/api/auth/[...nextauth]';
import { notFound } from 'next/navigation';

const Detail = async (props) => {
  const session = await getServerSession(authOptions);

  let client = await connectDB;
  const db = client.db('forum');

  let result = await db
    .collection('post')
    .findOne({ _id: new ObjectId(props.params.id) });

  let postLike = await db
    .collection('postLike')
    .find({ postId: new ObjectId(props.params.id) })
    .toArray();

  if (result === null) {
    return notFound();
  }

  return (
    <div className='container'>
      <h4 className='title mt-2 mb-3 '>상세페이지</h4>

      {result && (
        <div className='list'>
          <div className='list-item'>
            {session && (
              <div className='emoticon-box'>
                <Link href={`/edit/${result._id}`}>✏️</Link>❌
              </div>
            )}

            <h4>
              <span>{result.title}</span>
            </h4>

            <span className='post-like-count'> ･ {postLike.length}</span>
            <p>{result.contents}</p>

            <PostLike postId={props.params.id} session={session} />

            <Comment postId={result._id.toString()} />
          </div>
        </div>
      )}
    </div>
  );
};

export default Detail;

Comment.js입니다

'use client';

import { useEffect, useState } from 'react';

const Comment = ({ postId }) => {
  const [comment, setComment] = useState('');
  const [commentList, setCommentList] = useState([]);
  const [isComment, setIsComment] = useState(false);
  const [loading, setLoading] = useState(false);

  const onChangeCommentInput = (e) => {
    setComment(e.target.value);
  };

  const onSubmit = () => {
    fetch('/api/comment/new', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        comment,
        postId,
      }),
    }).then((data) => {
      if (data.status === 200) {
        setIsComment((prev) => !prev);
        setComment('');
      }
    });
  };

  useEffect(() => {
    setLoading(true);
    fetch(`/api/comment/list?id=${postId}`)
      .then((response) => response.json())
      .then((data) => {
        setLoading(false);
        setCommentList(data);
      });
  }, [isComment]);

  return (
    <div className='comment-wrap'>
      <div style={{ marginBottom: '.5rem' }}>댓글 목록</div>

      {loading ? (
        <div className='loading'>Loading...</div>
      ) : (
        <>
          {commentList &&
            commentList.map((data) => (
              <div key={data._id} className='comment-list'>
                <p className='comment-item'>
                  {data.content} &nbsp; by- &nbsp;
                  <span className='comment-name'>{data.authorName}</span>
                </p>
              </div>
            ))}
        </>
      )}

      <div className='comment-input-wrap'>
        <input
          type='text'
          value={comment}
          onChange={(e) => onChangeCommentInput(e)}
          className='comment-input'
        />
        <button onClick={onSubmit} style={{ width: '25%' }}>
          댓글작성
        </button>
      </div>
    </div>
  );
};

export default Comment;

[codingapple]

IAM 검색 - 역할 들어가서 https://stackoverflow.com/a/72682542 이런거 해봅시다 
Comment.js 파일 경로가 잘못된게 아닐까요

[정중식]

선생님 여기서 코드업로드 저거 선택해서 제 프로젝트 압축한거 올리면되는거맞을까요?

[정중식]

강의 글과는 좀 다르더라구요 이런식으로했는데 설정 맞게한걸까요..
aws는 요금폭탄맞을까봐 뭔가 조심스럽네요


이번엔 다른 오류를 마주쳤습니다. 제가 잘못만진게 분명하긴한데 어렵네요..

[codingapple]

package.json파일 빼고 올렸다는거같습니다 로그메뉴에서 에러메세지 출력해볼 수 있습니다

[정중식]

오 쌤 제가 압축을 잘못했었나봐요. 
압축 하고 하니까 이번엔 에러메시지가 바뀌었고 사이트 들어가보면 502 Bad Gateway 라는 문구가 나오네요


이 에러문구는 제가 I am 역할설정을 잘못해준건가요?

[codingapple]

그럴수도 있습니다 어떻게 설정했습니까

[정중식]

I AM 사용자 역할에 AWSServiceRoleForElasticBeanstalk 설정이 되어있는게 기본적으로있어서 그걸 사용햇습니다.
사진처럼요. 
사진은 앱만들고, 환경구성하는 단계중 서비스 액세스 구성 단계입니다.
유튜브도 뒤져보고 했는데 유튜브와 강사님 화면구성이 제 화면구성과 달라서 헤매고있네요..

근데 EC2  인스턴스 프로파일이 비어있어요 눌러보면 뭐 아무것도 없습니다.

혹시 여기를 설정해줘야하나요?

추가로 제 I am 사용자 역할은 이런식으로 해줘있습니다.



맞게 한걸까요?


++++ 추가

The instance profile aws-elasticbeanstalk-ec2-role associated with the environment does not exist.
라는 오류가 계속뜨는데..  제 역할은 아래 사진과 같습니다.



여기서 aws-elasticbeanstalk-ec2-role라는 이름이 없어서 그런걸까요?
jung 역할 권한은 다음과같이 수정해줬습니다.

[codingapple]

https://codingapple.com/forums/topic/aws-%eb%b0%b0%ed%8f%ac-%eb%ac%b8%ec%a0%9c/
여기처럼 역할2개랑 권한 똑같이 설정해봅시다

[글쓴이]

글