To send php mail from React with nginx, AWS - php

Question

You are using the nginx web server
React is trying to use the php mail function.
However, I don't know how to set it up on the web server.
I am using AWS es2 and I am using ubuntu 20.04 version.
Here's how we've done it so far.
I installed the first php8.1, php pfm8.1.
I installed postfix twice.
But I don't know which of these two ways is right.
Is it right to install and use php on the server?
I don't know if it's right to use postfix.
I want to implement the function of sending mail to my mailbox after writing it.
React Code
function Contact() {
const [textarea, setTextarea] = useState<textAreaType>({
message: ''
});
const [inputs, setInputs] = useState<inputTypes>({
company: '',
number: '',
email: '',
name: '',
phone: '',
})
const { company, number, email, name, phone } = inputs
const { message } = textarea
const onChangeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
const { value, name } = e.target;
setInputs({
...inputs, // 기존의 input 객체를 복사한 뒤
[name]: value // name 키를 가진 값을 value 로 설정
});
};
const onChangeTextarea = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
const { value, name } = e.target
setTextarea({
...textarea,
[name]: value
});
};
function handleFormSubmit(event: React.FormEvent) {
// 언제나 HTMLInputElement 가 반환된다는 것을 알려줌. (타입 단언)
const email_Input = (document.getElementById('email') as HTMLInputElement).value
const name_Input = (document.getElementById('name') as HTMLInputElement).value
const phone_Input = (document.getElementById('phone') as HTMLInputElement).value
if (email_Input.length === 0) {
alert('이메일을 입력해주세요.')
} else if (name_Input.length === 0) {
alert('담당자 이름을 입력해주세요.')
} else if (phone_Input.length === 0) {
alert('담당자 전화번호를 입력해주세요.')
} else {
axios({
method: 'post',
url: `${API_PATH}`,
headers: { 'content-type': 'application/json' },
data: { ...inputs, ...textarea }
}).then(res => {
if (res.status === 200) {
alert('메일을 전송하였습니다. 홈으로 이동합니다.')
window.location.pathname = '/'
} else {
alert("메일전송에 실패하였습니다.")
}
}).catch(error => console.error(error));
event.preventDefault()
}
};
const API_PATH: string = 'http://XXXX.com/index.php'
PHP
<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
header("Access-Control-Allow-Headers: X-PINGOTHER, Content-Type, Authorization");
header("Access-Control-Max-Age: 86400");
$rest_json = file_get_contents("php://input");
$_POST = json_decode($rest_json, true);
// company - 회사명
// number - 회사번호
// email - 이메일
// name - 담당자 명
// phone - 담당자 전화번호
// message - 메세지
$to = "XXXX#XXXX.com";
$subject = "Grigom_Pictures CONTACT MAIL - ".$_POST['company'];
$contents= nl2br(
"회사명 : ".$_POST['company']."\n".
"회사번호 : ".$_POST['number']."\n".
"이메일 : ".$_POST['email']."\n".
"담당자 명 : ".$_POST['name']."\n".
"담당자 전화번호 : ".$_POST['phone']."\n".
"내용 : ".$_POST['message']."\n"
);
$headers = implode("\r\n", [
//"From:" . $_POST['email'] . "",
"From: grigompictures.com",
'MIME-Version: 1.0',
'Content-Type: text/html; charset=UTF-8',
'X-Mailer: PHP/' . PHP_VERSION
]);
mail($to, $subject, $contents, $headers);
?>