【Nginx 】Nginx 部署前端 vue 项目

1. 项目打包

1.1 安装依赖

在项目部署之前，确保开发环境中已安装 Node.js 和 npm，这是运行 Vue 项目的基础。通过执行 npm install 命令，可以安装项目所需的所有依赖。这一步是打包流程的前提，确保了后续编译的顺利进行。

根据 npm 的官方数据，npm install命令在安装依赖时，会根据 package.json 文件中列出的依赖项进行下载和安装，这个过程通常需要联网操作，并且依赖于 npm 仓库的响应速度。在网络状况良好的情况下，安装过程可以顺利完成。

1.2 编译项目

项目依赖安装完成后，接下来需要编译 Vue 项目。编译过程是通过执行 npm run build 命令来完成的，该命令会触发 Vue CLI 中的构建脚本，将源代码转换为浏览器可以理解的静态资源。

编译过程中，Webpack 作为模块打包器，会根据配置文件 vue.config.js 中的规则，对项目中的 JavaScript、CSS、图片等资源进行打包和优化。这个过程包括代码的压缩、合并、分割等多个步骤，以确保最终生成的静态资源既高效又轻量。

根据 Vue CLI 的官方文档，编译后的资源会被放置在项目根目录下的 dist 文件夹中。这个文件夹包含了所有用于生产环境的静态文件，如 HTML、CSS、JavaScript 等。这些文件是部署到 Nginx 服务器上的核心内容。

在编译过程中，还可以通过添加环境变量来指定不同的构建环境，例如开发环境、测试环境和生产环境。这样可以确保在不同环境下构建的资源具有相应的优化和配置。

2. 安装 Nginx

2.1 Ubuntu/Debian 系统

在 Ubuntu 或 Debian 系统上安装 Nginx 通常涉及以下步骤，这些步骤可以确保用户能够快速且正确地安装 Nginx 服务器。

• 软件更新：首先，执行 sudo apt-get update 命令来更新本地软件包索引。这一步是必要的，因为它确保了在安装过程中能够获取到最新的软件包版本。
• 安装 Nginx：通过执行 sudo apt-get install nginx 命令来安装 Nginx。这个过程会自动处理依赖关系，并安装 Nginx 及其所需的所有组件。
• 启动服务：安装完成后，使用 sudo systemctl start nginx 命令启动 Nginx 服务。这是确保 Nginx 能够正常工作的第一步。
• 验证安装：为了验证 Nginx 是否正确安装和运行，可以通过访问 http://localhost 或服务器的 IP 地址来查看 Nginx 的欢迎页面。如果页面加载成功，说明 Nginx 已经成功运行。

2.2 CentOS/RHEL 系统

在 CentOS 或 RHEL 系统上安装 Nginx 的过程与 Ubuntu/Debian 略有不同，主要体现在软件包管理器的使用上。

• 软件更新：首先，执行 sudo yum update 命令来更新系统上的软件包。这一步确保了系统上的软件包列表是最新的。
• 安装 Nginx：通过执行 sudo yum install nginx 命令来安装 Nginx。这个命令会处理所有的依赖关系，并安装 Nginx 服务器。
• 启动服务：使用 sudo systemctl start nginx 命令来启动 Nginx 服务。这一步是确保 Nginx 能够响应网络请求的关键。
• 验证安装：与 Ubuntu/Debian 系统一样，可以通过访问 http://localhost 或服务器的 IP 地址来检查 Nginx 的欢迎页面。如果页面能够成功加载，这表明 Nginx 已经正确安装并运行。

在两种系统中，安装 Nginx 的过程都相对简单，主要区别在于使用的软件包管理器不同。无论是在 Ubuntu/Debian 还是 CentOS/RHEL 系统上，用户都可以遵循上述步骤来安装和验证 Nginx 服务器。

3. 配置 Nginx

3.1 创建 Nginx 配置文件

创建 Nginx 配置文件是部署 Vue 项目的关键步骤之一。以下是一个基本的配置文件示例，它定义了服务器如何响应对 Vue 应用的请求。

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; 应替换为你的域名或 IP 地址。root /var/www/my-vue-app/dist; 指定了 Vue 项目打包后的静态文件存放位置。location / 块中的 try_files 指令确保了 Vue 的前端路由能够正确工作，即使在刷新或直接访问非根路径时。

3.2 启用配置文件

启用配置文件通常涉及两个步骤：创建配置文件的符号链接，然后重新加载 Nginx 配置。

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

首先，使用 ln -s 创建一个符号链接，将你的配置文件链接到 sites-enabled 目录。接着，使用 nginx -t 测试配置文件是否有语法错误。如果没有错误，使用 systemctl restart nginx 命令重启 Nginx 服务以应用新的配置。

3.3 测试并重启 Nginx

在应用了新的 Nginx 配置之后，需要进行测试以确保一切正常工作。这包括访问 Vue 应用的主页，以及尝试访问应用中的各个路由，确保它们都能正确加载。

• 访问应用：在浏览器中输入 http://your_domain_or_ip，检查 Vue 应用是否能够正确加载。
• 检查路由：尝试访问应用的不同路由，确保前端路由跳转能够正常工作。
• 查看日志：如果遇到问题，查看 Nginx 的错误日志可以提供有用的信息。日志文件通常位于 /var/log/nginx/error.log。

如果一切正常，你的 Vue 应用现在应该已经成功部署在 Nginx 服务器上了。如果遇到问题，仔细检查配置文件中的指令，确保没有遗漏或错误。

4. 部署 Vue 项目

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

将 Vue 项目打包后生成的 dist 目录上传至服务器是部署过程中的关键步骤。根据服务器的操作系统和配置，可以使用多种方法进行上传。

• 使用 scp 或sftp：这些是 Linux 系统常用的文件传输协议，可以安全地将文件从本地传输到远程服务器。例如，使用 scp -r dist/ username@server_ip:/path/to/remote/ 命令。
• 使用rsync：该工具可以同步文件和目录，并且可以保留文件的权限和时间戳，适合于增量备份和镜像。命令示例：rsync -avz --progress dist/ username@server_ip:/path/to/remote/.
• 使用 FTP 客户端：如 FileZilla 等，这些工具提供了图形界面，使得文件传输更加直观和便捷。

一旦文件上传完成，需要确保 Nginx 可以正确地读取和提供这些文件。这通常意味着需要将文件上传到 Nginx 配置中指定的 root 目录。

4.2 设置文件权限

在 Linux 系统中，文件权限对于服务器的运行至关重要。Nginx 服务通常以非 root 用户运行，因此需要确保该用户有权访问和提供 Vue 项目文件。

• 使用 chown 命令更改文件的所有者，例如：sudo chown -R www-data:www-data /path/to/dist/，这里 www-data 是 Nginx 进程通常运行的用户名，这可能因安装而异。
• 使用 chmod 命令设置适当的文件权限，以确保 Nginx 可以读取文件。通常，755（读、执行权限）是目录的推荐权限，而644（读、写权限）是文件的推荐权限。命令示例：sudo chmod -R 755 /path/to/dist/。
• 验证权限设置：使用 ls -l /path/to/dist/ 命令检查文件和目录的权限，确保它们符合预期。

正确设置文件权限是确保 Vue 项目能够被 Nginx 正确服务的前提。权限不足可能导致文件无法读取，从而影响网站的访问。

5. 配置 SSL（可选）

5.1 安装 Certbot

Certbot 是一个开源工具，由 Let’s Encrypt 提供，用于自动化获取和续订 SSL/TLS 证书的过程。安装 Certbot 的步骤通常如下：

• 对于基于 Debian 的系统（如 Ubuntu），使用以下命令安装：

  sudo apt-get update
  sudo apt-get install certbot python-certbot-nginx
  

• 对于基于 Red Hat 的系统（如 CentOS），使用以下命令安装：

  sudo yum update
  sudo yum install certbot python-certbot-nginx
  

• 安装完成后，可以使用 Certbot 与 Nginx 集成，自动化 SSL 证书的获取和配置过程。

5.2 获取证书并配置 Nginx

使用 Certbot 获取 SSL 证书并自动配置 Nginx 的步骤如下：

• 运行 Certbot 命令，指定 Nginx 作为插件，并提供你的域名：

  sudo certbot --nginx -d your_domain_or_ip
  

• Certbot 将自动验证你的域名，获取 SSL 证书，并更新 Nginx 配置以使用证书。

• 配置文件通常更新在 /etc/nginx/sites-available/ 目录下，Certbot 会创建一个包含 SSL 配置的文件。

5.3 自动更新证书

Let’s Encrypt 证书的有效期为 90 天，因此需要定期更新。Certbot 提供了自动更新的功能：

• 设置自动更新任务，通常通过 cron 定时任务实现：

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

• 该命令会在每天凌晨 3 点运行 Certbot 以更新证书，确保 SSL 证书始终保持有效状态。

• 为了确保 Nginx 配置在证书更新后能够正确加载，可以在更新证书后重启 Nginx：

  sudo systemctl restart nginx
  

• 通过这种方式，即使在证书更新后，前端 Vue 项目也能够继续通过 HTTPS 安全地提供服务。

6. 测试部署

6.1 访问测试

部署完成后，通过访问服务器的 IP 地址或绑定的域名来测试 Vue 项目是否能够正常加载。检查页面元素、脚本和样式是否正常工作，确保没有资源加载错误。

• 浏览器兼容性：在不同的浏览器上进行测试，包括但不限于 Chrome、Firefox、Safari 和 Edge，确保前端项目在所有主流浏览器上都能正常显示和交互。
• 响应式测试：验证页面在不同设备和分辨率上的响应式布局，确保移动端和桌面端用户都能获得良好的浏览体验。

6.2 性能测试

对 Vue 项目进行性能测试，包括页面加载时间、资源加载时间、白屏时间等关键性能指标的测试。

• 性能监控工具：使用 Google Lighthouse、WebPageTest 等工具对项目进行性能评估，根据测试结果优化项目性能。
• 资源优化：根据测试结果，对项目中的图片、脚本和样式进行压缩和优化，减少 HTTP 请求次数，提高加载速度。

6.3 安全性测试

验证部署的 Vue 项目是否符合安全标准，包括但不限于跨站脚本攻击 (XSS)、跨站请求伪造(CSRF) 等常见的网络安全威胁。

• 安全审计：进行代码审计和安全漏洞扫描，确保项目中没有安全漏洞。
• HTTPS 配置：确保项目通过 HTTPS 协议提供服务，使用 SSL/TLS 证书加密数据传输，保护用户数据安全。

6.4 备份与恢复

为防止数据丢失和系统故障，定期对项目文件和数据库进行备份，并确保能够快速恢复。

• 备份策略：制定备份计划，包括备份频率、备份存储位置和备份数据的保留时间。
• 恢复演练：定期进行数据恢复演练，验证备份数据的有效性和恢复流程的可行性。