[Update] วิธีการเพิ่มขนาดอัปโหลดไฟล์กรณีที่ใช้ PHP ใน Elastic Beanstalk

สำหรับผู้ที่ใช้งาน PHP ใน Elastic Beanstalk รันเว็บไซต์ แล้วเจอปัญหาเกี่ยวกับการอัปโหลดไฟล์โดยมี Error แจ้งเตือนว่า "413 Request Entity Too Large" แบบนี้ เราสามารถเพิ่มการตั้งค่าให้กับโปรเจกต์ของเราไปยัง Elastic Beanstalk ให้อัปโหลดไฟล์ตามขนาดที่ต้องการได้ ซึ่งจะมาอธิบายวิธีการในบทความนี้ครับ

#Classmethod Thailand

#Thai Language

#AWS

#AWS-Thai

#AWS Elastic Beanstalk

Tinnakorn Maneewong

2024.04.04

สวัสดีครับ 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 จาก Application versions ไปยัง Environment

ตรวจสอบผลลัพธ์ 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) ครับ !