Deploying a Vue App on Nginx with Homebrew

Photo by Content Pixie on Unsplash

This guide is for deploying a single Vue application on Nginx using Homebrew.

Prerequisites

• If you haven’t installed Nginx yet, follow this article.
• Also you need to set up Multiple Config Files.

Build Vue Application

Build your Vue application for production. You may need additional configuration based on your project’s needs. For a simple project, just run the following command.

npm run build

Copy to Nginx

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

cp -r dist/* /opt/homebrew/var/www/your-vue-app

Configure Nginx

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

micro /opt/homebrew/etc/nginx/servers/your-vue-app.conf

And then add the following configuration.

server {
    listen 80;
    server_name localhost;

    root /opt/homebrew/var/www/your-vue-app;

    index index.html;

    location / {
        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 your Vue application athttp://localhost.

More Resources

Deploying multiple Vue Apps on Nginx with Homebrew