สวัสดีครับ POP จากบริษัท Classmethod (Thailand) ครับ
ครั้งนี้จะมาแนะนำเกี่ยวกับวิธีการเพิ่มขนาดอัปโหลดไฟล์กรณีที่ใช้ PHP ใน Elastic Beanstalk เพื่อให้สามารถอัปโหลดไฟล์ตามขนาดที่ต้องการได้ใน Elastic Beanstalk
สิ่งที่ต้องมี
- มี Application และ Environment ใน Elastic Beanstalk แล้ว
ในบทความนี้ผมจะละเว้นการอธิบายในส่วนของการสร้าง Application และ Environment ใน Elastic Beanstalk
หากผู้อ่านต้องการเรียนรู้วิธีการเริ่มต้นใช้งาน Elastic Beanstalk ผมขอแนะนำให้อ่านบทความด้านล่างนี้ครับ
เตรียมไฟล์สำหรับ Deploy เพื่อใช้ตั้งค่าใน Elastic Beanstalk
ขั้นตอนการเตรียมไฟล์นี้เราสามารถสร้างไฟล์ที่จะใช้ Deploy ใน Notepad หรือ VSCode ก็ได้ ซึ่งในบทความนี้ผมจะสร้างไฟล์ในโปรแกรม VSCode ครับ
สำหรับผู้ใช้งานที่ยังไม่มีโปรแกรม VSCode สามารถดาวน์โหลดและติดตั้งตามตัวอย่างลิงก์ด้านล่างนี้ได้เลยครับ
เราจะมาทำการสร้างไฟล์เว็บไซต์ที่ใช้ทดสอบการอัปโหลดไฟล์ และสร้างไฟล์ที่ใช้ตั้งค่าเพิ่มขนาดการอัปโหลดไฟล์ให้กับเว็บไซต์ใน Nginx สำหรับ PHP ตามขนาดที่เราต้องการใน Elastic Beanstalk
ตัวอย่างนี้ผมต้องการอัปโหลดไฟล์ขนาดไม่เกิน 30M ก็จะตั้งค่าไว้ที่ 30M ครับ
- สร้างไฟล์เว็บไซต์ที่ใช้ทดสอบการอัปโหลดไฟล์ขนาดที่ต้องการ
- form.php
- upload.php
- สร้างไฟล์ที่ใช้ตั้งค่าเพิ่มขนาดการอัปโหลดไฟล์ขนาดที่ต้องการ
- .platform/nginx/conf.d/elasticbeanstalk/10_nginx_upload_file_size.conf
- .ebextensions/10_php_upload_file_size.config
ข้อควรระวัง: ถ้าชื่อโฟลเดอร์และไฟล์ผิด หรือ สร้างโฟลเดอร์และไฟล์ไม่ตรงตามตัวอย่างที่เขียนไว้ เมื่อ Deploy ไปยัง Elastic Beanstalk แล้ว ระบบจะไม่ปรับการตั้งค่าให้
ก่อนเริ่มทำการสร้างไฟล์ที่ใช้ Deploy ให้สร้างโฟลเดอร์ใน Windows เช่น โฟลเดอร์ชื่อ deploy เป็นต้น แล้วเปิดโปรแกรม VSCode ขึ้นมา แล้วคลิก Open Folder แล้วเลือกโฟลเดอร์ deploy ที่สร้างไว้เมื่อสักครู่นี้ จากนั้นเริ่มทำขั้นตอนถัดไปได้เลย (โฟลเดอร์ deploy เป็นแค่ตัวอย่างในบทความนี้เท่านั้น)
เกี่ยวกับรหัสฟีดบรรทัด (New Line) [ LF, CRLF ]
ก่อนที่จะทำการเตรียมไฟล์สำหรับ Deploy ให้ดูวิธีการเปลี่ยนประเภทไฟล์จาก CRLF ให้เป็น LF ตามลิงก์หัวข้อด้านล่างนี้
ดูตัวอย่างที่นี่เฉพาะหัวข้อนี้: เกี่ยวกับรหัสฟีดบรรทัด (New Line) [ LF, CRLF ]
สร้างไฟล์ form.php
ผมจะสร้างไฟล์ form.php ขึ้นมาเพื่อใช้ทดสอบการอัปโหลดไฟล์
สร้างไฟล์ form.php และคัดลอกโค้ดด้านล่างนี้วางลงในไฟล์
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
file: <br>
<input type="file" name="upfile" size="30"><br>
<br>
<input type="submit" value="Upload">
</form>
</body>
</html>
สร้างไฟล์ upload.php
ผมจะสร้างไฟล์ upload.php ขึ้นมาเพื่อใช้ทดสอบการอัปโหลดไฟล์โดยแสดงผลลัพธ์ของขนาดไฟล์ต่อจากหน้า form.php
สร้างไฟล์ upload.php และคัดลอกโค้ดด้านล่างนี้วางลงในไฟล์
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<p><?php
if (is_uploaded_file($_FILES["upfile"]["tmp_name"])) {
echo "file size =" . $_FILES["upfile"]["size"];
} else {
echo "error";
}
?></p>
</body>
</html>
เพิ่มขนาดการอัปโหลดไฟล์สำหรับ NGINX
ให้สร้างไฟล์ "10_nginx_upload_file_size.conf" ตาม path ด้านล่างนี้
Path: ".platform/nginx/conf.d/elasticbeanstalk/10_nginx_upload_file_size.conf"
แล้วคัดลอกโค้ดด้านล่างนี้วางในไฟล์ 10_nginx_upload_file_size.conf
client_max_body_size 30M;
client_body_buffer_size 30M;
เพิ่มขนาดการอัปโหลดไฟล์สำหรับ PHP
ต่อไปให้สร้างไฟล์ "10_php_upload_file_size.config" ตาม path ด้านล่างนี้
Path: ".ebextensions/10_php_upload_file_size.config"
แล้วคัดลอกโค้ดด้านล่างนี้วางในไฟล์ 10_php_upload_file_size.config
files:
"/etc/php.d/99uploadsize.ini":
mode: "000644"
owner: root
group: root
content: |
upload_max_filesize = 30M
post_max_size = 30M
commands:
remove_old_ini:
command: "rm -f /etc/php.d/99uploadsize.ini.bak"
Deploy Project
เมื่อเตรียมไฟล์เสร็จแล้วเราจะมีไฟล์ต่างๆ ในโฟลเดอร์ที่ชื่อว่า deploy ดังนี้
- โฟลเดอร์
deploy
- .ebextensions/10_php_upload_file_size.config
- .platform/nginx/conf.d/elasticbeanstalk/10_nginx_upload_file_size.conf
- form.php
- upload.php
เมื่อมีไฟล์ดังกล่าวแล้ว ให้เข้าไปที่โฟลเดอร์นั้น เช่น deploy และรวมไฟล์ทั้งหมดให้เป็นไฟล์ ZIP ดังนี้
เลือกไฟล์ → คลิกขวาที่ไฟล์ → Compress to ZIP file
กำหนดชื่อไฟล์ ZIP ตามต้องการ เช่น "date_time"
จากนั้น Upload ไฟล์ใน Application versions ใน Application ของเราดังนี้
- คลิก
Applicationsจากเมนูด้านซ้าย - คลิก
Application nameของเรา - คลิก
Application versionsใน "Application: Your Application name" ที่แสดงขึ้นมาในเมนูด้านซ้าย - คลิก
Uploadด้านขวา - เลือกไฟล์ (Choose file) ที่ต้องการ Upload และกำหนด Version label ใน POPUP "Upload application version"
- คลิก
Upload
※ตัวอย่าง Upload ไฟล์ ZIP ใน Application versions
・ดูที่หัวข้อ: Upload Application versions
เมื่อ Upload ไฟล์เสร็จแล้ว ให้ Deploy ไปยัง Environment ที่กำลังใช้งานอยู่ดังนี้
- เลือก
Version labelใน Application versions ที่ Upload ไฟล์เมื่อสักครู่ - คลิก
Actions - เลือก
Deploy - เลือก
Environmentที่กำลังใช้งานอยู่ตามต้องการ - คลิก
Deploy
※ตัวอย่าง Deploy ไปยัง Environment
・ดูที่หัวข้อ: Deploy ไปยัง Environment จาก Application versions
ตรวจสอบผลลัพธ์ Config ใน EC2 Instance
เราจะตรวจสอบผลลัพธ์ Config ใน EC2 Instance จาก Domain ของ Environment ใน Elastic Beanstalk
คลิกที่ Domain จากหน้า Environment ของเรา
[Environment Name].ap-southeast-1.elasticbeanstalk.com
แล้วจะแสดงหน้าจอ "403 Forbidden" แบบนี้
ต่อไปตรวจสอบหน้า form โดยพิมพ์ /form.php ต่อท้าย URL Environment แล้วลองอัปโหลดไฟล์ที่มีขนาดเกิน 30MB โดยสามารถดาวน์โหลด Simple file ได้จากเว็บไซต์ต่างๆ ตัวอย่างนี้จะใช้ไฟล์ขนาด 30.6MB (31,343KB)
แล้วจะแสดงหน้าจอ "413 Request Entity Too Large" แบบนี้
ต่อไปคลิกกลับมาที่หน้า form แล้วลองอัปโหลดไฟล์ที่มีขนาดไม่เกิน 30MB ตัวอย่างนี้จะใช้ไฟล์ขนาด 28.5MB (29,276KB)
จะเห็นว่าแสดงขนาด file size = 29977967 Byte
สรุป
การใช้งานเว็บไซต์เกี่ยวกับการอัปโหลดไฟล์ใน Elastic Beanstalk เราสามารถตั้งค่าให้อัปโหลดไฟล์ตามขนาดที่ต้องการได้ด้วยวิธีเหล่านี้ แต่ต้องระวังเรื่องการสร้างโฟล์เดอร์และไฟล์ให้ดี เพราะถ้าตั้งชื่อโฟลเดอร์หรือไฟล์ผิดจะทำให้เกิดข้อผิดพลาดได้ครับ
ผมหวังว่าบทความนี้จะเป็นประโยชน์ให้กับผู้อ่านได้นะครับ
POP (Tinnakorn Maneewong) จากบริษัท Classmethod (Thailand) ครับ !
บทความที่เกี่ยวข้อง
- [Update] วิธีการใช้งานฟังก์ชัน Application version ใน Elastic Beanstalk
- วิธีการเพิ่มขนาดการอัปโหลดไฟล์ในเว็บไซต์ในสภาพแวดล้อม nginx + php-fpm
- วิธีติดตั้ง Amazon Linux 2023 บน EC2 และเชื่อมต่อเซิร์ฟเวอร์ด้วยโปรแกรม PuTTY
- ทำการติดตั้ง Extention Remote – SSH ใน VSCode และทดลองใช้งาน EC2 โดยตรงใน VSCode
1
