全栈攻城狮

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;  
    }  
  
    # 其他配置...  
}

最后更新于: