Preface
In modern web development, due to its componentization, responsive data binding and easy-to-use features, it has become one of the preferred frameworks for front-end developers to build single-page applications (SPAs). As a high-performance HTTP and reverse proxy server, Nginx has become an ideal choice for deploying front-end Vue projects with its stability, rich feature set and low resource consumption.
1. Preparation
1.1 Development Environment
First, make sure your Vue project has been developed locally and can be passednpm run serveThe command runs normally. The Vue CLI tool will start a development server locally, usually listening tohttp://localhost:8080. However, this development server is not suitable for use in production environments because it does not provide sufficient performance optimization and security guarantees.
1.2 Server environment
You need a server with Linux (such as Ubuntu or CentOS) installed and make sure that npm is already installed. Although and npm are not required when deploying Vue projects to Nginx (because Vue projects have been packaged into static files), they are necessary for building Vue projects locally.
1.3 Nginx installation
If Nginx is not installed on the server, you can install it through the operating system's package manager. Taking Ubuntu as an example, you can use the following command:
sudo apt update sudo apt install nginx
After the installation is complete, you can usesudo systemctl status nginxThe command checks whether Nginx is started successfully.
2. Build a Vue project
Before deploying a Vue project to Nginx, you need to build it into a static file. This is usually provided by running the Vue CLInpm run buildCommand to complete.
npm run build
After the build is completed, the Vue CLI will generate adistFolder containing all static files for production environments, such as, JavaScript, CSS and image resources, etc.
3. Upload static files to the server
WilldistUpload all files in the folder to the specified directory of the server. You can use SCP, FTP, or other file transfer tools to complete this step. Suppose we upload these files to/var/www/vue-appTable of contents:
scp -r dist/* user@your-server-ip:/var/www/vue-app
4. Configure Nginx
Next, you need to edit Nginx's configuration file so that it can properly serve your Vue project. Nginx configuration files are usually located in/etc/nginx/sites-available/In the directory, you can create a new configuration file in this directory, or edit the default configuration file.defaultdocument.
Here is a basic Nginx configuration example for deploying a Vue project:
server {
listen 80;
server_name ;
root /var/www/vue-app;
index ;
location / {
try_files $uri $uri/ /;
}
# Other configurations, such as SSL certificate configuration, Gzip compression, etc.}In this configuration:
-
listen 80;Indicates that Nginx listens for port 80, which is the default port of the HTTP protocol. -
server_name ;Indicates your website domain name, you need to replace it with your actual domain name. -
root /var/www/vue-app;Specify the directory where the static file of the Vue project is located. -
index ;Specify the default homepage file. -
location / { try_files $uri $uri/ /; }is a critical configuration that ensures that Vue's routing can be mapped todocument. This is a common requirement for single page applications (SPAs), because SPA routing is dynamically generated in the front end via JavaScript, rather than through the actual file path on the server.
If you put the configuration/etc/nginx/sites-available/In the directory, you may need to link it to/etc/nginx/sites-enabled/directory to enable it. You can useln -sCommand to create this link.
5. Test and reload Nginx
After modifying the configuration file, you need to test whether the Nginx configuration is correct and reload Nginx for the changes to take effect.
Test the Nginx configuration with the following command:
sudo nginx -t
If displayedsyntax is ok, it means there is no syntax error in the configuration file. Next, you can reload Nginx using the following command:
sudo systemctl reload nginx
Or, if your system does not use systemd, you can use:
sudo service nginx reload
6. Visit the Vue app
Now, you can access your domain name or server IP address through your browser to see if the deployed Vue application is running normally. For example, open, you should be able to see the homepage of the Vue app.
7. Advanced configuration
7.1 Enable HTTPS
To ensure the security of data transmission, you may need to enable HTTPS for your Vue application. This usually involves configuring an SSL certificate. You can use free certificate authorities like Let's Encrypt to generate SSL certificates and configure them in Nginx.
7.2 Enable Gzip compression
To optimize website loading speed, you can enable Gzip compression in Nginx. This can be done by adding the corresponding instructions in the Nginx configuration file.
gzip on; gzip_types text/plain application/json application/javascript text/css;
7.3 Cache Control
To better control the browser cache, you can add Cache-Control header information to the Nginx configuration. This helps reduce requests to the backend server and speed up page loading.
location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires 1y;
add_header Cache-Control "public, must-revalidate";
}8. Frequently Asked Questions and Solutions
8.1 404 Error
If you encounter a 404 error while accessing certain routes, it is usually because Nginx is not configured correctlytry_filesinstruction. Make sure your configuration file containstry_files $uri $uri/ /;, so that Nginx can redirect all unfound resources todocument.
8.2 Permissions Issues
Ensure that Nginx users have read permissions to the directory where the Vue project static files are located. You can change the owner of the directory by modifying the permissions of the directory or using the chown command.
8.3 Cross-domain issues
If your Vue project needs to call backend APIs and you have cross-domain issues, you can configure reverse proxy in Nginx to solve this problem. By adding the corresponding one in the Nginx configuration filelocationblock and forward the request to the real address of the backend service, you can bypass the browser's same-origin policy restrictions.
9. Summary
Through this article, we have a deep dive into how to deploy a front-end Vue project using Nginx. From preparing for work, building Vue projects, uploading static files to servers, configuring Nginx, to testing and reloading Nginx, to advanced configurations and FAQs and solutions, we completed the entire deployment process step by step. I hope these contents can help you successfully deploy Vue projects on Nginx servers and further optimize the deployment plan in actual work.
This is the article about the steps, common problems and solutions for Nginx to deploy front-end Vue projects. For more information about Nginx to deploy front-end Vue projects, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!