Деплой проєкту Laravel 10.7 та Vue 3 з GitHub на Hostinger

Спільний хостинг нині трохи втратив популярність через такі платформи, як Vercel та Netlify, які зручно забезпечують створення та миттєвий деплой вашого проєкту. Просто натискаєте кнопку "ок" і спостерігаєте, як ваш сайт публікується онлайн.

Я вирішив перевірити, як швидко працює Git деплой з Hostinger і був вражений швидкістю та зручністю деплою мого свіжо запущеного проєкту на Laravel 10.7 / Vue 3.

Після покупки домену https://oleg-blog.tech за смішну ціну в 1.41 EUR, встановлення SSL сертифікату, створення електронної пошти [email protected] та бази даних MySQL (усе безкоштовно з моїм планом Premium Hosting), я відкрив bash термінал на моєму комп’ютері з Ubuntu 22.04, щоб розпочати новий проєкт Laravel:

composer create-project laravel/laravel larablog

Я не буду проходити всю процедуру, оскільки це не туторіал по Laravel. Проте хочу зазначити, що документація на https://bootcamp.laravel.com/inertia/installation глибока і настільки проста для читання, що не займе більше 20 хвилин, поки ви не введете php artisan serve у термінал і не побачите стартову сторінку на localhost:8000.

Оскільки ми використовуємо Vue 3 у цьому проєкті, є кілька моментів, на яких я хочу зосередити вашу увагу. По-перше, потрібно встановити Laravel Breeze для використання фреймворку. Для цього доступна також Breeze установка для React з того ж джерела. Введіть у вашому терміналі наступні команди:

composer require laravel/breeze — dev

php artisan breeze:install vue

Далі потрібно запустити вашу локальну середу розробки для файлів node:

npm run dev

Останнє, що потрібно зробити — це створити базу даних MySQL у вашій локальній середовищі і внести всі деталі для бази даних, SMTP серверу електронної пошти та іншу необхідну інформацію в файл .env. Після цього ви можете виконати наступну команду в терміналі:

php artisan migrate

Якщо ви переконалися, що ваш проєкт тепер працює в локальній середовищі, і ви можете реєструватися в базі даних та входити, настав час створити приватний репозиторій на GitHub і відправити туди свій код. Зверніть увагу, що для того, щоб ваш код працював на платформі Hostinger, потрібно видалити всі файли .env, /public/*, /storage/*, vendor з файлу .gitignore перед комітом.

Також, оскільки ваш проєкт на Laravel буде обслуговувати всі файли з папки /public сам по собі, вам потрібно створити додатковий файл .htaccess у кореневій папці з таким кодом:

RewriteEngine On

RewriteBase /

Serve files from the root directory

RewriteCond %{REQUEST_FILENAME} !-f

RewriteRule ^(.*)$ public/$1 [L]

Після того, як ви зробите Git коміт і виконаєте синхронізацію файлів, пора повернутися до акаунту Hostinger, знайти Git у меню Advanced і слідувати інструкціям з наданого туторіалу https://support.hostinger.com/en/articles/1583302-how-to-deploy-a-git-repository, щоб деплоїти репозиторій на ваш домен.

Перед реальним деплоєм вам потрібно скопіювати RSA ключ і вставити його в налаштування GitHub, щоб хостинг-провайдер зміг отримати доступ до приватного репозиторію на GitHub. Я також вирішив додати webhook безпосередньо до мого проєкту, щоб не оновлювати Hostinger вручну кожного разу, коли я додаю нові функції до проєкту. Тепер, з доданим webhook і успішно опублікованим проєктом, залишився ще один останній крок.

Міграція бази даних, яку я вже зробив локально перед комітом на GitHub, не працюватиме на базі даних на Hostinger. Мені потрібно було скористатися SSH, щоб зайти на сервер Hostinger і виконати команду php artisan migrate в терміналі там.
Щоб отримати доступ до сервера, потрібно скопіювати код з меню на панелі керування під AdvancedSSH Access і вставити його у ваш термінал. Voi la тепер я вільний для розробки мого блогу з миттєвим деплоєм, використовуючи спільний хостинг з зручністю edge computing.

Підсумовуючи, витративши кілька додаткових хвилин на налаштування проєкту, можна отримати домен, хостинг, базу даних та електронну пошту, готові майже з тією ж швидкістю, яку пропонують сервіси хмарних обчислень. Для стартапу, блогера чи малого бізнесу це може бути ідеальним рішенням, щоб вивести їхні ідеї, продукти та послуги безпосередньо до клієнта і заощадити при цьому гроші.

Перекладено з: Deploying a Laravel 10.7 and Vue 3 project from GitHub on Hostinger