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 备份与恢复
为防止数据丢失和系统故障，定期对项目文件和数据库进行备份，并确保能够快速恢复。
- 备份策略：制定备份计划，包括备份频率、备份存储位置和备份数据的保留时间。
- 恢复演练：定期进行数据恢复演练，验证备份数据的有效性和恢复流程的可行性。
总结
到此这篇关于Nginx部署前端vue项目的文章就介绍到这了,更多相关Nginx部署前端vue项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！