36 --＞ OpenWRT 移植 nginx、 测试 Vue 前端打包项目的实践

本篇记录 nginx 移植到 OpenWRT 19.07 中，配置nginx参数，运行 Vue 前端打包项目的实践过程。

移植 nginx

make menuconfig
搜索 nginx 关键词，把nginx相关服务都选择上，本次实践选择如下：

Network —>
Web Servers/Proxies —>
<> nginx-all-module… Nginx web server with ALL module selected
-- nginx-mod-luci… Support file for Nginx

编译 系统后，烧入至目标路由器上。

配置 /etc/nginx/nginx.conf 内容如下

user  root;
worker_processes auto;
worker_cpu_affinity auto;

error_log  /home/wwwlogs/nginx_error.log  crit;

pid        /var/run/nginx.pid;

#Specifies the value for maximum file descriptors that can be opened by this process.
worker_rlimit_nofile 1024;

events
    {
        use epoll;
        worker_connections 1024;
        multi_accept off;
        accept_mutex off;
    }

http
    {
        include       mime.types;
        default_type  application/octet-stream;

        server_names_hash_bucket_size 128;
        client_header_buffer_size 32k;
        large_client_header_buffers 4 32k;
        client_max_body_size 50m;

        sendfile on;
        sendfile_max_chunk 512k;
        tcp_nopush on;
        keepalive_timeout 60;
        tcp_nodelay on;

        fastcgi_connect_timeout 300;
        fastcgi_send_timeout 300;
        fastcgi_read_timeout 300;
        fastcgi_buffer_size 64k;
        fastcgi_buffers 4 64k;
        fastcgi_busy_buffers_size 128k;
        fastcgi_temp_file_write_size 256k;

        gzip on;
        gzip_min_length  1k;
        gzip_buffers     4 16k;
		gzip_http_version 1.1;
        gzip_comp_level 2;
        gzip_types text/plain application/javascript application/\
              x-javascript text/javascript text/css application/xml application/xml+rss;
        gzip_vary on;
        gzip_proxied   expired no-cache no-store private auth;
        gzip_disable   "MSIE [1-6]\.";

        #limit_conn_zone $binary_remote_addr zone=perip:10m;
        ##If enable limit_conn_zone,add "limit_conn perip 10;" to server section.
        server_tokens off;
        access_log off;

server
    {
        listen 8009 default_server reuseport;
        server_name crm;
        index index.html index.htm index.php;
        root  /home/wwwroot/crm-vue/dist;
        #root /root/dist;
        try_files $uri $uri/ /index.html;

        location /api/ {
            proxy_pass http://192.168.62.110:8080;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Real-Port $remote_port;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }
        access_log  /home/wwwlogs/access.log;
    }

include vhost/*.conf;
}

配置 openWRT 路由器端口转发功能

wan 口端口范围: 1 ~ 65535
转至本地桥接地址: 192.168.1.1
转至本地端口：8009

至此就可以通过路由器的 wan ip地址，方法 vue 前端内容,如下图：