preface

As a front-end developer, you usually just write business code, resource references. As far as deploying to the server, getting it up and running is basically operations. However, in the actual project, we often need to master the relevant knowledge of deployment. For example, nginx, port, how to configure HTTPS, how to solve cross-domain and so on.

What are the front-end deployment solutions

  • Nginx
  • Container deployment

Lightweight and powerful Nginx

Nginx is typically used as a static resource server and gateway, where users forward HTTP requests.

Common features of the front end

  • Static server
  • Domain name binding
  • Port Settings
  • Cross domain set
  • Forwarding agent
  • Cache Settings
  • https
  • . Etc.

Nginx installation

brew install nginx
Copy the code

No BREW reference Homebrew installation

Run the nginx -version command. If the version is displayed normally, the installation is complete.

Nginx configuration

Before we configure Nginx, we need to clarify our goals. What do we need to do?

In general, our need to prepare a Web service basically has the following features:

  • Can be accessed through domain name specific ports
  • Configure HTTP and HTTPS
  • A resource cache
#user nobody; # specifies the number of work-derived processes 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; #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; server { listen 8080; Server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location / { root 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 html; } # proxy the PHP scripts to Apache listening on 127.0.1:80 # #location ~.php${# proxy_pass http://127.0.0.1; #} location ~* ^.+.(jpg|jpeg|gif)$ { root /xxx/www; access_log off; expires 30d; } # proxy the PHP scripts to Apache listening on 127.0.1:80 # #location ~.php${# proxy_pass http://127.0.0.1; PHP ${# root HTML; PHP ${# root HTML; 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/*;Copy the code

The above is the nginx initialization configuration, including HTTP, HTTPS, and server_name bindings. Nginx can also easily solve the cross-domain problems often encountered by the front-end.

The first solution is a reverse proxy:

server { listen 3003; server_name localhost; Location = / {proxy_pass http://localhost:5500; / {proxy_pass http://localhost:5500; } ## /no = /no1,no/son, "No /son/grandson /grandson ## if proxy_pass ends with/like http://localhost:3000/; Match/no son, then the real match for http://localhost:3000/son, the location/no {proxy_pass http://localhost:3000; } ## /ok/ location /ok/ {proxy_pass http://localhost:3000; ! [](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/187c537734354d3eb469b06f244461ac~tplv-k3u1fbpfcp-zoom-1.image) } }Copy the code

The second solution is to add a header:

add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Credentials' 'true'; add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,Content-Type,Cache-Control,User-Agent,Keep-Alive,Authorization,Accept,X-Mx-ReqToken,Origin,X-Requested-With,X-Custo mHeader,If-Modified-Since,Cache-Control,If-Modified-Since'; if ($request_method = 'OPTIONS') { add_header 'Access-Control-Allow-Origin' 'http://source01.odocker.com'; add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE'; return 204; }Copy the code

Nginx Reload will be reloaded and ok.

The front-end deployment is basically completed. Nginx also has very powerful functions, such as load balancing and traffic control as a gateway. See nginx for more features