说明一下:我是使用域名转发访问的,访问流程如下:
浏览器 =》 服务器1 =》 服务器2
由于服务器1已经为 https 的访问方式做了 ssl 证书等相关配置,然后转发到服务器2, 所以在服务器2中不需要再配置 ssl 证书相关的东西了,就和配置 http 的方式一样就行。
我使用 https://abc.tyler.com/xxx 访问前端项目, 我的 nginx 配置如下:
user root;
worker_processes auto;events {worker_connections 1024;
}http {include mime.types;default_type application/octet-stream;sendfile off;tcp_nopush on;server_tokens off;keepalive_timeout 65;client_max_body_size 1000m;client_header_buffer_size 512k;large_client_header_buffers 4 512k;server {listen 80;server_name abc.tyler.com;# server_name 10.188.17.26;gzip on;gzip_min_length 1k;gzip_buffers 4 16k;gzip_comp_level 6;gzip_vary on;gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;#charset koi8-r;#access_log logs/host.access.log main;location /xxx{add_header X-Frame-Options "SAMEORIGIN";add_header Cache-Control "no-cache";root html/dist;index index.html;try_files $uri $uri/ /index.html;}location /static/ {alias html/dist/static/;}# 后端接口以 /aaa/bbb/ 开头,代理到后端接口location /aaa/bbb/ { proxy_pass http://10.188.17.26:8090;}}
}
注意这段配置:
location /static/ {alias html/dist/static/;}
一开始我没有配,然后在浏览器控制台查看到访问静态资源报 404,
后来才发现我在服务器1中配置了静态资源去掉了前缀 /xxx 访问,所以要在 nginx 配置中处理一下静态资源的访问。
不过这样配置是不够的,还需要看看代码中是否是相应的前缀才行。
首先这个 webpack 中的 publicPath 很关键,我这里直接配置的是 " / "
然后在 App.jsx 文件中的路由配置很重要:这里的 basename 一定要和nginx 配置中的 /xxx 匹配上,否则将加载页面失败。
最后就是代码中用到这个前缀的地方也需要确保是一样的,比如这里进行跳转,需要确保以 /xxx 开头
上面这些都正确的话,应该就能够通过域名前缀正确访问到前端项目了。