所以我的反应SPA有问题。我使用create-react-app
创建它,所有构建的文件(包括index.html,所有js,css和图像)都收集在build
文件夹中。
服务器分为两部分。
首先是nginx网络服务器。
server {
listen 443 ssl ;
server_name beta.frpgame.ru;
ssl_certificate /etc/letsencrypt/live/frpgame.ru/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/frpgame.ru/privkey.pem;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
ssl_ciphers 'EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH';
access_log /home/malkav/demiurge/client/logs/access.log;
error_log /home/malkav/demiurge/client/logs/error.log;
location / {
proxy_pass http://localhost:5000;
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;
}
}
server {
listen 80;
server_name beta.frpgame.ru;
rewrite ^/(.*) https://beta.frpgame.ru/$1 permanent;
}
第二个是ExpressJS
服务器代理的nginx
服务器。
const express = require('express');
const path = require('path');
const compression = require('compression');
const port = process.env.NODE_PORT || 5000;
const app = express();
app.use(compression());
app.use(express.static(path.join(__dirname, 'build')));
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(port);
console.log('App is listening on port ' + port);
当您在浏览器中加载网站(列出主机名)时,它看起来很正常,图像和脚本按预期工作。但是在第一次加载和新部署之后,可能需要2或3次尝试。我相信这是因为服务器上的静态文件由于某种原因无法通过直接链接访问。如果您尝试加载image或css / js文件,您将获得index.html
。
我已经尝试过使用server.js
中的行顺序进行模拟,但几乎没有结果。改为app.get('/' ...
也不会改变任何事情。
我最终切换到纯NGINX设置并完全删除了节点服务器。一旦我到SSR,我需要把它拿回来,但这将是另一个故事。