Deploying multiple Vue Apps on Nginx with Homebrew

Photo by 五玄土 ORIENTO on Unsplash

This guide is for deploying multiple Vue applications on Nginx using Homebrew.

Prerequisites

• If you haven’t installed Nginx yet, follow this article.
• Also you need to set up Multiple Config Files.
• This guide will use App1 and App2 as examples for deploying to Nginx.

Prepare Apps

Open your Vue projects with a text editor. Based on your project type, define the public path.

For Webpack (Vue CLI)

Open vue.config.js and add publicPath like this:

// For App1
module.exports = defineConfig({
  publicPath: '/app1',
  ...
})


// For App2
module.exports = defineConfig({
  publicPath: '/app2',
  ...
})

For Vite

Open vite.config.ts and add base like this:

// For App1
export default defineConfig({
  base: '/app1',  
  ...
})


// For App2
export default defineConfig({
  base: '/app2',  
  ...
})

Build Vue Apps

And then build both of your Vue apps for production. You may need additional configuration based on your project’s needs. For a simple projects, just run the following command.

npm run build

Copy to Nginx

After that, you need to copy the generated /dist folders into Nginx’s document root folder.

# For App1
cp -r dist/* /opt/homebrew/var/www/app1

# For App2
cp -r dist/* /opt/homebrew/var/www/app2

Configure Nginx

Open the Nginx conf file. Make sure you have already set up multiple config files.

micro /opt/homebrew/etc/nginx/servers/sites.conf

And then add the following configuration.

server {
    listen 80;
    server_name localhost;

    location /app1 {
        alias /opt/homebrew/var/www/app1;
        index index.html;
        try_files $uri $uri/ /index.html =404;
    }

    location /app2 {
       alias /opt/homebrew/var/www/app2;
       index index.html;
       try_files $uri $uri/ /index.html =404;
    }
}

Test Nginx

Test the config file before running Nginx.

nginx -t

Run Nginx

If there are no issues, run Nginx with the following command.

brew services start nginx

Done

Finally, you can check App1 application athttp://localhost/app1 and App2 at http://localhost/app2 .

More Resources

Using Nginx as a Reverse Proxy with Homebrew