springboot-整合vue，nginx前後端分離部署
阿新 • • 發佈：2019-01-12
springboot-整合vue，nginx前後端分離部署
文章目錄
完整程式碼下載連結：
https://github.com/2010yhh/springBoot-demos.git
環境
idea2018，jdk1.8，
springboot版本：springboot1.5.9.RELEASE
nginx version: nginx/1.6.2
chrome瀏覽器
1.nginx
1.1nginx的安裝
nginx的下載安裝見：http://www.runoob.com/linux/nginx-install-setup.html
nginx的詳細配置見：
http://www.cnblogs.com/hunttown/p/5759959.html
nginx的作用： 1）靜態伺服器 2）反向代理，轉發請求 3）作為內容伺服器的負載均衡器
1.2nginx的基本配置
Nginx配置檔案主要分成四部分：main（全域性設定）、server（主機設定）、upstream（上游伺服器設定，主要為反向代理、負載均衡相關配置）和 location（URL匹配特定位置後的設定），每部分包含若干個指令。1）main部分設定的指令將影響其它所有部分的設定，還有一些其他的配置段，如 event等；
2）server部分的指令主要用於指定虛擬主機域名、IP和埠；
3）upstream的指令用於設定一系列的後端伺服器，設定反向代理及後端伺服器的負載均衡；
4）location部分用於匹配網頁位置（比如，根目錄"/","/images",等等）。
他們之間的關係式：server繼承main，location繼承server；upstream既不會繼承指令也不會被繼承。它有自己的特殊指令，不需要在其他地方的應用。
詳細配置見：https://www.jb51.net/article/72527.htm http://www.runoob.com/w3cnote/nginx-install-and-config.html
1.3nginx配置多個埠，不同埠用於轉發到不同專案
nginx.conf配置中：設定多個server，每個server監聽不同的埠號即可
1.4nginx配置1個埠，多個域名區分不同專案（1個後臺多個前端）
nginx.conf配置中：同一個server配置中，配置不同的location實現將不同api的轉發到同一個後臺服務
1.5nginx做負載均衡
upstream配置項中：指定轉發地址：
###upstream的負載均衡 upstream mysite { server 192.168.1.139:8090 weight=1; server 192.168.1.139:8080 weight=1; }server配置項中設定轉發：
###對專案名開頭的url動態請求就去訪問後臺服務 location /springboot-html { ###設定轉發地址 proxy_pass http://mysite; proxy_redirect default; ###攔截錯誤如404 proxy_intercept_errors on; root /usr/local/webserver/webapp;#站點目錄,對應專案的地址 index index.html index.htm index.php;#首頁 error_page 404 500 502 503 504 /50x.html; }
1.6nginx訪問靜態資源
nginx.conf配置中：需要指定nginx上儲存靜態資源的路徑，server配置項中設定：
###配置Nginx動靜分離，定義的靜態資源頁面直接從Nginx釋出目錄讀取。
##有兩種配置模式，目錄匹配或字尾匹配,任選其一或搭配使用
# location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css)$
location /webapp1/static/
{
root /usr/local/nginx/html;
#expires定義使用者瀏覽器快取的時間為7天，如果靜態頁面不常更新，可以設定更長，這樣可以節省頻寬和緩解伺服器的壓力
expires 7d;
}
2.測試
nginx配置好後(nginx.conf的配置見下面)，建立3個web資料夾（以webapp1為例，將前端打包後的index.html和靜態檔案這裡以/static開始的資料夾都放在webapp1下，其他專案類似），如下所示：
1）本地web測試：http://localhost:8080/webapp1
(可以正常訪問介面及靜態資源)
2）nginx負載均衡和靜態檔案的測試：http://192.168.159.142:8060/webapp1（或者直接訪問：* http://192.168.159.142:8060/webapp1/test/static/img/1.jpg）
3）測試nginx不同埠，一個埠不同上下文；測試nginx一個埠不同上下文，訪問:
* http://192.168.159.142:8070/webapp2/
* http://192.168.159.142:8070/webapp2/test
* http://192.168.159.142:8070/webapp3/
* http://192.168.159.142:8070/webapp3/test
上述測試nginx.conf的完整配置
user yhh yhh;#使用者組,使用者名稱
worker_processes 2; #設定值和CPU核心數一致
error_log /usr/local/nginx/logs/nginx_error.log crit; #日誌位置和日誌級別
pid /usr/local/nginx/nginx.pid;
#Specifies the value for maximum file descriptors that can be opened by this process.
worker_rlimit_nofile 65535;
events
{
use epoll;
worker_connections 65535;
}
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';
#charset gb2312;
server_names_hash_bucket_size 128;
client_header_buffer_size 32k;
large_client_header_buffers 4 32k;
client_max_body_size 8m;
sendfile on;
tcp_nopush on;
keepalive_timeout 60;
tcp_nodelay on;
fastcgi_connect_timeout 300;
fastcgi_send_timeout 300;
fastcgi_read_timeout 300;
fastcgi_buffer_size 64k;
fastcgi_buffers 4 64k;
fastcgi_busy_buffers_size 128k;
fastcgi_temp_file_write_size 128k;
gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_http_version 1.0;
gzip_comp_level 2;
gzip_types text/plain application/x-javascript text/css application/xml;
gzip_vary on;
#limit_zone crawler $binary_remote_addr 10m;
###############server：8060#######################
###upstream負載均衡
upstream mysite
{
server 192.168.3.2:8090 weight=1;
server 192.168.3.2:8080 weight=1;
}
#server虛擬主機的配置
server
{
listen 8060;#監聽埠
server_name localhost;#域名
###配置Nginx動靜分離，定義的靜態資源頁面直接從Nginx釋出目錄讀取。
##有兩種配置模式，目錄匹配或字尾匹配,任選其一或搭配使用
# location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css)$
location /webapp1/static/
{
root /usr/local/nginx/html;
#expires定義使用者瀏覽器快取的時間為7天，如果靜態頁面不常更新，可以設定更長，這樣可以節省頻寬和緩解伺服器的壓力
expires 30d;
}
###對專案名開頭的url動態請求就去訪問後臺服務
location /webapp1 {
###設定轉發地址
proxy_pass http://mysite;
proxy_redirect default;
###攔截錯誤如404
proxy_intercept_errors on;
error_page 404 500 502 503 504 /50x.html;
}
###########################################
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
location ~ .*\.(php|php5)?$
{
#fastcgi_pass unix:/tmp/php-cgi.sock;
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
include fastcgi.conf;
}
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|ico)$
{
expires 30d;
# access_log off;
}
location ~ .*\.(js|css)?$
{
expires 15d;
# access_log off;
}
access_log off;
}
###############同一個埠不同的上下文轉發不同的專案########################
###################server：8070#####################
#下面是server虛擬主機的配置
server
{
listen 8070;#監聽埠
server_name localhost;#域名
##http://192.168.159.142:8070/webapp2/ http://192.168.159.142:8070/webapp3/
###配置Nginx動靜分離，定義的靜態頁面直接從Nginx釋出目錄讀取。
# location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css)$
location /webapp2/static/
{
###root指令指定要在其中搜索要提供的靜態檔案的檔案系統路徑
root /usr/local/nginx/html;
expires 7d;
}
location /webapp2/static
{
root /usr/local/nginx/html/webapp2/static;
#expires定義使用者瀏覽器快取的時間為7天，如果靜態頁面不常更新，可以設定更長，這樣可以節省頻寬和緩解伺服器的壓力
expires 30d;
}
###配置Nginx動靜分離，定義的靜態頁面直接從Nginx釋出目錄讀取。
#location ~ .*\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css)$
location /webapp3/static/
{
###root指令指定要在其中搜索要提供的靜態檔案的檔案系統路徑
root /usr/local/nginx/html;
expires 7d;
}
location /webapp3/static
{
root /usr/local/nginx/html/webapp3/static;
#expires定義使用者瀏覽器快取的時間為7天，如果靜態頁面不常更新，可以設定更長，這樣可以節省頻寬和緩解伺服器的壓力
expires 30d;
}
###對專案名開頭的url動態請求就去訪問後臺服務
location /webapp2 {
###設定轉發地址
proxy_pass http://192.168.3.2:8100/webapp2;
proxy_redirect default;
###攔截錯誤如404
proxy_intercept_errors on;
error_page 404 500 502 503 504 /50x.html;
}
###對專案名開頭的url動態請求就去訪問後臺服務
location /webapp3 {
###設定轉發地址
proxy_pass http://192.168.3.2:8100/webapp2;
proxy_redirect default;
###攔截錯誤如404
proxy_intercept_errors on;
error_page 404 500 502 503 504 /50x.html;
}
###########################################
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
location ~ .*\.(php|php5)?$
{
#fastcgi_pass unix:/tmp/php-cgi.sock;
fastcgi_pass 127.0.0.1:9000;
fastcgi_index index.php;
include fastcgi.conf;
}
location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|ico)$
{
expires 30d;
# access_log off;
}
location ~ .*\.(js|css)?$
{
expires 15d;
# access_log off;
}
access_log off;
}
}