nginx部署前端vue项目完整详细讲解

​

大家好，我是程序员小羊！

前言：

在使用Nginx部署前端Vue项目时，确保项目的生产环境版本已经打包，并且Nginx已经安装并配置在服务器上。以下是详细的步骤，包括打包Vue项目、配置Nginx、部署和测试项目。

1. 打包Vue项目

首先，你需要将Vue项目编译为生产环境版本。可以通过Vue CLI完成这一步。

1.1 安装依赖

确保已经安装了Node.js和npm。然后在项目根目录下运行以下命令安装依赖：

npm install

1.2 编译项目

在项目根目录中，运行以下命令来编译项目：

npm run build

此命令会在项目根目录下生成一个dist文件夹，里面包含了所有的静态文件，包括HTML、JavaScript、CSS和图片等资源。dist文件夹是用于部署到服务器上的内容。

2. 安装Nginx

如果Nginx还没有安装，可以通过以下命令安装：

2.1 Ubuntu/Debian 系统

sudo apt-get update
sudo apt-get install nginx

2.2 CentOS/RHEL 系统

sudo yum update
sudo yum install nginx

安装完成后，启动Nginx：

sudo systemctl start nginx

并将其设置为开机自启：

sudo systemctl enable nginx

3. 配置Nginx

现在需要配置Nginx以便为Vue项目提供服务。配置文件通常位于/etc/nginx/nginx.conf或/etc/nginx/sites-available/目录下。

3.1 创建Nginx配置文件

可以在/etc/nginx/sites-available/目录下创建一个新的配置文件。例如，创建my-vue-app配置文件：

sudo nano /etc/nginx/sites-available/my-vue-app

在这个文件中，添加以下内容：

server {
    listen 80;
    server_name your_domain_or_ip;

    root /var/www/my-vue-app/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot|otf)$ {
        expires max;
        log_not_found off;
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}

上述配置内容解释如下：

• listen 80;：指定服务器监听80端口。
• server_name your_domain_or_ip;：将your_domain_or_ip替换为你的域名或IP地址。
• root /var/www/my-vue-app/dist;：指定静态文件的根目录，这里设置为你之前打包的dist文件夹路径。
• index index.html;：指定默认加载的文件。
• location / { try_files $uri $uri/ /index.html; }：该部分确保了Vue的路由能够正确工作。Nginx将尝试加载请求的文件，如果找不到，将始终返回index.html，以便由Vue路由处理。
• location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot|otf)$ { expires max; log_not_found off; }：该部分用于设置静态资源的缓存，提高加载速度。

3.2 启用配置文件

保存并关闭文件后，需要创建一个符号链接使配置文件生效：

sudo ln -s /etc/nginx/sites-available/my-vue-app /etc/nginx/sites-enabled/

3.3 测试并重启Nginx

在启用新的配置之前，建议测试Nginx配置文件的语法是否正确：

sudo nginx -t

如果语法无误，重启Nginx以应用配置：

sudo systemctl restart nginx

4. 部署Vue项目

4.1 将打包文件上传到服务器

通过SFTP、SCP或其他文件传输工具，将dist文件夹上传到服务器上。建议将文件夹放在/var/www/my-vue-app/目录下：

scp -r dist/ user@your_server_ip:/var/www/my-vue-app/

4.2 设置文件权限

确保Nginx对项目文件有读取权限：

sudo chown -R www-data:www-data /var/www/my-vue-app
sudo chmod -R 755 /var/www/my-vue-app

5. 配置SSL（可选）

如果你需要为网站配置SSL（推荐使用HTTPS），可以通过Let’s Encrypt免费获取SSL证书并配置在Nginx上。

5.1 安装Certbot

Certbot是一个方便获取Let’s Encrypt SSL证书的工具。

sudo apt-get install certbot python-certbot-nginx

5.2 获取证书并配置Nginx

运行以下命令获取SSL证书并自动配置Nginx：

sudo certbot --nginx -d your_domain_or_ip

Certbot将会生成SSL证书，并修改Nginx配置文件使其使用HTTPS。

5.3 自动更新证书

Let’s Encrypt的证书有效期为90天，因此建议设置自动更新。可以通过添加定时任务来实现：

echo "0 3 * * * /usr/bin/certbot renew --quiet" | sudo tee -a /etc/crontab > /dev/null

这个任务会在每天凌晨3点运行Certbot以更新证书。

6. 测试部署

最后，打开浏览器，访问你的域名或IP地址，检查是否能够正确加载你的Vue项目。检查控制台和网络请求，确保所有静态资源加载正常，没有错误。

如果遇到404错误或其他问题，检查Nginx配置中的try_files指令，确保它指向index.html，以便由Vue处理路由。

7. 总结

通过以上步骤，你可以在Nginx服务器上成功部署Vue项目。这个过程包括打包Vue项目、配置Nginx、部署和测试等关键环节。Nginx作为一个高性能的Web服务器，能够高效地服务于前端应用，结合SSL配置，还能为你的用户提供安全的访问环境。

结尾

今天这篇文章就到这里了，大厦之成，非一木之材也；大海之阔，非一流之归也。感谢大家观看本文