(1) Install nginx and place the build package
// 使用brew安装nginx
brew install nginx
// 查看nginx的配置信息
brew info nginx
Take me as an example:
open the folder and see the html file, click it to enter the place where we put the compressed package.
(2) nginx.conf file configuration
The location of the nginx.conf file is as follows:
The following takes the shadow device project as an example. The content configuration of the nginx.conf file for the http server and https server is listed below. The https server requires additional operations to run. See the following chapters, http server and https The server can choose one configuration.
http server configuration:
As follows, the focus is on underscores_in_headers on; this configuration is related to cookies.
The configuration of Access-Control-Allow-Origin is to access the research platform locally.
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
underscores_in_headers on;
etag on;
#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 logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
server {
listen 9980;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
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';
root html/dist;
index index.html index.htm;
try_files $uri $uri/ /index.html;
#rewrite ^/.*/$ / last; # Redirect everything to / (ex index.html) and let the JS router take care of the rest
# rewrite ^([^.]*[^/])$ $1/ permanent; # Force trailing slash
}
location /api/ {
proxy_pass https://testbook-ng.wgine-daily.com:7799/;
}
location /galaxy-virtual-api/ {
proxy_pass https://cde-open.wgine-daily.com:7799/;
}
#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 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;
#}
}
# another virtual host using mix of IP-, name-, and port-based configuration
#
#server {
# listen 8000;
# listen somename:8080;
# server_name somename alias another.alias;
# location / {
# root html;
# index index.html index.htm;
# }
#}
# HTTPS server
#
#server {
# listen 443 ssl;
# server_name localhost;
# ssl_certificate cert.pem;
# ssl_certificate_key cert.key;
# ssl_session_cache shared:SSL:1m;
# ssl_session_timeout 5m;
# ssl_ciphers HIGH:!aNULL:!MD5;
# ssl_prefer_server_ciphers on;
# location / {
# root html;
# index index.html index.htm;
# }
#}
include servers/*;
}
Enter sudo nginx in the terminal under the bin folder to start nginx, and you can see that the front-end deployment is successful.
Note:
(1) Before building the project, confirm that the global variables ENV and REGION of the project are inserted into the index.html page,
(2) Confirm that the publicPath under the output node of webpack is '/', not the cdn prefix (because Our js and css static files have not been uploaded to the CDN, and if they are not imported, the screen will be blank.)
As follows, the independent deployment of the nginx server on the shadow device is successful:
We changed the port of the shadow device connected for research to 9980, started the research platform with yarn run dev, and found that the shadow device was also successfully connected.
HTTPS server configuration:
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
underscores_in_headers on;
etag on;
#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 logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
# server {
# listen 9980;
# server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
# location / {
# 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';
# root html/dist;
# index index.html index.htm;
# try_files $uri $uri/ /index.html;
# #rewrite ^/.*/$ / last; # Redirect everything to / (ex index.html) and let the JS router take care of the rest
# # rewrite ^([^.]*[^/])$ $1/ permanent; # Force trailing slash
# }
# location /api/ {
# proxy_pass https://testbook-ng.wgine-daily.com:7799/;
# }
# location /galaxy-virtual-api/ {
# proxy_pass https://cde-open.wgine-daily.com:7799/;
# }
#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 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;
#}
# }
# another virtual host using mix of IP-, name-, and port-based configuration
#
#server {
# listen 8000;
# listen somename:8080;
# server_name somename alias another.alias;
# location / {
# root html;
# index index.html index.htm;
# }
#}
# HTTPS server
#
server {
listen 845 ssl http2;
server_name localhost;
ssl_certificate /Users/yuhui/ssl/server.crt;
ssl_certificate_key /Users/yuhui/ssl/server.key;
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
ssl_ciphers HIGH:!aNULL:!MD5;
ssl_prefer_server_ciphers on;
location / {
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';
root html/dist;
index index.html index.htm;
try_files $uri $uri/ /index.html;
#rewrite ^/.*/$ / last; # Redirect everything to / (ex index.html) and let the JS router take care of the rest
# rewrite ^([^.]*[^/])$ $1/ permanent; # Force trailing slash
}
location /api/ {
proxy_pass https://testbook-ng.wgine-daily.com:7799/;
}
location /galaxy-virtual-api/ {
proxy_pass https://cde-open.wgine-daily.com:7799/;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
include servers/*;
}
(3) Additional configuration of https server
Generate a self-signed certificate
Enter the following four commands in the terminal
. The first sentence is used to generate something like server.pass.key.
The second sentence is used to generate a private key. It uses the first sentence as input to generate a private key. .
After we have the private key, we need to generate csr, and only through csr can we request to generate our certificate. The
third sentence functions: to generate csr,
it will ask us to enter some content. After we enter the first four content in the box below, we can go all the way Enter.
The fourth sentence: Finally, generate our final certificate through csr and private key.
Finally, we will generate a .key file and a .crt file in the working directory of the terminal. We paste it to the location of our configured certificate and private key as follows: save and
exit after configuration, and restart nginx.
Enter thisisunsafe to open https local server
Enter https://localhost:845 in the address bar
for the first time and you will encounter the following situation
. In this case, we can directly click thisisunsafe.
Then you can open the webpage locally with https.
Please refer to the following link for articles on how to enter thisisunsafe:
https://blog.csdn.net/qq_30546099/article/details/114332243
The final display interface is as follows:
(4) nginx common commands:
Just run sudo nginx in the bin folder.
1. Start nginx: sudo nginx
2. Close nginx: sudo nginx -s stop
3. Restart nginx: sudo nginx -s reload
Reference article:
https://juejin.cn/post/6986190222241464350#heading-3