Appearance
Nginx 入门
Docker 安装 Nginx
拉取镜像
bash
docker pull nginx
创建文件和文件夹
提示
用于配置 Nginx 的配置文件
bash
mkdir -p /data/app/nginx/conf.d
mkdir -p /data/app/logs
mkdir -p /data/app/html
touch /data/app/nginx/conf.d/default.conf
touch /data/app/nginx/nginx.conf
touch /data/app/html/index.html
chmod -R 777 /data/app
conf.d/default.conf的配置
nginx
server {
listen 80;
listen [::]:80;
server_name localhost;
#access_log /var/log/nginx/host.access.log main;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
nginx.conf的配置
nginx
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log notice;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
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;
keepalive_timeout 65;
#gzip on;
include /etc/nginx/conf.d/*.conf;
}
用于vue
单页面应用的nginx.conf
配置
nginx
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log notice;
pid /var/run/nginx.pid;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
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;
keepalive_timeout 65;
#gzip on;
server {
listen 80;
listen [::]:80;
server_name localhost;
#access_log /var/log/nginx/host.access.log main;
# vue 页面刷新报503
location @router {
rewrite ^.*$ /index.html last;
}
location / {
root /usr/share/nginx/html;
index index.html index.htm;
# vue 页面刷新报503
try_files $uri $uri/ @router;
}
# 这里写的是ip地址,一定要开放端口,否则访问502
# firewall-cmd --permanent --add-port=8500/tcp
# firewall-cmd --reload
# 或者把nginx加入网络,然后直接写后端服务的容器名就可以了
location ^~ /prod-api/ {
# 可以写ip对应外部端口,也可以写容器名+容器内端口
proxy_pass http://ruoyi_vue:8080/;
# 代理转发正确的请求头
proxy_redirect off;
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_buffer_size 4k;
proxy_buffers 4 32k;
proxy_busy_buffers_size 64k;
proxy_connect_timeout 90;
}
}
include /etc/nginx/conf.d/*.conf;
}
html/index.html内容
用于占位,如果无index.html,刷新页面会报502
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>测试页面</title>
</head>
<body>
<h1>测试页面</h1>
</body>
</html>
创建容器
bash
docker run -d --net bridge --privileged=true -p 9001:80 \
--name app \
-v /data/app/html:/usr/share/nginx/html \
-v /data/app/nginx/nginx.conf:/etc/nginx/nginx.conf \
-v /data/app/nginx/conf.d:/etc/nginx/conf.d \
-v /data/app/logs:/var/log/nginx \
nginx
跨域配置
nginx
location / {
# 其他配置...
# 允许跨域请求的域名,* 表示允许所有域名
add_header 'Access-Control-Allow-Origin' '*';
# 允许的方法,如GET, POST, OPTIONS, PUT, DELETE
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
# 允许携带认证信息的请求,允许的域是*的时候,携带认证信息会导致跨域失效,这是csrf的最后一道防线
# add_header 'Access-Control-Allow-Credentials' 'true';
# 允许的头信息字段
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
# 跨域请求预检的缓存时间
add_header 'Access-Control-Max-Age' 1728000;
# 如果需要,可以手动处理OPTIONS请求
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
add_header 'Content-Type' 'text/plain charset=UTF-8';
add_header 'Content-Length' 0;
return 204;
}
# 其他配置...
}