Nginx部署前端项目完整教程

教程简介

本教程将详细介绍如何使用Nginx作为Web服务器来部署前端项目。Nginx是一个高性能的HTTP和反向代理服务器，以其稳定性、丰富的功能集、简单的配置和低资源消耗而闻名。

通过学习本教程，您将掌握从Nginx安装配置到前端项目部署的完整流程，包括HTTPS配置、性能优化、缓存设置等高级技巧。

本教程适合有一定Linux基础的前端开发人员，所有操作均在Ubuntu 20.04 LTS环境下测试通过。

你将学到

Nginx的安装与基本配置
前端项目的部署流程
HTTPS安全配置
性能优化技巧
常见问题解决方案

部署步骤

1

安装Nginx

sudo apt update
sudo apt install nginx

更新软件包列表并安装Nginx服务器。

2

配置项目

sudo mkdir -p /var/www/your_project
sudo chown -R $USER:$USER /var/www/your_project

创建项目目录并设置权限。

3

Nginx配置

sudo nano /etc/nginx/sites-available/your_project

创建Nginx配置文件。

4

启用配置

sudo ln -s /etc/nginx/sites-available/your_project /etc/nginx/sites-enabled/

创建符号链接启用配置。

5

测试配置

sudo nginx -t
sudo systemctl restart nginx

测试配置并重启Nginx。

6

部署项目

npm run build
cp -r dist/* /var/www/your_project/

构建项目并复制到部署目录。

Nginx配置详解

基本配置示例

server {
    listen 80;
    server_name your_domain.com www.your_domain.com;

    root /var/www/your_project;
    index index.html;

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

    location /api {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
    }
}

配置说明

listen: 指定Nginx监听的端口
server_name: 指定服务器域名
root: 项目文件根目录
index: 默认访问文件

高级配置

try_files: 处理前端路由
location /api: 代理后端API
gzip: 启用压缩提高性能
缓存控制: 优化静态资源加载

HTTPS配置

server {
    listen 443 ssl;
    server_name your_domain.com www.your_domain.com;

    ssl_certificate /etc/letsencrypt/live/your_domain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/your_domain.com/privkey.pem;

    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers on;
    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:...;

    root /var/www/your_project;
    index index.html;

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

server {
    listen 80;
    server_name your_domain.com www.your_domain.com;
    return 301 https://$host$request_uri;
}

使用Let's Encrypt可以免费获取SSL证书，运行sudo certbot --nginx -d your_domain.com -d www.your_domain.com自动配置HTTPS。

常见问题与解决方案

403 Forbidden错误

当访问网站时出现403 Forbidden错误，通常是由于权限问题导致的。

解决方案：

检查Nginx用户是否有项目目录的读取权限
确保index文件存在且命名正确
检查SELinux或AppArmor是否阻止了访问

前端路由刷新404

使用前端路由框架(如React Router, Vue Router)时，刷新页面出现404错误。

解决方案：

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

在Nginx配置中添加上述代码，将所有路由请求重定向到index.html。

静态资源加载失败

页面可以打开，但CSS、JS或图片等静态资源无法加载。

解决方案：

检查资源路径是否正确
确保Nginx有静态资源目录的读取权限
配置正确的MIME类型
检查浏览器开发者工具中的网络请求

资源下载

Nginx配置模板

包含基本配置、HTTPS配置、反向代理等常用模板。

下载模板

自动化部署脚本

一键部署脚本，自动完成Nginx安装、配置和项目部署。

下载脚本

Nginx性能优化指南

详细讲解如何优化Nginx配置以提高网站性能。

下载指南

常见问题解答

在Nginx配置中添加以下代理设置：

location /ws/ {
    proxy_pass http://backend;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
}

目录导航

Nginx部署前端项目完整教程

预览结果：