SpringBoot+Vue前后端分離項(xiàng)目+云服務(wù)器(nginx配置http/https)

這篇具有很好參考價(jià)值的文章主要介紹了SpringBoot+Vue前后端分離項(xiàng)目+云服務(wù)器(nginx配置http/https)。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

1.Java項(xiàng)目打包

2.前端項(xiàng)目打包

ok,項(xiàng)目準(zhǔn)備好了,接下來(lái)就是服務(wù)器方面的操作了

3.服務(wù)器

1.點(diǎn)擊控制臺(tái)

2.找到 ECS云服務(wù)器

3.概覽->我的資源

?4.重置服務(wù)器密碼

?5.配置安全組

4.域名

1.買域名

2.備案?

3.解析至服務(wù)器

31.控制臺(tái)找到

?3.2.域名列表 ,找到需要的域名,點(diǎn)擊解析?編輯

?3.3.域名解析說(shuō)明

3.4域名解析

4.下載證書

4.1.控制臺(tái)找到

4.2. SSl證書-->免費(fèi)證書

?4.3創(chuàng)建證書-->申請(qǐng)證書

5.下載證書

5.服務(wù)器環(huán)境安裝

1.下載xshell , xftp等管理工具

2.xshell連接服務(wù)器

?3.java環(huán)境搭建

6.服務(wù)器環(huán)境配置

1.nginx配置vhost主從配置

1.1http協(xié)議的nginx配置

1.1.1配置adminApi

1.1.2配置appApi

1.1.3配置adminWeb

1.2https協(xié)議的nginx配置

1.2.1配置adminApi

1.2.2配置appApi

1.2.3配置adminWeb

7.jar管理腳本

關(guān)于發(fā)布項(xiàng)目網(wǎng)上信息雜亂,東缺一塊西少一點(diǎn)的,所以我整合一下,小公司做簡(jiǎn)單的項(xiàng)目部署可以一用!

1.Java項(xiàng)目打包

1.你項(xiàng)目的root直接clean? 然后 package

2.打包前確定好環(huán)境,例如:配置文件的prod環(huán)境等..

3.如果打包中出現(xiàn)各種報(bào)錯(cuò),請(qǐng)自己搜索解決

? SpringBoot+Vue前后端分離項(xiàng)目+云服務(wù)器(nginx配置http/https)

2.前端項(xiàng)目打包

打開(kāi)前端代碼,在終端輸入 npm run build后會(huì)出現(xiàn)一個(gè)dist文件

也可以直接找到前端代碼路徑cmd然后 npm run build

SpringBoot+Vue前后端分離項(xiàng)目+云服務(wù)器(nginx配置http/https)

ok,項(xiàng)目準(zhǔn)備好了,接下來(lái)就是服務(wù)器方面的操作了

所需:

阿里云/騰訊云/華為云 ...(以下皆為虛擬數(shù)據(jù),實(shí)際請(qǐng)以你購(gòu)買的為準(zhǔn)!!!!)

這些產(chǎn)品最好全部買同一個(gè)廠商的,比如你服務(wù)器買的騰訊云那么其他對(duì)應(yīng)的服務(wù)最好都是騰訊云的,OOS啊,短信啊,域名啊,這樣可以統(tǒng)一維護(hù)

此處以阿里云做示例:

購(gòu)買流程自行搜索

3.服務(wù)器

1.點(diǎn)擊控制臺(tái)

SpringBoot+Vue前后端分離項(xiàng)目+云服務(wù)器(nginx配置http/https)

2.找到 ECS云服務(wù)器

SpringBoot+Vue前后端分離項(xiàng)目+云服務(wù)器(nginx配置http/https)

3.概覽->我的資源

進(jìn)去后會(huì)查詢出你的服務(wù)器列表找到你需要的服務(wù)器(由于這個(gè)服務(wù)器信息重要不能展示,見(jiàn)諒!)

公網(wǎng)ip:101.88.31.159 (這里為虛擬數(shù)據(jù),后面的說(shuō)明以這個(gè)代替)

SpringBoot+Vue前后端分離項(xiàng)目+云服務(wù)器(nginx配置http/https)

?4.重置服務(wù)器密碼

登錄名:root

密碼:? 12345679(這里為虛擬數(shù)據(jù),后面的說(shuō)明以這個(gè)代替)

SpringBoot+Vue前后端分離項(xiàng)目+云服務(wù)器(nginx配置http/https)

?5.配置安全組

https://oneinstack.com/docs/securitygroup/

這個(gè)鏈接的安全組說(shuō)明非常全面

好!以上服務(wù)器的操作就做完了!

作為開(kāi)發(fā)人員,我們得到了以下幾點(diǎn)信息

(虛擬信息,以實(shí)際為主)

服務(wù)器ip:101.88.31.159

服務(wù)器賬戶:root

服務(wù)器密碼:12345679

4.域名

1.買域名

自行搜索

2.備案?

自行搜索

3.解析至服務(wù)器

31.控制臺(tái)找到

SpringBoot+Vue前后端分離項(xiàng)目+云服務(wù)器(nginx配置http/https)

?3.2.域名列表 ,找到需要的域名,點(diǎn)擊解析

?3.3.域名解析說(shuō)明

SpringBoot+Vue前后端分離項(xiàng)目+云服務(wù)器(nginx配置http/https)

?解析域名之前首先得了解一些域名的前置知識(shí)

域名分為: 頂級(jí)域名(一級(jí)域名) , 二級(jí)域名, 三級(jí)域名

頂級(jí)域名(一級(jí)域名):

級(jí)域名就是你購(gòu)買的域名,例如 baidu.com, csdn.net

比如你是做商城的,你的商城品牌叫做? ?好又多? 然后你買了個(gè)域名叫做 haoyouduo.com

那么你的頂級(jí)域名就是? haoyouduo.com

二級(jí)域名:

舉個(gè)例子, CSDN的首頁(yè)是csdn.net? 那么你現(xiàn)在訪問(wèn)我的博客,而我的博客的域名叫blok.csdn.net

再舉個(gè)例子,你的頂級(jí)域名是haoyouduo.com

但是你的頂級(jí)域名備案后工信部會(huì)審核你的頂級(jí)域名,訪問(wèn)進(jìn)去是否有備案信息

但是如果你這個(gè)域名是用來(lái)給服務(wù)端的api接口使用的呢?不提供交互服務(wù)怎么辦?

比如你們的前端需要調(diào)接口請(qǐng)求數(shù)據(jù),而后端用了haoyouduo.com這個(gè)域名,后端沒(méi)有交互頁(yè)面訪問(wèn)進(jìn)去啥也沒(méi)有.

然后阿里云就會(huì)一直給你打電話說(shuō)工信部讓你整改,如果你不整改就會(huì)收到下面這封信

(我之前的一個(gè)騰訊云的域名)

SpringBoot+Vue前后端分離項(xiàng)目+云服務(wù)器(nginx配置http/https)

?三級(jí)域名:

三級(jí)域名可以用于做微服務(wù),分布式,例如:后端分為:訂單模塊,支付模塊,...

那么對(duì)應(yīng)的域名就可以設(shè)為:order.api.haoyouduo.com,pay.api.haoyouduo.com

當(dāng)然用法不止一種很隨意,想咋用咋用.

廢話不多說(shuō)開(kāi)整!!!

3.4域名解析

SpringBoot+Vue前后端分離項(xiàng)目+云服務(wù)器(nginx配置http/https)

?假設(shè)? 我的好又多做了個(gè)小程序

我這里呢解析三個(gè)域名,

我有一個(gè)小程序端api? jar包,一個(gè)后臺(tái)管理api? ?jar包 ,一個(gè)后臺(tái)前端的dist包?

小程序前端不需要,直接上傳發(fā)布

那么我對(duì)應(yīng)的域名就設(shè)為

app.haoyouduo.com? ?小程序端api

admin.haoyouduo.com? ?后臺(tái)管理api

backweb.haoyouduo.com??后臺(tái)前端

4.下載證書

如果不打算做https協(xié)議,只使用http就不用申請(qǐng)可以直接從nginx配置開(kāi)始看

4.1.控制臺(tái)找到

SpringBoot+Vue前后端分離項(xiàng)目+云服務(wù)器(nginx配置http/https)

4.2. SSl證書-->免費(fèi)證書

證書等級(jí)及價(jià)格參考

SSL證書是什么？SSL證書一般要多少錢_Chihiro.511的博客-CSDN博客_ssl證書多少錢

一般剛買的域名會(huì)副贈(zèng)20個(gè)免費(fèi)證書,不用想了全是DV級(jí)

免費(fèi)的還要啥自行車?

怎么查看證書等級(jí),點(diǎn)擊你訪問(wèn)的鏈接的左側(cè)的小鎖

SpringBoot+Vue前后端分離項(xiàng)目+云服務(wù)器(nginx配置http/https)

? SpringBoot+Vue前后端分離項(xiàng)目+云服務(wù)器(nginx配置http/https)

SpringBoot+Vue前后端分離項(xiàng)目+云服務(wù)器(nginx配置http/https)

? SpringBoot+Vue前后端分離項(xiàng)目+云服務(wù)器(nginx配置http/https)

?百度的是OV

?4.3創(chuàng)建證書-->申請(qǐng)證書

? SpringBoot+Vue前后端分離項(xiàng)目+云服務(wù)器(nginx配置http/https)

?申請(qǐng)好之后呢你會(huì)發(fā)現(xiàn)原來(lái)解析的三個(gè)A記錄類型的二級(jí)域名,現(xiàn)在又多了三個(gè)

txt的,這是因?yàn)镾SL證書的對(duì)應(yīng)解析,阿里云的證書主機(jī)記錄大概率是

_dnsauth.api

_dnsauth..admmin

_dnsauth.backweb

SpringBoot+Vue前后端分離項(xiàng)目+云服務(wù)器(nginx配置http/https)

5.下載證書

SSl證書->證書列表

SpringBoot+Vue前后端分離項(xiàng)目+云服務(wù)器(nginx配置http/https)

ok!至此我們賬號(hào)上的配置全部完成了

獲得的信息:

公網(wǎng)ip:101.88.31.159

登錄名:root

密碼:? 12345679

app.haoyouduo.com? ?小程序端api + SSl證書壓縮包

admin.haoyouduo.com? ?后臺(tái)管理api + SSl證書壓縮包

backweb.haoyouduo.com??后臺(tái)前端 + SSl證書壓縮包

5.服務(wù)器環(huán)境安裝

1.下載xshell , xftp等管理工具

Xshell 下載 - NetSarang Website

公司如果摳門,不給買,就直接

SpringBoot+Vue前后端分離項(xiàng)目+云服務(wù)器(nginx配置http/https)

?填一些信息就可以免費(fèi)

2.xshell連接服務(wù)器

SpringBoot+Vue前后端分離項(xiàng)目+云服務(wù)器(nginx配置http/https)

? SpringBoot+Vue前后端分離項(xiàng)目+云服務(wù)器(nginx配置http/https)

?3.java環(huán)境搭建

看到這你以為我還要教你mysql,redis,java的一個(gè)一個(gè)的去裝環(huán)境??

錯(cuò)!!給你們一個(gè)很騷的裝環(huán)境方法.

https://oneinstack.com/

SpringBoot+Vue前后端分離項(xiàng)目+云服務(wù)器(nginx配置http/https)

? SpringBoot+Vue前后端分離項(xiàng)目+云服務(wù)器(nginx配置http/https)

?生成的這段代碼復(fù)制到服務(wù)器里等著就完事兒了

wget -c http://mirrors.linuxeye.com/oneinstack-full.tar.gz && tar xzf oneinstack-full.tar.gz && ./oneinstack/install.sh --nginx_option 1 --jdk_option 1 --db_option 2 --dbinstallmethod 1 --dbrootpwd ci8dlf5g --redis  --reboot

nginx(啟動(dòng)|停止|狀態(tài)|重啟|卸載重裝|配置)

service nginx {start|stop|status|restart|reload|configtest}

mysql(啟動(dòng)|停止|重啟|卸載重裝|狀態(tài))

service mysqld {start|stop|restart|reload|status}

redis (啟動(dòng)|暫停|狀態(tài)|重啟)

service redis-server {start|stop|status|restart}

--------------后面的明天再補(bǔ),凌晨3.23了困得不行了--------------------------------

預(yù)告

nginx的vhost配置

jar管理腳本

---------------抱歉,拖了這么久,最近事情太多了(2023.2.11)---------------------------------------

---------------之前寫的記不太清了,所有有的可能不連貫見(jiàn)諒!(2023.2.11)---------------------------------------

6.服務(wù)器環(huán)境配置

先看下oneinstack安裝后的環(huán)境

進(jìn)入目錄???/usr/local??

SpringBoot+Vue前后端分離項(xiàng)目+云服務(wù)器(nginx配置http/https)

?看到那個(gè)命令下載的環(huán)境基本都在這里了

1.nginx配置vhost主從配置

進(jìn)入目錄? /usr/local/nginx/conf

SpringBoot+Vue前后端分離項(xiàng)目+云服務(wù)器(nginx配置http/https) ?打開(kāi)配置文件?oneinstack? 幫我們做了一些配置,所以看起來(lái)跟直接從nginx官網(wǎng)下載的不一樣,直接把配置文件拉到最后面

SpringBoot+Vue前后端分離項(xiàng)目+云服務(wù)器(nginx配置http/https)

?include的作用就是類似主從配置的操作,作用是簡(jiǎn)化主配置文件

進(jìn)入vhost(是個(gè)空文件夾)

cd  /usr/local/nginx/conf/vhost

新建一個(gè)配置文件,文件名隨意根據(jù)自己的業(yè)務(wù)來(lái)

假設(shè)我有一個(gè)項(xiàng)目,用戶端是小程序,后臺(tái)管理是web,這時(shí)候可能會(huì)有兩個(gè)jar包

一個(gè)叫adminApi

一個(gè)叫appApi

還有一個(gè)web前端的包

那我就需要新建三個(gè)文件

adminApi.conf(jar)

appApi.conf(jar)

adminWeb.conf(前端包`dist`)

1.1http協(xié)議的nginx配置

1.1.1配置adminApi

server{
	listen 80;
	server_name xxx.xxx.com; 
	root /home/test/adminApi;
	
	location / { 
		proxy_pass http://127.0.0.1:8001; 
			proxy_set_header X-Forwarded-Proto $scheme;
			proxy_set_header X-Forwarded-Port $server_port;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_set_header Upgrade $http_upgrade;
			proxy_set_header Connection "upgrade";
	}

	access_log /home/logs/adminApi.log;
}

解釋:

listen 80; 監(jiān)聽(tīng)80端口

server_name xxx.xxx.com; 服務(wù)訪問(wèn)域名(填寫公司給得域名)

root /home/test/adminApi; 你的jar包放的路徑,只寫到父級(jí)包即可

location / { 反向代理端口 /以下所有目錄

proxy_pass http://127.0.0.1:8001; 反向代理本地 8001端口(你得jar包得端口,注意一個(gè)服務(wù)器有多個(gè)項(xiàng)目的,端口不能沖突)

access_log /home/logs/adminApi.log; 日志配置

注: 如果上面復(fù)制過(guò)去不行就是編碼格式問(wèn)題, 用notpad++或者其他編碼軟件,,復(fù)制進(jìn)去再?gòu)?fù)制出來(lái)即可,,下面得所有配置也一樣

把你打好得jar包放到 /home/test/adminApi 下

1.1.2配置appApi

appApi同adminApi

如果有跨域問(wèn)題加一個(gè)反向代理即可

location ~* \.(eot|ttf|woff)$ {
       add_header Access-Control-Allow-Origin *;
    }

1.1.3配置adminWeb

server{
	listen 80;
	server_name xxx.xxx.com;
	index index.html index.htm;
	root /home/test/adminWeb;
	
	location / {
		try_files $uri $uri/ @router;
		index index.html;
	}
	
	location @router {
		rewrite ^.*$ /index.html last;
	}
	
	location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
		expires 30d;
	}
	
	location ~ .*\.(js|css)?$ {
		expires 12h;
	}
	access_log /home/logs/adminWeb.log;
}

解釋:

?index index.html index.htm; 默認(rèn)訪問(wèn)的頁(yè)面不用改就這么寫就行

這邊的local只是反向代理靜態(tài)頁(yè)面和定時(shí)器,直接復(fù)制沒(méi)啥好說(shuō)的

注釋: 這個(gè)配置一用于代理前端vue項(xiàng)目,前端打包 npm run build 會(huì)出現(xiàn)一個(gè)dist包

所以直接把dist下得static UEditor favicon.ico index.html 等等直接拖到 root 所配置得地址

即 /home/test/adminWeb 下

1.2https協(xié)議的nginx配置

1.2.1配置adminApi

server{
	listen 443 ssl;
	server_name xxx.xxx.com;
	ssl_certificate /home/test/cert/xxxxxxxxx.pem;
	ssl_certificate_key /home/test/cert/xxxxxxxxx.key;
	ssl_session_timeout 5m;
	ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
   	ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
	ssl_prefer_server_ciphers on;
	root /home/test/adminApi;
	
	location / { 
		proxy_pass http://127.0.0.1:9001; 
			proxy_set_header X-Forwarded-Proto $scheme;
			proxy_set_header X-Forwarded-Port $server_port;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_set_header Upgrade $http_upgrade;
			proxy_set_header Connection "upgrade";
	}

	access_log /home/logs/adminApi.log;
}
server {
 
        listen 80;
 
        server_name xxx.xxx.com;
 
        return 301 https://$server_name$request_uri;
 
}

解釋:

https跟 http基本一致

只是listen監(jiān)聽(tīng)得是443端口 443就是https

https 得域名一定要備案

ssl_certificate /home/test/cert/xxx.xxx.com.pem; 域名得pen證書放置得地方

ssl_certificate_key /home/test/cert/xxx.xxx.com.key; 域名得key證書放置得地方

其他的跟http一樣再此不做解釋

???????證書不知道怎么弄得看下步驟4

???????1.2.2配置appApi

同adminApi

???????1.2.3配置adminWeb

server{
	listen 443 ssl;
	server_name xxx.xxx.com;
	ssl_certificate /home/test/cert/xxx.xxx.com.pem;
	ssl_certificate_key /home/test/cert/xxx.xxx.com.key;
	ssl_session_timeout 5m;
	ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
   	ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
	index index.html index.htm;
	root /home/test/adminWeb;
	
	location / {
		try_files $uri $uri/ @router;
		index index.html;
	}
	location @router {
		rewrite ^.*$ /index.html last;
	}	


	location ~* \.(eot|ttf|woff)$ {
		 add_header Access-Control-Allow-Origin *;
	}

	location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
	{
		expires      30d;
	}

	location ~ .*\.(js|css)?$
	{
		expires      12h;
	}
	
	access_log /home/logs/adminWeb.log;
}

server {
    listen 80;
    server_name xxx.xxx.com;
    rewrite ^(.*)$ https://${server_name}$1 permanent; 
}

7.jar管理腳本

上面說(shuō)過(guò)打好得jar包放到 /home/test/adminApi 下

我們用一些sh腳本來(lái)更方便的對(duì)jar包進(jìn)行操作

/home/test/adminApi? ?下新建一個(gè)文件設(shè)置為

start.sh? ?名字隨意,保證后綴為.sh可執(zhí)行文件就行

內(nèi)容為:

nohup java -jar adminApi.jar --spring.profiles.active=prod &

adminApi.jar就是jar包文件

還有stop.sh

內(nèi)容為:

PID=$(ps -ef | grep adminApi.jar | grep -v grep | awk '{ print $2 }')
if [ -z "$PID" ];then
    echo Application is already stopped
else
    echo kill $PID
    kill $PID
fi

log,sh

內(nèi)容為:

tail -f nohup.out

記得新建完后不能直接運(yùn)行,要給sh文件賦權(quán)

假設(shè)我想給啟動(dòng)文件? start.sh? 賦權(quán)

chmod u+x start.sh

另外兩個(gè)文件以此類推

最后日志文件記得建個(gè)文件,命令為(直接運(yùn)行不要改名字):

touch nohup.out

全部完成后,文件結(jié)構(gòu)為下

SpringBoot+Vue前后端分離項(xiàng)目+云服務(wù)器(nginx配置http/https)

?名字不用在意,結(jié)構(gòu)正確就行

權(quán)限正確的sh文件為綠色

SpringBoot+Vue前后端分離項(xiàng)目+云服務(wù)器(nginx配置http/https)

接下來(lái)就直接

./start.sh? ?啟動(dòng)

./stop.sh? ?停止

./log.sh? ?查看日志

SpringBoot+Vue前后端分離項(xiàng)目+云服務(wù)器(nginx配置http/https)

? SpringBoot+Vue前后端分離項(xiàng)目+云服務(wù)器(nginx配置http/https)

?啟動(dòng)后就可以直接看log日志了,這個(gè)日志類似于idea控制臺(tái)的日志,很方便

啟動(dòng)成功后就可以通過(guò)nginx配置的域名訪問(wèn)服務(wù)了

----------完結(jié)!!!(文章更新間隔太久,可能會(huì)有披露或不嚴(yán)謹(jǐn)?shù)牡胤?有疑問(wèn)的評(píng)論區(qū)討論)-------文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-486092.html

到了這里，關(guān)于SpringBoot+Vue前后端分離項(xiàng)目+云服務(wù)器(nginx配置http/https)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！