前端只会写业务，不会nginx部署和提高性能？Trae老师来教教

前言

作为一个天天只写业务的前端攻城狮，还不知道怎么部署前端项目，部署之后怎么性能优化也不知道，只知道压缩打包的体积，这样就是全部优化手段了？

nginx是不是听着很耳熟，很高级的一个东西，是不是还不知道怎么安装使用？

今天就让Trae来教教怎么安装部署，以及优化前端性能吧~

首先先让Trae帮我输出一份配置来看看，这样的前端优化是不是合理的

性能优化配置，适用于静态网站前端

gzip压缩，常见的体积压缩，会有优雅降级，不支持gzip的浏览器会请求对应的html、css、js文件，不至于访问不了浏览器

js 复制代码

gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_types
        text/plain
        text/css
        text/xml
        text/javascript
        application/javascript
        application/xml+rss
        application/json;

缓存配置，对应的静态资源配置时效性，保证浏览器在时间内会走缓存，不至于每次都请求服务器，导致加载速度缓慢

js 复制代码

map $sent_http_content_type $expires {
        default 1M;
        text/html 1h;
        text/css 1M;
        application/javascript 1M;
        ~image/ 1M;
        ~font/ 1M;
    }

安全请求头也不要忘记配置

js 复制代码

    # 安全头配置
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header X-XSS-Protection "1; mode=block" always;
    add_header Referrer-Policy "strict-origin-when-cross-origin" always;

server是配置服务，配置服务器的根目录，可以在根目录新增文件夹，然后在域名后面添加上新增的文件夹就可以访问到对应的网页

js 复制代码

 server {
        listen 80;
        listen [::]:80;
        server_name localhost;
        
        # 根目录配置
        root /usr/share/nginx/html;
        index index.html index.htm;
    }

静态资源优化

js 复制代码

location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
            expires 1M;
            add_header Cache-Control "public, immutable";
            add_header Vary Accept-Encoding;
        }

api代理，前端的跨域也可以通过这种方式来解决，也是主流的解决方式

js 复制代码

location /api/ {
            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;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            proxy_cache_bypass $http_upgrade;
        }

ssl证书配置，如果没有这个，你的服务器就相当于是在裸奔，知道你的ip就可以轻松攻击你的服务器

js 复制代码

server {
        listen 443 ssl http2;
        listen [::]:443 ssl http2;
        server_name localhost;
        
        ssl_certificate /etc/nginx/ssl/cert.pem;
        ssl_certificate_key /etc/nginx/ssl/key.pem;
        ssl_protocols TLSv1.2 TLSv1.3;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384;
        ssl_prefer_server_ciphers off;
        ssl_session_cache shared:SSL:10m;
        ssl_session_timeout 10m;
        
        include /etc/nginx/conf.d/default.conf;
    }

现在的腾讯云和阿里云的免费域名都是3个月有时效性，到期就得手动更换，如果你不想麻烦，可以去github搜索开源项目，可以自动续签域名，让你一劳永逸，不在为域名过期而烦恼，以及错失成交的机会

总结

前端的优化手段，很大一部分都可以靠nginx进行优化，有时候前端工程化的webpack或vite无法再优化时，可以考虑使用nginx的配置来优化，优化方式千千万，适合自己的才是真理，切记不要盲目优化，记得先分析是哪里出现性能瓶颈再下手优化哦

trae的优化也是很专业

Trae给出的预期也是可以达到的