การติดตั้ง Laravel 10 บน AWS EC2 Amazon Linux 2023 Instance และทดลองสร้าง Project

สวัสดีครับ POP จากบริษัท Classmethod (Thailand) ครับ

ครั้งนี้ผมจะมาทดสอบสร้าง Project Laravel 10.x ในรูปแบบ Model-View-Controller (MVC) ที่สามารถคลิก ID เพื่อเข้าไปดูข้อมูลของแต่ละรายการได้ครับ

MVC คืออะไร

MVC ย่อมาจาก Model-View-Controller ซึ่งเป็นรูปแบบการออกแบบโปรแกรมที่แบ่งส่วนควบคุมและความรับผิดชอบของแอปพลิเคชันออกเป็น 3 ส่วนหลัก คือ:

• Model: เป็นส่วนที่ใช้ในการจัดการข้อมูลและสถานะของแอปพลิเคชัน Model จะเก็บข้อมูล ประมวลผลข้อมูล และกำหนดความสัมพันธ์ของข้อมูล เช่น การเชื่อมต่อฐานข้อมูล, การดึงข้อมูล, การบันทึกข้อมูล เป็นต้น
• View: เป็นส่วนที่ใช้ในการแสดงผลข้อมูลหรืออินเตอร์เฟซให้ผู้ใช้งานเห็น โดย View จะเป็นส่วนที่จัดการกับการแสดงผลและการเข้าถึงข้อมูล เช่น หน้าเว็บ, หน้าจอแสดงผล, หรือส่วนต่าง ๆ ที่ผู้ใช้งานสามารถมองเห็นได้
• Controller: เป็นส่วนที่ใช้ในการควบคุมการทำงานระหว่าง Model และ View โดย Controller จะรับข้อมูลจากผู้ใช้งานผ่านทาง View แล้วส่งข้อมูลไปยัง Model เพื่อประมวลผล หรือส่งคำสั่งไปยัง View เพื่อแสดงผลตามที่ต้องการ

การใช้งานรูปแบบ MVC ช่วยให้โปรแกรมมีโครงสร้างที่มั่นคงและง่ายต่อการบำรุงรักษา และช่วยให้โค้ดมีความสมเหตุสมผล และง่ายต่อการเปลี่ยนแปลงและการพัฒนาในอนาคตครับ

อ่านข้อมูลเพิ่มเติมได้ที่ลิงก์ด้านล่างนี้
Model-View-Controller

สิ่งที่ต้องมี

ติดตั้ง EC2 Instance

ข้อควรระวัง:

• ต้องใช้ Key Pair แบบ .pem สำหรับ EC2 Instance เพื่อใช้ในการเชื่อมต่อ Server ผ่าน VSCode
  

• ต้องใช้ Instance Type ที่มี Memory มากกว่า 0.5 GiB เพื่อรองรับการติดตั้ง Database Server ที่เราใช้งาน เช่น MariaDB Server เป็นต้น
  

ดูตัวอย่างการสร้าง Amazon Linux 2023 ได้ที่ลิงก์บทความด้านล่างนี้ (ลิงก์บทความด้านล่างนี้เป็นแค่ตัวอย่าง ซึ่งมีการตั้งค่าบางส่วนที่แตกต่างกัน แนะนำให้ดู ตัวอย่างการสร้าง EC2 Instance ประกอบด้วย)

ตัวอย่างการสร้าง EC2 Instance

Region: Singapore

※Launch instances
Name and tags
Name: tinnakorn-develop (ตั้งชื่อที่ต้องการ)

Application and OS Images (Amazon Machine Image)
Amazon Machine Image (AMI): Amazon Linux 2023 AMI

Instance type
Instance type: t3a.micro (เลือกสเปคตามต้องการ)

Key pair (login)
Key pair name - required: tinnakorn-develop (ตัวอย่างนี้จะเลือกเป็น .pem)

Network settings
Firewall (security groups)
Security group name - required: tinnakorn-develop (ตั้งชื่อที่ต้องการ)
Description - required: tinnakorn-develop (ป้อนตามต้องการ)
Inbound security groups rules
Security group rule 1 (TCP, 22, xxx.xxx.xxx.xxx/32)
Type: ssh | Source type: My IP | Source: xxx.xxx.xxx.xxx/32

Configure storage
1x: 8 GiB gp2 Root volume (Default)

ติดตั้ง Extention Remote – SSH ใน VSCode และทดลองใช้งาน EC2 โดยตรงใน VSCode

ทำการเชื่อมต่อ Server EC2 Instance โดยอ่านคำอธิบายและทำตามลิงก์ด้านล่างนี้ครับ

ขั้นตอนนี้ให้ทำการเชื่อมต่อ Server EC2 โดยใช้โปรแกรม VSCode ในการ Run Command และจัดการระบบ Server EC2 แทนการใช้โปรแกรม PuTTY เพราะว่า VSCode มี Terminal อยู่ในตัวที่สามารถ Run Command ได้เหมือนกับ PuTTY ซึ่งมีความสะดวกมากๆ และถ้าเราเขียนโปรแกรมใน VSCode อยู่แล้วผมขอแนะนำให้ใช้ Terminal ของ VSCode ครับ

ดูตัวอย่างได้ที่ลิงก์ด้านล่างนี้

ติดตั้ง Laravel บน EC2 (Amazon Linux 2023)

เมื่อทำการเชื่อมต่อ Server EC2 และเปิด Terminal เตรียมไว้แล้ว เราจะมาติดตั้ง Laravel 10.x บน EC2 Instance กัน (ถ้ามีขั้นตอนหรือบทความที่ซ้ำกันให้ข้ามไปได้เลยครับ)

※เมื่อเปิด Terminal เตรียมไว้แล้ว หากยังไม่ได้เปลี่ยนสิทธิ์เป็น root ให้รันคำสั่งด้านล่างนี้

sudo su -

แล้วดำเนินการต่อตามขั้นตอนในลิงก์ด้านล่างนี้

เปิด Project Laravel 10.x

เมื่อทำตามขั้นตอนข้างต้นทุกอย่างแล้วถ้าแสดงหน้าเว็บไซต์ของ Laravel โดยไม่มีปัญหาอะไร ให้เปิด Project Laravel 10.x ของเราในขั้นตอนถัดไปได้เลย

มาที่ด้านซ้ายบนสุด คลิก File และ Open Folder... แล้วป้อน path /var/www/html/ นี้เข้าไป และคลิก OK

แล้วจะแสดงหน้าจอแบบนี้

ตรวจสอบการตั้งค่าในไฟล์ .env

คลิกที่ไฟล์ .env แล้วดูการตั้งค่าของเราที่นี่ ซึ่งเราสามารถเปลี่ยนแปลงการตั้งค่าบางส่วนได้ เช่น [APP_NAME=your_name] (จะเปลี่ยนหรือไม่เปลี่ยนก็ได้) แต่ในส่วนของ [DB_DATABASE, DB_USERNAME, DB_PASSWORD] ที่ทำการตั้งค่ามาก่อนหน้านี้ จะไม่เปลี่ยนแปลงอะไรครับ

การเขียนโปรแกรม Laravel เบื้องต้น

ขั้นตอนนี้เราจะเขียนโปรแกรมเบื้องต้นเกี่ยวกับ Customer List (ชื่อบุคคล) โดยสามารถคลิกที่ ID เพื่อเข้าไปดูข้อมูลของแต่ละรายการได้ครับ

สิ่งที่จะทำในขั้นตอนนี้

• ตั้งค่าไฟล์ config/app.php
• เขียนโปรแกรมเกี่ยวกับ Model
• เขียนโปรแกรมเกี่ยวกับ Controller
• เขียนโปรแกรมเกี่ยวกับ Routes
• เขียนโปรแกรมเกี่ยวกับ Views
• ตรวจสอบหน้าเว็บไซต์

ตั้งค่าไฟล์ config/app.php

เปิดไฟล์ config/app.php ใน Project แล้วเลื่อนไปที่บรรทัดที่ 73 จะเจอ "timezone"
ให้เปลี่ยน Timezone เป็น Asia/Bangkok และ Save

เขียนโปรแกรมเกี่ยวกับ Model

เราจะสร้างไฟล์ Model ผ่านการรันคำสั่ง

เปิด Terminal ขึ้นมา แล้วรันคำสั่งสร้างไฟล์ Model (Customer ในคำสั่งเป็นส่วนหนึ่งของชื่อไฟล์ สามารถเปลี่ยนได้ตามต้องการ)

php artisan make:model Customer --migration --seed

แล้วระบบจะสร้างให้ 3 ไฟล์ตาม Path ดังนี้
1. Path: app/Models/Customer.php
2. Path: database/migrations/date_time_create_customers_table.php (date_time ข้างหน้าคือเวลาปัจจุบันที่สร้าง)
3. Path: database/seeders/CustomerSeeder.php

เพิ่ม Code ที่ไฟล์ date_time_create_customers_table.php

เปิดไฟล์ database/migrations/date_time_create_customers_table.php แล้วคัดลอก Code ด้านล่างนี้วางในไฟล์ตามรูปภาพ และ Save

            $table->string('firstname', 100);
            $table->string('lastname', 100);

แล้วรันคำสั่ง migrate:fresh เพื่อลบตารางทั้งหมดในฐานข้อมูล และสร้างตารางใหม่ตาม Migration ที่กำหนดไว้ในโปรเจกต์ Laravel

php artisan migrate:fresh

เพิ่ม Code ที่ไฟล์ DatabaseSeeder.php

เปิดไฟล์ database/seeders/DatabaseSeeder.php แล้วคัดลอก Code ด้านล่างนี้วางในไฟล์ตามรูปภาพ และ Save

        $this->call(CustomerSeeder::class);

เพิ่ม Code ที่ไฟล์ CustomerSeeder.php

เปิดไฟล์ database/seeders/CustomerSeeder.php แล้วลบ Code ตั้งแต่บรรทัดที่ 7 จนถึงบรรทัดสุดท้ายออกไป
แล้วคัดลอก Code ด้านล่างนี้วางในไฟล์ตามรูปภาพ และ Save (ในส่วนของ ['firstname', 'lastname'] ให้เปลี่ยนเป็นชื่อที่ต้องการ)

use App\Models\Customer;

class CustomerSeeder extends Seeder
{
    protected $customers = [
        [
            'firstname'      => 'Tinnakorn',
            'lastname'       => 'Maneewong',
        ],[
            'firstname'      => 'Supanut',
            'lastname'       => 'Akaram',
        ]
    ];

    public function run()
    {
        foreach ($this->customers as $customer) {
            Customer::create($customer);
        }
    }
}

ต่อไปรันคำสั่ง migrate:fresh --seed เพื่อลบฐานข้อมูลทั้งหมดในระบบ แล้วระบบจะรัน Migration เพื่อสร้างโครงสร้างของ Table ใหม่ตามที่กำหนดไว้ในโปรเจกต์ Laravel และจะเรียกใช้ Seeder ข้อมูลเริ่มต้นลงในฐานข้อมูลใหม่ที่สร้างขึ้น
・Migrate: จะสร้าง Table ไปยัง Database ที่เราใช้งาน
・Seeder: จะแทรกข้อมูลเริ่มต้นโดย Insert ไปยัง Database ที่เราใช้งาน

php artisan migrate:fresh --seed

เขียนโปรแกรมเกี่ยวกับ Controller

เราจะสร้างไฟล์ Controller ผ่านการรันคำสั่ง

รันคำสั่งสร้างไฟล์ Controller (Customer ในคำสั่งเป็นส่วนหนึ่งของชื่อไฟล์ สามารถเปลี่ยนได้ตามต้องการ)

php artisan make:controller CustomerController

แล้วระบบจะสร้างไฟล์ให้ตาม Path app/Http/Controllers/CustomerController.php

เพิ่ม Code ที่ไฟล์ CustomerController.php

ส่วนนี้คือการสร้าง method index และ method show
・method index จะรองรับ URL ที่ชื่อว่า /customer/
・method show จะรองรับ URL ที่ชื่อว่า /customer/[id]
โดยเราจะเพิ่มโค้ดในไฟล์ web.php เพื่อให้รองรับ Method เหล่านี้กับ URL โดยการตั้งค่า Route หลังจากทำขั้นตอนในส่วนของไฟล์ Controller เสร็จ

นอกจากนี้ในส่วน return ของ Method แต่ละอัน จะกำหนดว่า View ใดที่จะใช้แสดง HTML ซึ่งในส่วนของ View นี้จะอธิบายในภายหลัง

ทีนี้เราจะมาเพิ่มโค้ดในไฟล์ Controller โดยเปิดไฟล์ที่เราสร้างจากการรันคำสั่งของเรา เช่นไฟล์ CustomerController.php แล้วลบ Code ค่าเริ่มต้นออกให้หมด และคัดลอก Code ด้านล่างนี้วางลงไป และ Save

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Customer;

class CustomerController extends Controller
{
    public function index()
    {
        $customers = Customer::all();
        return view('customer.index', ['customers' => $customers]);
    }

    public function show($id)
    {
        $customer = Customer::find($id);
        return view('customer.show', ['customer' => $customer]);
    }
}

เขียนโปรแกรมเกี่ยวกับ Routes

Route คือกฎการนำทางที่ใช้เชื่อมต่อระหว่าง URL กับโค้ดที่ต้องการให้ทำงาน หรือสั่งการ (Controller method) ในแอปพลิเคชัน Laravel ของเรา ซึ่งเราสามารถกำหนด Route ได้ในไฟล์ routes/web.php โดย Route จะกำหนดเส้นทาง (URL) ที่ใช้ในการเข้าถึงแต่ละส่วนของแอปพลิเคชันของเรา

เมื่อมีการเรียก URL จากผู้ใช้งาน แอปพลิเคชัน Laravel จะตรวจสอบใน Route ว่า URL นั้นตรงกับเส้นทางใด และจะสั่งการ (Dispatch) การทำงานไปยัง Controller method หรือส่วนที่กำหนดไว้ใน Route นั้นๆ

เพิ่ม Code ที่ไฟล์ web.php

เราสามารถดำเนินการได้เลย เนื่องจากไฟล์ web.php มีอยู่ในโปรเจกต์ Laravel อยู่แล้ว

เปิดไฟล์ routes/web.php แล้วคัดลอก Code ด้านล่างนี้วางลงไป และ Save

Route::get('/customer', [App\Http\Controllers\CustomerController::class, 'index'])->name('customer.index');
Route::get('/customer/{id}', [App\Http\Controllers\CustomerController::class, 'show'])->name('customer.show');

เขียนโปรแกรมเกี่ยวกับ Views

ก่อนอื่นต้องสร้างโฟลเดอร์ customer สำหรับเก็บไฟล์ blade.php ด้วยตัวเองใน Path resources/views ดังนี้
・Path: resources/views/customer

แล้วสร้างไฟล์ blade.php ด้วยตัวเองใน Path resources/views/customer ดังนี้
・Path: resources/views/customer/index.blade.php
・Path: resources/views/customer/show.blade.php

※เราสามารถสร้างโฟลเดอร์และไฟล์ blade.php พร้อมกันได้โดยป้อน folder_name/file_name.blade.php แล้วจะได้โฟลเดอร์ folder_name ที่มีไฟล์ blade.php อยู่ข้างใน
ตัวอย่างในรูปคือ
・folder_name = customer
・file_name.blade.php = index.blade.php

เพิ่ม Code ที่ไฟล์ index.blade.php

Path: resources/views/customer/index.blade.php

เปิดไฟล์ index.blade.php แล้วคัดลอก Code ด้านล่างนี้วางลงไปตามรูปภาพด้านล่าง และ Save

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
    </head>
    <body>
        <table>
            <tr><th>ID</th><th>name</th></tr>
            @foreach ($customers as $customer)
                <tr>
                    <td><a href="{{ route('customer.show', ['id' => $customer->id]) }}">{{ $customer->id }}</a></td>
                    <td>{{ $customer->firstname }} {{ $customer->lastname }}</td>
                </tr>
            @endforeach
        </table>
    </body>
</html>

เพิ่ม Code ที่ไฟล์ show.blade.php

Path: resources/views/customer/show.blade.php

เปิดไฟล์ show.blade.php แล้วคัดลอก Code ด้านล่างนี้วางลงไปตามรูปภาพด้านล่าง และ Save

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel</title>
    </head>
    <body>
        <ul>
            <li>ID: {{ $customer->id }}</li>
            <li>Name: {{ $customer->firstname }} {{ $customer->lastname }}</li>
        </ul>

        <p><a href="{{ route('customer.index') }}">Index</a></p>
    </body>
</html>

ตรวจสอบหน้าเว็บไซต์

เราจะตรวจสอบหน้าเว็บไซต์ด้วย IP Address ของ EC2 Instance ที่ใช้เป็นสภาพแวดล้อมของโปรเจกต์ Laravel

แล้วจะทดสอบเว็บไซต์ด้วย URL บนหน้าเว็บเบราว์เซอร์ดังนี้

http://[IP Address]/customer

เมื่อเปิด URL ข้างต้นบนเว็บเบราว์เซอร์แล้ว ถ้าไม่มี Error ก็จะแสดงหน้าจอแบบนี้ (หน้านี้คือหน้าของไฟล์ "index.blade.php")
แล้วลองคลิกที่ "ID: 1"

แล้วจะแสดงข้อมูลชื่อของ "ID: 1" แบบนี้ (หน้านี้คือหน้าของไฟล์ "show.blade.php")
ต่อไปลองคลิกปุ่ม Index เพื่อย้อนกลับไปหน้าแรก (หน้า Index)

จะเห็นว่าสามารถย้อนกลับมาหน้าแรกได้
ต่อไปลองคลิกที่ "ID: 2"

แล้วจะแสดงข้อมูลชื่อของ "ID: 2" แบบนี้

เพียงเท่านี้เราก็สามารถเขียนโปรแกรมที่เกี่ยวกับ Customer List (ชื่อบุคคล) เบื้องต้นในรูปแบบ MVC ของ Laravel บน EC2 Instance ได้แล้วครับ

สรุป

การใช้งานรูปแบบ MVC ช่วยให้โปรแกรมมีโครงสร้างที่มั่นคงและง่ายต่อการบำรุงรักษา และช่วยให้โค้ดมีความสมเหตุสมผล และง่ายต่อการเปลี่ยนแปลงและการพัฒนาในอนาคต นอกจากนี้การพัฒนาเว็บไซต์บน EC2 Instance จะทำให้โปรแกรมของเรามีประสิทธิภาพมากยิ่งขึ้นครับ

ผมหวังว่าบทความนี้จะเป็นประโยชน์ให้กับผู้อ่านได้นะครับ

POP (Tinnakorn Maneewong) จากบริษัท Classmethod (Thailand) ครับ !

บทความที่เกี่ยวข้อง

• วิธีการติดตั้ง Visual Studio Code บน Windows 10/11 [2022]
• การติดตั้ง Laravel บน EC2 (Amazon Linux 2023)
• วิธีติดตั้ง Amazon Linux 2023 บน EC2 และเชื่อมต่อเซิร์ฟเวอร์ด้วยโปรแกรม PuTTY
• วิธีตั้งค่า Time Zone ใน Amazon Linux 2 ของ EC2
• เรียกใช้ PHP 8.2 โดยใช้ Nginx ใน EC2 (Amazon Linux 2023) บน AWS
• การติดตั้ง MariaDB บน Amazon Linux 2023
• การติดตั้ง Composer ใน EC2 (Amazon Linux 2, Amazon Linux 2023)
• มาทำความรู้จัก Laravel กัน
• Visual Studio Code (Download)
• Visual Studio Code Remote - SSH (Extension)
• VS Codeで改行コードを変更するには (ภาษาญี่ปุ่น)