Pushing a Laravel Vue.js App to Production: CDN Hosting and Server Load Distribution

Published in Laravel, PHP, Redis, VueJS on Dec 15, 2023

In this tutorial, I will guide you on how to push a Laravel Vue.js application to production while hosting the generated bundled file on a separate domain, such as a CDN. This approach allows multiple servers to load from the same set of generated files.

Configuration

First, you need to configure the ASSET_URL in your .env file. You can find more information about this in the Laravel documentation.

Main Server

For deployment, choose one machine to be the main server, responsible for running all primary jobs. Follow these steps to build and push your Vite configuration:

Generate the "build" directory and rsync the content to one server. You can use any other method to upload the files.

Copied!

1npm run prod
2rsync -avz /path/to/build user@remote-server:/path/to/destination

npm run prod
rsync -avz /path/to/build user@remote-server:/path/to/destination

Additionally, create a command that stores the Vite manifest.json in Redis. This allows the other servers to access the same manifest.

Copied!

1php artisan make:command Tools/CopyManifestCommand

php artisan make:command Tools/CopyManifestCommand

Copy the following contents into the generated file:

Copied!

 1<?php
 2 
 3namespace App\Console\Commands\Tools;
 4 
 5use Cache;
 6use Illuminate\Console\Command;
 7 
 8class CopyManifestCommand extends Command
 9{
10    /**
11     * The name and signature of the console command.
12     *
13     * @var string
14     */
15    protected $signature = 'tools:copy-manifest';
16 
17    /**
18     * The console command description.
19     *
20     * @var string
21     */
22    protected $description = 'Copies the manifest.json into Redis.';
23 
24    /**
25     * Execute the console command.
26     */
27    public function handle()
28    {
29        $this->info('Copying manifest.json into Redis...');
30 
31        $path = public_path('build/manifest.json');
32 
33        if(file_exists($path) === false) {
34            $this->error('Manifest file not found.');
35 
36            return Command::FAILURE;
37        }
38 
39        $manifest = file_get_contents($path);
40 
41        Cache::put('manifest', $manifest);
42 
43        $this->info('Done!');
44    }
45}

<?php

namespace App\Console\Commands\Tools;

use Cache;
use Illuminate\Console\Command;

class CopyManifestCommand extends Command
{
    /**
     * The name and signature of the console command.
     *
     * @var string
     */
    protected $signature = 'tools:copy-manifest';

    /**
     * The console command description.
     *
     * @var string
     */
    protected $description = 'Copies the manifest.json into Redis.';

    /**
     * Execute the console command.
     */
    public function handle()
    {
        $this->info('Copying manifest.json into Redis...');

        $path = public_path('build/manifest.json');

        if(file_exists($path) === false) {
            $this->error('Manifest file not found.');

            return Command::FAILURE;
        }

        $manifest = file_get_contents($path);

        Cache::put('manifest', $manifest);

        $this->info('Done!');
    }
}

Run the newly created command on the main server storing the manifest.json in memory

Copied!

1php artisan tools:copy-manifest;

php artisan tools:copy-manifest;

Other Servers

For each server, excluding the main application, you need to rebuild the manifest file to ensure consistency:

Generate a new command to store the manifest file from Redis into the public/build folder.

Copied!

1php artisan make:command Tools/StoreManifestCommand

php artisan make:command Tools/StoreManifestCommand

Add the following code to the generated file:

Copied!

 1<?php
 2 
 3namespace App\Console\Commands\Tools;
 4 
 5use Cache;
 6use Illuminate\Console\Command;
 7 
 8class StoreManifestCommand extends Command
 9{
10    /**
11     * The name and signature of the console command.
12     *
13     * @var string
14     */
15    protected $signature = 'tools:store-manifest';
16 
17    /**
18     * The console command description.
19     *
20     * @var string
21     */
22    protected $description = 'Will store the manifest.json from Redis into the public/build folder.';
23 
24    /**
25     * Execute the console command.
26     */
27    public function handle()
28    {
29        $this->info('Storing manifest.json from Redis...');
30 
31        $manifest = Cache::get('manifest');
32 
33        if($manifest === null) {
34            $this->error('Manifest not found in Redis.');
35 
36            return Command::FAILURE;
37        }
38 
39        file_put_contents(public_path('build/manifest.json'), $manifest);
40 
41        $this->info('Done!');
42    }
43}

<?php

namespace App\Console\Commands\Tools;

use Cache;
use Illuminate\Console\Command;

class StoreManifestCommand extends Command
{
    /**
     * The name and signature of the console command.
     *
     * @var string
     */
    protected $signature = 'tools:store-manifest';

    /**
     * The console command description.
     *
     * @var string
     */
    protected $description = 'Will store the manifest.json from Redis into the public/build folder.';

    /**
     * Execute the console command.
     */
    public function handle()
    {
        $this->info('Storing manifest.json from Redis...');

        $manifest = Cache::get('manifest');

        if($manifest === null) {
            $this->error('Manifest not found in Redis.');

            return Command::FAILURE;
        }

        file_put_contents(public_path('build/manifest.json'), $manifest);

        $this->info('Done!');
    }
}

Run the command in each additional server

Copied!

1php artisan tools:store-manifest

php artisan tools:store-manifest

Conclusion

To ensure correct bundling, make sure to correctly reference all your images as described in the Laravel documentation. Additionally, refer to the documentation for processing static assets in Blade templates here.

That's it! You have successfully learned how to push a Laravel Vue.js application to production, hosting the bundled file on a separate domain and allowing multiple servers to load from the same set of generated files.