nginx部署前端專案的超級詳細步驟記錄

2023-02-03 18:04:15

前言

在前端開發過程中經常是需要把前端靜態資源放到伺服器中看效果，這時經常用到nginx來設定。

1. 什麼是nginx

Nginx是一款高效能的http 伺服器/反向代理伺服器及電子郵件（IMAP/POP3）代理伺服器。

由俄羅斯的程式設計師Igor Sysoev所開發，官方測試nginx能夠支支撐5萬並行連結，

並且cpu、記憶體等資源消耗卻非常低，執行非常穩定。

2. 應用場景

我們這次用到的是 http伺服器。

Nginx是一個http服務可以獨立提供http服務。可以做網頁靜態伺服器。

3. 下載nginx

nginx download官網地址或者點選這裡下載

官網提供三種版本：

Mainline version：Mainline 是 Nginx 目前主力在做的版本，可以說是開發版
Stable version：最新穩定版，生產環境上建議使用的版本
Legacy versions：遺留的老版本的穩定版

以windows版為例，下載後，將其解壓到原生的任一目錄下；

我是放到了G槽，新建一個software資料夾，把解壓的檔案放在裡面，此時我們可以看到有如下目錄:

然後用vscode程式碼編輯器開啟解壓資料夾下的conf資料夾的nginx.conf檔案，這是一個非常重要的檔案，用來設定nginx伺服器，預設的設定也存放在此。

4. 設定nginx伺服器

開啟nginx.conf檔案，下面是我的設定，可以複製一份，根據情況改下埠號和瀏覽器存取域名

#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;

    #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;

	upstream ylkj-api {
	    server 127.0.0.1:17002;
	}

	server {
	    listen       81;
	    server_name  127.0.0.1;
	    
	   
	    location / {
		alias "D:/CurProject/package.json";
		
	    }
	    location /static {
		alias "D:/CurProject/wepyModao/project/src/static/data";
		index index.html index.htm;
	    }
            location /wepydata {
		alias  D:/CurProject/wepyModao/project/src/static/data;
		index index.html index.htm;
	    }
	    
	    location /ylkj-api {
		#proxy_pass http://115.182.107.203:8088/ylkj-api/;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header Host $host;
		proxy_set_header Accept-Encoding 'gzip';
		client_max_body_size 100m;
		client_body_buffer_size 128k;
		proxy_connect_timeout 600;
		proxy_send_timeout 600;
		proxy_read_timeout 600;
		proxy_busy_buffers_size 64k;
		proxy_temp_file_write_size 64k;
		proxy_buffer_size 64k;
		proxy_buffers 4 32k;
		access_log ./access.log ;
		error_log ./error.log error;
	    }
	}

	server {
	    listen       8090;
	    server_name 191.105.0.52;
	    
	    location /{
			root D:/nginxRun/dist/;
			index index.html index.htm;
			if (!-e $request_filename) {
        rewrite ^/(.*) /index.html last;
        break;
       }
	    }
	}
}

說明：