Some configuration items in the front-end domain name access page

Some configuration items in the front-end domain name access page

We generally use webpack to package and restart the server, then in general, we need to use 127.0.0.1: port number to access the page, but sometimes we need to use the domain name to access, for
example, if we want to use xd.xxx.com to access, Then we can use the reverse proxy under the apache2 that comes with the mac to solve it. The following solution:

The mac system will come with apache2, so the command enters cd /etc/apache2 and then runs the command: sudo open ./httpd.conf -a 'sublime text' Use Sublime to edit it;

The configuration is as follows:

<VirtualHost *:80>
  ServerName xd.xxxx.com
  ProxyRequests off
  Header set Access-Control-Allow-Origin *
  <Proxy *>
    Order deny,allow
    Allow from all
  </Proxy>
  <Location /bus>
    ProxyPass http://localhost:8899/
    ProxyPassReverse http://localhost:8899/
  </Location>
</VirtualHost>

When the browser domain name accesses xd.xxx.com/bus (of course, the resource file needs to be placed in the bus directory), it will reverse proxy to the local http://localhost:8899/, of course, the corresponding server must be started locally. . The port number is 8899; the
host needs to be bound as follows;

127.0.0.1 xd.xxxx.com

2. The server-side interface can also be reverse proxy: the
following configuration:

server {
  listen 443;
  listen 80;
  server_name xy.xxx.com; // Domain name of the interface
  access_log  /data/www/logs/nginx/access.log main;
  add_header Access-Control-Allow-Origin http: // xd.xxx.com; // Allowed cross-domain domain names 
  add_header Access-Control-Allow-Credentials true ;
  include nginx_xxx.conf;
  location / {
    proxy_pass http://192.168.1.212:8136;
    include nginx_proxy.conf;
  }
  error_page   500 502 503 504  /502.html;
  location = /50x.html {
    root   html;
  }
}

As above, xy.xxx.com is the domain name of the interface in the code, so we can also use the http://192.168.1.212:8136 domain name to reverse proxy, which means that the developed interface is placed on the 212 server
, but we are in During the local joint debugging, we use the xy.xxx.com domain name, which will reverse proxy to the 212 server in the development environment, http://192.168.1.212:8136;

3. Reverse proxy the front-end resources to the test environment, such as the server 212 environment.

server {
  listen 443;
  listen 80;
  server_name xd.xxx.com;   // Domain name of page access
  access_log  /data/www/logs/nginx/access.log main;
  add_header Access-Control-Allow-Origin *;
  include nginx_xxx.conf;
  location / {
    root html /xd_resources; // Path where front-end resources are stored
    index index.html;
    include nginx_proxy.conf;
  }
  location ~\.(eot|ttf| woff)$ {
    root html/xd_resources;
    add_header Access-Control-Allow-Origin *;
  }
  error_page   500 502 503 504  /502.html;
  location = /50x.html {
    root   html;
  }
}

Note: The above points 2 and 3 are configured on such as the test environment 212 server, then the host needs to be bound:

Development interface binding: 192.168.1.212 xy.xxx.com
front-end resource binding 192.168.1.212 xd.xxx.com

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325098825&siteId=291194637