This is a setup for a full stack application using BackEnd Google Cloud Platform VM Instance Free Tier with Hestia Control Panel and a FrontEnd React App hosting on CloudFlare Pages.

BackEnd

These are the configurations for the Backend

  1. Google Cloud PlatformFree Tier - Create VM Instance
    1. Zone: us-west1-b
    2. Machine Configuration > Series: E2
    3. Machine Type: e2-micro(1 vCPU, 1GB Mem)
    4. Boot Disk:
      • OS: Ubuntu
      • Version: 20.04 TLS amd64 focal main built on 2022-04-19...
      • Boot Disk Type: Standard Persistent disk
      • Size: 30G
    5. Virtual Machine:
      • Name [WHATEVER]
      • Type: New balanced persistent disk
      • Size 30 GB
      • License Type: Free
      • Image: Ubuntu 20.04 LTS Minimal
    6. Allow default access: Yes (checked)
    7. Firewall
      • Allow default access: (checked)
      • Allow https access: (checked)
      • Advanced Options >  > NEtworking > Network Service Tier: Standard
    8. GCP Newly Created Instance
      • Note The Public IP Address. You will need it for the DNS Setting in the later steps.
      • Create firewall Rule
        • Name [WHATEVER]
        • Action on Match
          • Targets: All instances in the network
          • Source Ip Rages: 0.0.0.0/0
        • Protocols and Ports
          • Specified protocols and ports: Yes
          • tcp [8083] ( 8083 is the default port for Nestia)
          • NOTE: if you are using CloudFlare, you must use port 2083. to change it, send this command:
          • If you need to change it later, use these commands:
            • $ sudo su -
            • # v-change-sys-port 208
            • * also make sure to change it in your firewall rules
  2. Domain Registar - Set DNS (CloudFlare for example). Steps 1 and 2 are only if its a new domain. For established domain and only add the sub domain, complete step 1 only.
    1. A Record
      • Type: A
      • Host: @
      • Value: IP ADDRESS
      • TTL: Automatic
    2. A Record (sub is from sub.domain.com)
      • Type: A
      • Host: sub
      • Value: IP ADDRESS
      • TTL: Automatic
    3. CNAME
      • Type: CNAME
      • Host: www
      • Value: sub.domain.com
      • TTL: Automatic
  3. Hestia Control Panel - https://hestiacp.com/
    • Installation:
      1. Open SSH from GCP VM
      2. $ wget https://raw.githubusercontent.com/hestiacp/hestiacp/release/install/hst-install.sh
      3. $ bash hst-install.sh --interactive no --email [email protected] --password MyPassword123 --hostname sub.domain.com -f
      4. $ reboot
      5. Open in browser: https://sub.domain.com:2083/login/
        • default User: admin
        • password: whatever you chose during the 3rd step above in the bash command
      6. Create A Non-Admin user.
      7. Add New Site
      8. Create new MySQl Database
      9. Update .env file in Laravel Project
      10. PHPMyAdmin: https://sub.domain.com/phpmyadmin/
  4. Setup  Secured FTP with SSH and SCP to connect to GCP VM Instance
  5. Video: o_OQEydt3MI - How to connect (SSH) WinSCP to Google Cloud VM (sFTP)
    1. Download WinSCP: https://winscp.net/eng/download.php
    2. OPEN: G:\Program Files\winscp\PuTTY\puttygen.exe
    3. click [Generate] (Move the mouse to generate random)
    4. Key Comment: [ENTER YOUR USER: [email protected]]
    5. https://youtu.be/o_OQEydt3MI?t=139
    6. Key Passphase: GCP Account Pass
    7. Save Public Key: g_pub_key G:\Program Files\winscp\keys
    8. Save Private Key g_pri_key
    9. Copy "Public Key for pasting into OpenSSH authorized_keys file:" [long string]
      ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQDCwqqRyGUZcxlAIsfYMAo3GWiChwsyMglkhNHBEQX5g7Zz5l4xZ7/
      E0NFvs0S4t4v6Tv2Em0mQAxdBdTaURjPUaLY+zKDevAXoMKmdVa1dSCauP+KX7uCOMWcL5rCaBm6cL9Ff5v2DFRP0K1q
      9zKDnulJJ7nHMN++j75zpwY5Hc9jNsIjEhUSdpQHiiClXgG8yuxP+flNS7IICgp0dycXGBHYe8lXPblludn4ZW9NV/TQn
      4b/Mg6es8lMnf7XO/2T6tpLtUFe55awLJzhZTQOO3as+DtluNtKt7q1akcYqMYdrg0kAzzYkyy/V1Lkvs3rh01BQN
      zbwjUXL4pIlepyL [email protected]
    10. go to CGP to the VM instance: https://console.cloud.google.com/compute/instances?project=[PROJECT NAME]
    11. EXAMPLE:https://console.cloud.google.com/compute/instancesDetail/zones/us-west1-b/instances/[INSTANCE NAME]?project=[PROJECT NAME]
    12.  Click Edit
    13. Scroll down to SSH Keys
    14. Add SSH KEY click [ADD ITEM]
    15. Save
    16. OPEN WinSCP G:\Program Files\winscp
    17. New Site
    18. Hostname: External Ip
    19. User Name: example [DO NOT ENGER THE @gmail part]
    20. Password DONT ENTER YET
    21. Click [Advanced]
    22. GO TO > SSH > Authentication
    23. Private Key File:
    24. Select Private Key from Step 8
    25. Click OK
    26. Click SAVE
    27. Select the newly created site and click on Login button
    28. [searching for host]
    29. * BE SURE TO ENABLE PORT 22 in Firewall Rules
    30. Click Yes
    31. Enter Password when prompted
    32. Done
  6. Laravel API APP (example: /g/xampp8/htdocs/laravel/StudentTodo/laravel-react-student)
    • .env
      • APP_NAME=Laravel
        APP_ENV=local
        APP_KEY=base64:sWo0W/3EjLnvh6bVBTtakSV40z7S59MV7UVb9q1/LAs=
        APP_DEBUG=true
        APP_URL=https://sub.domain.com
    • Mysql:
      • DB_CONNECTION=mysql
        DB_HOST=127.0.0.1
        DB_PORT=3306
        DB_DATABASE=mydbname
        DB_USERNAME=myuser
        DB_PASSWORD=mypassword
    • Upload Laravel App to Server
      • Upload All Files to the private folder in the hosting root folder: (example: /home/userName/web/private) Exept in Red are not necessary
        • .editorconfig
        • .env
        • .env.example
        • .git/
        • .gitattributes
        • .gitignore
        • AddNewpage-api.sh*
        • README.md
        • app/
        • artisan*
        • bootstrap/
        • composer.json
        • composer.lock
        • config/
        • database/
        • lang/
        • package.json
        • phpunit.xml
        • public/
        • react/
        • resources/
        • routes/
        • storage/
        • tests/
        • vendor/
        • vite.config.js
      • public/ - Upload all the files in the public Folder to public_html
        • index.php
        • .htacess
        • favicon.ico
        • robots.txt
        • Any other CSS or Javascript
      • index.php
        • Open index.php and change the require path to add the private folder, for example:
        • Change FROM: __DIR__.'/../storage/framework/maintenance.php'
        • Change TO: __DIR__.'/../private/laravel-react-student/storage/framework/maintenance.php'
        • Change these three if they exists:
          1. storage/framework/maintenance.php
          2. vendor/autoload.php
          3. bootstrap/app.php
      • cors.php (/web/sub.directory.com/private/laravel-react-student/config)
        • Open cors php and add the React App Address fro the API and change accordingly, for example:
          • 'allowed_origins' => ['https://myFrontEndApp.domain.com'],

Front End

  1.  Create React App with Vite (example: /g/xampp8/htdocs/laravel/StudentTodo/laravel-react-student/react)
    • .env
      • VITE_API_BASE_URL=https://sub.domain.com
    • Follow this tutorial for help: https://vitejs.dev/guide/static-deploy.html#cloudflare-pages
    • Install Wrangler CLI
      • $ npm install -g wrangler
    • Login to Cloudflare account from CLI
      • $ wrangler login
    • Run your build command
      • $ npm run build
    • Create new deployment
      • $ npx wrangler pages publish dist
  2. Login to your CloudFlare dashboard and go to pages, you will see the newly created project with the URL link.
  3. Done

 Resources:

  • G:\xampp8\htdocs\laravel\StudentTodo\laravel-react-student\
  • https://vitejs.dev/guide/static-deploy.html#cloudflare-pages
  • https://www.youtube.com/watch?v=dG55U27oSb4 - How To Deploy Laravel 8 Project | Deploy Laravel Through FileZilla | Laravel 8 Project Hosting
  • https://www.youtube.com/watch?v=v46bRHR1Pq0 - Google Cloud Platform (Free Tier) WordPress Setup
  • https://console.cloud.google.com/projectcreate
  • https://hestiacp.com/