Laravel Inertia.js React SSR Vite Nginx Gzip 配置

Question

今天我正在努力优化我的网页以正确使用 Inertia SSR 和 Gzip 从如何更改 Vite 配置到 Nginx 配置应该如何。 现在我喜欢在这里分享配置 所以你们可以纠正我并根据需要使用我的配置！

Answer 1

首先，请确保您已完成 SSR Inertia 文档指南

安装压缩lib 纱线添加 vite-plugin-compression

Vite配置

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
import viteCompression from 'vite-plugin-compression';
import { resolve } from 'path';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.jsx',
            ssr: 'resources/js/ssr.jsx',
            refresh: true,
        }),
        react(),
        viteCompression({
            algorithm: 'gzip',
            ext: '.gz',
            threshold: 10240,
            deleteOriginFile: false,
        })
    ],
    define: {
        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    },
    resolve: {
        alias: {
            '@': resolve(__dirname, 'resources/js'),
            ziggy: resolve('vendor/tightenco/ziggy/dist'),
        },
    },
});

然后这是我网站的 Nginx 配置 请注意，gzip 已经在我使用的主 nginx conf (nginx.conf) 中了

gzip on;

这是我在“sites-available/MYSITE.com”中的站点配置

gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_http_version 1.1;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+>

gzip_static on;

map $uri $gzip_extension {
    ~*\.css$ .css.gz;
    ~*\.js$ .js.gz;
}

server {
    server_name YOURDOMAIN.com;
    root /var/www/PROJECT_FOLDER_NAME/public;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-Content-Type-Options "nosniff";

    index index.php;

    charset utf-8;

    location / {
        try_files $uri$gzip_extension $uri $uri/ /index.php?$query_string;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    location ^~ /build/ {
        expires max;
        add_header Cache-Control "public, max-age=31536000, immutable";
        try_files $uri$gzip_extension $uri =404;
    }

    error_page 404 /index.php;

    location ~ \.php$ {
        fastcgi_pass unix:/var/run/php/php8.3-fpm.sock;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
        fastcgi_hide_header X-Powered-By;
    }


    location ~ /\.(?!well-known).* {
        deny all;
    }

    location /webhook {
     alias /var/www/PROJECT_FOLDER_NAME/webhook.php;
     include fastcgi_params;
     fastcgi_param SCRIPT_FILENAME $document_root/webhook.php;
     fastcgi_pass unix:/var/run/php/php8.3-fpm.sock;
    }


    location /ssr {
        proxy_pass http://127.0.0.1:INERIA_SSR_RUNNING_PORT;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        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;

    }

    listen [::]:443 ssl ipv6only=on;
    listen 443 ssl;
    ssl_certificate /etc/letsencrypt/live/YOURDOMAIN/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/YOURDOMAIN/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

}
server {
    if ($host = YOURDOMAIN.com) {
        return 301 https://$host$request_uri;
    }


    listen 80;
    listen [::]:80;
    server_name YOURDOMAIN.com;
    return 404;
}

使用 Pm2 保持 Inertia SSR 在特定端口 (INERIA_SSR_RUNNING_PORT) 上运行 你需要在你的服务器上安装pm2