Ubuntu下Nginx配置与Vue项目部署全指南-平芜编程栈

1. 项目概述

作为一名长期在Linux环境下工作的开发者，我经常需要在Ubuntu服务器上配置Nginx来部署前端项目。Nginx作为一款高性能的Web服务器和反向代理服务器，因其轻量级、高并发处理能力而广受欢迎。今天我将分享一个完整的Nginx配置流程，从安装到部署Vue项目的全过程。

这个配置方案特别适合需要快速搭建本地开发环境或生产环境的开发者。相比Apache，Nginx的内存占用更小，配置更简洁，特别适合资源有限的服务器环境。我将在Ubuntu 20.04 LTS系统上演示，但步骤同样适用于其他主流Linux发行版。

2. 环境准备与Nginx安装

2.1 系统更新与依赖检查

在开始安装前，我们需要确保系统是最新的。打开终端，执行以下命令更新软件包列表：

sudo apt update sudo apt upgrade -y

这个步骤很重要，因为过时的软件包可能会导致依赖冲突或安全漏洞。我建议在每次安装新软件前都执行这个操作，这已经成为我的工作习惯。

2.2 Nginx安装验证与安装

检查系统是否已经安装了Nginx：

nginx -v

如果看到版本号输出（如nginx version: nginx/1.18.0），说明已经安装。如果没有安装，会提示"command not found"。这时我们需要执行安装命令：

sudo apt install nginx -y

注意：使用-y参数会自动确认安装，避免交互式确认。但在生产环境中，我建议去掉这个参数，仔细查看将要安装的软件包。

安装完成后，再次验证版本：

nginx -v

3. Nginx服务管理

3.1 基本服务控制

Nginx安装后会自动启动，但我们需要掌握如何手动控制它：

# 启动Nginx服务 sudo systemctl start nginx # 设置开机自启 sudo systemctl enable nginx # 查看运行状态 sudo systemctl status nginx # 重新加载配置（不中断服务） sudo systemctl reload nginx # 完全重启服务 sudo systemctl restart nginx # 停止服务 sudo systemctl stop nginx

当执行status命令时，如果看到active (running)字样，表示服务正常运行。绿色高亮的"active"状态是我们最希望看到的。

3.2 服务状态解读

systemctl status nginx的输出包含丰富信息：

● nginx.service - A high performance web server and a reverse proxy server Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled) Active: active (running) since Tue 2023-05-16 14:28:43 UTC; 5min ago Docs: man:nginx(8) Process: 1234 ExecStart=/usr/sbin/nginx -g daemon on; master_process on; (code=exited, status=0/SUCCESS) Main PID: 1235 (nginx) Tasks: 2 (limit: 1137) Memory: 4.3M CGroup: /system.slice/nginx.service ├─1235 nginx: master process /usr/sbin/nginx -g daemon on; master_process on; └─1236 nginx: worker process

关键信息解读：

Loaded行显示服务是否开机自启（enabled）
Active行显示当前运行状态和运行时间
Main PID显示主进程ID
底部显示工作进程信息

4. 项目部署准备

4.1 创建项目目录

我们需要为项目创建专门的目录，通常放在/var/www/下：

sudo mkdir -p /var/www/test

-p参数确保父目录不存在时会自动创建。我习惯用项目名作为目录名，方便管理多个项目。

4.2 文件传输与权限设置

将开发好的Vue项目（通常是dist目录内容）复制到目标目录：

sudo cp -r /path/to/your/project/dist/* /var/www/test/

然后设置正确的所有权和权限：

sudo chown -R www-data:www-data /var/www/test sudo chmod -R 755 /var/www/test

重要提示：www-data是Nginx默认的运行用户，设置正确的用户和组权限对安全性至关重要。我曾经因为权限问题花了半天时间排查403错误。

5. Nginx站点配置

5.1 配置文件创建

Nginx的站点配置文件通常放在/etc/nginx/sites-available/目录下。我们创建一个新的配置文件：

sudo vim /etc/nginx/sites-available/test-project

如果你不熟悉vim，可以使用nano或其他你喜欢的编辑器。

5.2 配置内容详解

以下是针对Vue项目的典型配置：

server { listen 9094 default_server; listen [::]:9094 default_server; server_name _; root /var/www/test; index index.html; location / { try_files $uri $uri/ /index.html; } # 其他优化配置 sendfile on; tcp_nopush on; tcp_nodelay on; keepalive_timeout 65; types_hash_max_size 2048; # 静态文件缓存 location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ { expires 30d; add_header Cache-Control "public, no-transform"; } }

配置解析：

listen 9094：指定监听端口
default_server：将此设为默认服务器
root：项目根目录
try_files：Vue路由需要这个配置
静态文件缓存可以显著提升性能

5.3 配置启用与测试

创建符号链接启用配置：

sudo ln -s /etc/nginx/sites-available/test-project /etc/nginx/sites-enabled/

测试配置语法：

sudo nginx -t

如果看到"test is successful"字样，说明配置正确。然后重新加载Nginx：

sudo systemctl reload nginx

6. 防火墙与访问测试

6.1 防火墙配置

如果启用了UFW防火墙，需要放行我们的端口：

sudo ufw allow 9094/tcp sudo ufw enable sudo ufw status

6.2 访问测试

现在可以在浏览器访问http://服务器IP:9094查看项目。如果是在本地服务器，可以直接用：

curl http://localhost:9094

7. 常见问题排查

7.1 403 Forbidden错误

这是最常见的权限问题，检查：

目录权限是否正确
Nginx用户是否有访问权限
SELinux是否阻止访问（如果是CentOS）

7.2 502 Bad Gateway

通常是因为后端服务没有运行或配置错误。检查：

后端服务是否启动
代理配置是否正确
端口是否冲突

7.3 404 Not Found

检查：

文件路径是否正确
文件权限是否足够
index文件是否存在

8. 性能优化建议

8.1 启用Gzip压缩

在/etc/nginx/nginx.conf中添加：

gzip on; gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; gzip_min_length 1000; gzip_comp_level 6;

8.2 调整工作进程

根据CPU核心数调整：

worker_processes auto; events { worker_connections 1024; }

8.3 静态资源缓存

如前面配置所示，为静态文件设置长期缓存可以显著提升性能。

9. 日志查看与分析

Nginx日志位于/var/log/nginx/目录：

access.log：访问日志
error.log：错误日志

查看实时日志：

sudo tail -f /var/log/nginx/access.log sudo tail -f /var/log/nginx/error.log

日志分析工具推荐：

GoAccess：实时日志分析
AWStats：详细统计报告

10. 安全加固措施

10.1 隐藏Nginx版本号

在nginx.conf中添加：

server_tokens off;

10.2 限制HTTP方法

只允许必要的HTTP方法：

if ($request_method !~ ^(GET|HEAD|POST)$ ) { return 405; }

10.3 防止目录遍历

禁用目录列表：

autoindex off;

10.4 SSL/TLS配置

如果使用HTTPS，推荐配置：

ssl_protocols TLSv1.2 TLSv1.3; ssl_prefer_server_ciphers on; ssl_ciphers 'ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384...'; ssl_session_timeout 1d; ssl_session_cache shared:SSL:50m;

11. 多站点配置

如果需要配置多个站点，只需重复上述步骤，注意：

使用不同的端口或域名
为每个站点创建单独的配置文件
确保没有端口冲突

例如，第二个站点可以配置在9095端口：

server { listen 9095; server_name _; root /var/www/project2; # 其他配置... }

12. 自动化部署脚本

为了简化重复工作，我通常会准备一个部署脚本deploy.sh：

#!/bin/bash # 更新系统 sudo apt update && sudo apt upgrade -y # 安装Nginx sudo apt install nginx -y # 创建项目目录 sudo mkdir -p /var/www/$1 sudo chown -R www-data:www-data /var/www/$1 sudo chmod -R 755 /var/www/$1 # 创建Nginx配置 sudo tee /etc/nginx/sites-available/$1 <<EOF server { listen $2 default_server; listen [::]:$2 default_server; server_name _; root /var/www/$1; index index.html; location / { try_files \$uri \$uri/ /index.html; } } EOF # 启用配置 sudo ln -s /etc/nginx/sites-available/$1 /etc/nginx/sites-enabled/ sudo nginx -t sudo systemctl reload nginx # 防火墙 sudo ufw allow $2/tcp echo "部署完成！访问地址: http://服务器IP:$2"

使用方法：

chmod +x deploy.sh ./deploy.sh 项目名 端口号

13. 容器化部署方案

对于更复杂的项目，我推荐使用Docker部署。创建一个Dockerfile：

FROM nginx:alpine COPY dist/ /usr/share/nginx/html COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 80

对应的nginx.conf:

server { listen 80; server_name _; root /usr/share/nginx/html; index index.html; location / { try_files $uri $uri/ /index.html; } }

构建并运行：

docker build -t my-vue-app . docker run -d -p 9094:80 my-vue-app

14. 监控与维护

14.1 资源监控

使用以下命令监控Nginx资源使用情况：

top -p $(pgrep nginx | tr '\n' ',' | sed 's/,$//')

14.2 日志轮转

Nginx默认配置了日志轮转，配置文件在/etc/logrotate.d/nginx。可以自定义设置：

/var/log/nginx/*.log { daily missingok rotate 14 compress delaycompress notifempty create 0640 www-data adm sharedscripts postrotate if [ -f /var/run/nginx.pid ]; then kill -USR1 `cat /var/run/nginx.pid` fi endscript }

15. 备份与恢复

15.1 配置备份

定期备份Nginx配置：

sudo tar -czvf nginx-backup-$(date +%Y%m%d).tar.gz /etc/nginx

15.2 项目备份

备份项目文件：

sudo tar -czvf project-backup-$(date +%Y%m%d).tar.gz /var/www/test

15.3 恢复流程

如果需要恢复：

sudo tar -xzvf nginx-backup-20230516.tar.gz -C / sudo systemctl restart nginx

16. 进阶配置技巧

16.1 负载均衡配置

如果有多个后端服务，可以配置负载均衡：

upstream backend { server 127.0.0.1:8080; server 127.0.0.1:8081; } server { location / { proxy_pass http://backend; } }

16.2 HTTP/2启用

在SSL配置后添加：

listen 443 ssl http2; listen [::]:443 ssl http2;

16.3 缓存代理配置

对于API代理，可以添加缓存：

proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=my_cache:10m inactive=60m; location /api/ { proxy_cache my_cache; proxy_pass http://backend; }

17. 性能测试与调优

17.1 压力测试工具

使用ab(Apache Benchmark)进行测试：

ab -n 1000 -c 100 http://localhost:9094/

17.2 关键参数调优

在nginx.conf中调整：

worker_processes auto; worker_rlimit_nofile 100000; events { worker_connections 4000; multi_accept on; use epoll; } http { open_file_cache max=200000 inactive=20s; open_file_cache_valid 30s; open_file_cache_min_uses 2; open_file_cache_errors on; }

18. 故障排查手册

18.1 服务无法启动

检查步骤：

查看错误日志：sudo tail -n 50 /var/log/nginx/error.log
检查端口冲突：sudo netstat -tulnp | grep :9094
检查配置语法：sudo nginx -t

18.2 高负载问题

排查方法：

查看当前连接数：sudo netstat -anp | grep nginx | wc -l
检查系统资源：htop或glances
优化配置参数（见17.2节）

18.3 SSL证书问题

常见错误：

证书路径错误
证书链不完整
私钥不匹配

验证命令：

openssl x509 -in /path/to/cert.pem -text -noout openssl rsa -in /path/to/key.pem -check

19. 版本升级指南

19.1 备份现有配置

sudo cp -r /etc/nginx /etc/nginx-backup

19.2 添加官方仓库

对于Ubuntu：

sudo add-apt-repository ppa:nginx/stable sudo apt update

19.3 执行升级

sudo apt install --only-upgrade nginx

19.4 验证升级

nginx -v sudo systemctl restart nginx

20. 最佳实践总结

经过多年的Nginx使用经验，我总结了以下最佳实践：

目录结构清晰：保持/etc/nginx/目录结构整洁，使用sites-available和sites-enabled管理站点
最小权限原则：严格限制文件和目录权限
配置模块化：将重复配置提取到单独文件中，用include引入
日志分离：不同站点使用不同的访问日志
定期更新：保持Nginx和系统处于最新版本
监控报警：设置基本的资源监控和报警机制
文档记录：为每个自定义配置添加注释说明

最后，建议将常用配置保存为模板，这样在新项目部署时可以节省大量时间。我通常会维护一个配置模板库，包含各种场景下的Nginx配置，如静态站点、Vue/React项目、负载均衡、反向代理等。