Nginx啟動Web項目

以前前后端沒有分離的時候，項目啟動前后端就一起啟動了，現在前后端分離，服務端和頁面分開部署。

有一段時間都以為因為是html頁面，直接扔tomcat的webapp下就好，然后發現啟動tomcat后，頁面是找不到css和js的，不知道什么原因，后面有時間去研究一下，今天研究的是用nginx啟動web頁面項目。

1、前提：啟動服務端，比如服務器端為127.0.0.1:8080，然后所有接口都是以/api開頭的，比如登錄接口，127.0.0.1:8080/api/login

2、將前端開發好的頁面解壓，放到一個指定目錄下，我這邊解壓好的目錄結構是這樣的

 

 

 3、配置nginx，在conf/nginx.conf目錄里面配置

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;
    tcp_nopush          on;
    tcp_nodelay         on;
    types_hash_max_size 2048;
    client_max_body_size 20M;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    gzip  on;
	
	upstream localserver {
                #這里配置服務器的地址，剛才我們啟動的是8080端口
		server 127.0.0.1:8080;
    }


    server {
        listen 9999;#這里是nginx監聽的端口，就是一會兒瀏覽器打開的端口，訪問的時候用http://testhosts.com:9999，如果這個地方改成80端口，那么就只需要用http://testhosts.com訪問就行，多個server可以同時監聽80端口，然后代理域名用不同的名字就行
        server_name  testhosts.com;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
		
		root D:\plugins\product_page\dist;#這里是前端頁面的根路徑
		location / {
            
            index  index.html index.htm;
        }
		
		location ^~/api/ {#這里表示瀏覽器所有以/localhost:9999/api開頭的請求，經過nginx代理，到服務器都用localserver/api/請求，實際localserver就是上面我們配置服務器地址
			proxy_pass  http://localserver/api/;
        }
		
		location ^~/document/{
			proxy_pass http://localserver/document/;
        }
        location ^~/file/zip/ {
                proxy_pass http://localserver/file/zip/;
        }
        location ^~/doc/bill/{
          	proxy_pass http://localserver/doc/bill/;
		}


}
        

4、啟動nginx.exe(我這里是在windows端，在linux端去網上查詢相應啟動、停止命令)

5、訪問頁面，在瀏覽器輸入testhosts:9999，訪問成功