企业官网建设流程全解析

使用的系统是 centos(腾讯云服务器)

1. 含域名的nginx.conf

这个配置我用了很久，直到域名过期：

# For more information on configuration, see:# * Official English Documentation: http://nginx.org/en/docs/# * Official Russian Documentation: http://nginx.org/ru/docs/user nginx;worker_processes auto;error_log /var/log/nginx/error.log;pid /run/nginx.pid;# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.include /usr/share/nginx/modules/*.conf;events{worker_connections1024;}http{log_format main'$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_referer" ''"$http_user_agent" "$http_x_forwarded_for"';access_log /var/log/nginx/access.log main;sendfile on;tcp_nopush on;tcp_nodelay on;keepalive_timeout65;types_hash_max_size4096;include /etc/nginx/mime.types;default_type application/octet-stream;# Load modular configuration files from the /etc/nginx/conf.d directory.# See http://nginx.org/en/docs/ngx_core_module.html#includeserver{# 监听端口# 域名server_name onlyhuahua.online www.onlyhuahua.online;# 跨域配置add_header'Access-Control-Allow-Origin''*';add_header'Access-Control-Allow-Methods''GET, POST, OPTIONS';add_header'Access-Control-Allow-Headers''DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';# 定义请求处理位置块location /{# 网站根目录root /var/www/html/dist;# 索引文件index index.html index.htm;try_files$uri$uri/ /index.html;}location /api/{# 反向代理到后端 APIproxy_pass http://162.14.103.12:1020/api/;# 配置代理头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;}# 错误页面处理error_page500502503504/50x.html;location=/50x.html{root /usr/share/nginx/html;}# https 需要配置证书到服务器，并管理证书listen443ssl;# managed by Certbotssl_certificate /etc/letsencrypt/live/onlyhuahua.online-0001/fullchain.pem;# managed by Certbotssl_certificate_key /etc/letsencrypt/live/onlyhuahua.online-0001/privkey.pem;# managed by Certbotinclude /etc/letsencrypt/options-ssl-nginx.conf;# managed by Certbotssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;# managed by Certbot}server{if($host=www.onlyhuahua.online){return301https://$host$request_uri;}# managed by Certbotif($host=onlyhuahua.online){return301https://$host$request_uri;}# managed by Certbotlisten80;server_name onlyhuahua.online www.onlyhuahua.online;return404;# managed by Certbot}}

2. 不含域名 nginx.conf

user nginx;worker_processes auto;error_log /var/log/nginx/error.log;pid /run/nginx.pid;events{worker_connections1024;}http{log_format main'$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_referer" ''"$http_user_agent" "$http_x_forwarded_for"';access_log /var/log/nginx/access.log main;sendfile on;tcp_nopush on;tcp_nodelay on;keepalive_timeout65;types_hash_max_size4096;include /etc/nginx/mime.types;default_type application/octet-stream;server{listen80;server_name _;# 跨域 always，4xx/5xx响应也带上跨域头add_header'Access-Control-Allow-Origin''*'always;add_header'Access-Control-Allow-Methods''GET, POST, OPTIONS'always;add_header'Access-Control-Allow-Headers''DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization'always;# OPTIONS预检请求直接返回204，不代理到后端if($request_method='OPTIONS'){return204;}location /{root /var/www/html/dist;index index.html index.htm;try_files$uri$uri/ /index.html;}location /api/{proxy_pass http://162.14.103.12:1020/api/;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;}error_page500502503504/50x.html;location=/50x.html{root /usr/share/nginx/html;}}}

3. 前端写法

log.js

importaxiosfrom'axios';// 这里用相对路径，nginx.conf中配置了路径的转发 location /api/constbaseURL='/api';constservice=axios.create({baseURL:baseURL,timeout:5000// 请求超时时间});exportconstgetLog=()=>{returnservice.get('/getLog');};exportconstgetLogStr=()=>{returnservice.get('/getLogStr');};exportconstwriteLog=(data)=>{returnservice.post('/writeLog',data);};exportconstdeleteLog=(id)=>{returnservice.post('/delLog',null,{params:{id:id}});};