導航:首頁 > 配伺服器 > 部署前端到雲伺服器nginx

部署前端到雲伺服器nginx

發布時間:2023-03-27 20:15:42

⑴ nginx怎麼部署前端項目

1、安裝兄陪護衛神·nginx大師
2、開設站羨察蠢點,綁定和解析域名
3、上傳前端頁沒碼面到網站

⑵ react+springBoot 項目部署到騰訊雲

本文主要介紹如何搭建個人網站,並將項目部署到騰訊雲。
前端:React,
後端:SpringBoot,
雲服務:centos7

建議使用create-react-app創建react項目包,簡單快捷。

進入項目路徑,開始運行

直接使用項目自身的build指令進行打包,完成後會在項目根目錄多出一個build文件夾

build文件中包含項目打包後的js、css、html...等資源。下一步的部署,就是將這一build文件上傳到雲伺服器,並通過nginx指向build。

將上一過程中的build文件上傳到雲伺服器,推薦使用ForkLift, 使用教程 。

進入雲伺服器,找到nginx文件,修改root指向build路徑, nginx配置教程 。

上述操作完成後,打開域名後,頁面即為react項目的首頁。

建議使用idea進行springboot項目的開發(專業的事情交給專業的工具,簡單些)。

idea搭建一個springboot項目

mysql: 官方地址
mysql管理工具Navicat: 官網地址
如果本地不想安裝mysql,也可以直接在伺服器上進行安裝,然後在本地訪問, 伺服器安裝mysql並實現遠程訪問 。

將本地springboot項目打包後,上傳到雲伺服器並啟動, Spring boot項目部署到騰訊雲伺服器 。
關於項目的啟動並保持一致運行:可以在控制台輸入

回車,nohup命令可以讓你的shell命令忽略SIGHUP信號,即可以使之脫離終端運行;「&」可以讓你的命令在後台運行。

至此,前後端項目都已安裝在雲伺服器上。

原文地址: react+springBoot 項目部署到騰訊雲

⑶ 使用Tomcat和Nginx部署前端項目

第一種方式,將我們的前端項目放置在webapps目錄下

進入tomcat安裝路徑下的conf目錄,在server.xml文件中<Host>標簽內配置虛擬路徑

簡單的解釋一下參數
path 對應用戶請求過來的url路徑, /static 匹配所有以 /static 開頭的請求
docBase 表示實際匹配到的路徑,這里可以使用絕對路徑,也可以使用相對路徑
reloadable 如果為true,則tomcat會自動檢測應用程序的/WEB-INF/lib 和/WEB-INF/classes目錄的變化。(對於靜態資源來說,個人覺得這個配置用處不大)
總結起來就是,對於ip:8080/static的資源請求,會通過虛擬路徑匹配到我們實際的資源路徑music_client/static。
配置好後重啟,我們可以發現已經能夠看到我們的前端項目了

對於ROOT目錄下的資源,tomcat可以直接在根目錄下進行訪問。通過這種方式,我們可以讓項目的路徑去適配tomcat訪問的路徑。
但是這種方式不是特別推薦,當有多個項目在同一個tomcat伺服器上的時候,會不方便管理。

Nginx是當下熱門的伺服器,使用起來只需要進行簡單的配置即可。對於Nginx的安裝大家可以自行網路解決。
我們先進入到usr/local/nginx(具體以實際nginx安裝目錄為准)下的conf目錄,vim編輯nginx.xml。主要進行下面的配置

簡單的解釋一下
listen 表示nginx監聽的埠號,也就是你希望暴露哪個埠給用戶進行訪問
server_name 表示nginx接受請求的域名,一般默認localhost就行
location 模塊用於響應請求,這里的 / 表示匹配8082埠的所有請求
root 表示靜態資源/項目的路徑
index 表示默認的訪問資源
配置完成後,進入 sbin 目錄下,通過 ./nginx -t 檢查配置文件的格式是否正確
如正確 ./nginx 進行啟動或者 ./nginx -s reload 進行重啟
啟動完,我們就可以直接ip:8082直接訪問我們的前端項目啦

開啟nginx的反向代理也比較簡單,只需要加上proxy_pass 配置即可

出現這個問題的原因是: 在history模式下,只是動態的通過js操作window.history來改變瀏覽器地址欄里的路徑,並沒有發起http請求,但是當我們直接在瀏覽器輸入這個地址的時候,就會對伺服器發起http請求,但是這個目標在伺服器上又不存在,所以會返回404。
我們可以通過把所有請求都轉發到首頁上來解決這個問題。只需要在 Nignx 中的配置文件加入如下配置:

事實上,上面的解決方式也是Vue-Router官方推薦的解決方式( https://router.vuejs.org/zh/guide/essentials/history-mode.html#nginx )。
那上面的 try_files 為什麼能幫助我們解決這個問題呢?我們可以看一下這個屬性的作用

try_files :按選項所指定的順序去檢查用戶請求的文件是否存在,如果本地存在的話則返回該請求;不存在的話將該請求轉發到指定的其它路徑。也就是說,比如我們當前的前端項目部署在 /usr/myproj 目錄下,現在我們在瀏覽器發起 ip:port/testApi 請求,那麼此時 uri 為testApi,nginx會先去 $root/testApi (即/usr/local/myproj/testApi)找是否存在該靜態資源,若不存在,則繼續尋找 $root/testApi/index (即/usr/local/myproj/testApi/index)文件是否存在,如果還是不存在,則會把請求轉發到首頁。

而我們的項目本事就是由Vue-Cli創建的 單頁面應用 ,當index頁面接收到請求的時候,對應的history模式路由就可以發揮作用了,根據瀏覽器的路由跳轉到對應的頁面,這也就保證了我們的路由請求都能夠轉發給index頁面來進行處理。

這種問題一般是出現在伺服器一開始安裝Nginx的時候,沒有安裝SSL模塊。在不重裝Nignx的情況下,可以安裝如下方式進行操作:

執行如下命令

這一步只是以防萬一,可以省略

也可以直接執行 ./usr/local/nginx/sbin/nginx -t 看還會不會報錯就行

nginx報錯: [emerg] https protocol requires SSL support in /usr/local/nginx/conf/nginx.conf:50

⑷ web前端項目部署到伺服器:

執行成功後會生成dist文件

4.1 進入到nginx配置目錄:/usr/local/nginx/conf,對 nginx.conf 文件進行配置

使用include可以配置多個.conf文件,如一個項目一個配置文件。在同目錄下創建demo文件夾,並創建demo.conf配置文件

下面使用是以ip地址的方式創建的的配置文件

訪問地址:

其中dist名稱時可以修改,保持與/usr/local/nginx/html下cp名稱一致,否則會訪問不到;並且/usr/local/nginx/html目錄可存在同一ip下多個web項目。

域名與ip綁定

配置域名demo.conf
eg: 域名 - demo.cn

4.2阿里雲配置域名前綴
阿里雲->域名->域名列表—>域名 管理-> 域名解析->解析設置

如圖:記錄值 填寫當前服務ip

學習過程中所記錄,有問題或者有好的方式歡迎指點。不勝感激 🤗 🤗 🤗

⑸ nginx部署多個前端項目

這里就不介紹同一埠和同一nginx.conf,有需要的童鞋自行網路。
這里介紹不同項目的不同配置。
伺服器中已經部署了其他項目,這里做一個簡單的頁面做測試:

1、新建目錄:
/root/nginx/8571/
/root/nginx/8571/html/
/root/nginx/8571/log/

2、將文件:/usr/sbin/nginx 拷貝至 /root/nginx/8571/
3、新建index.html:/root/nginx/8571/html/index.html

4、新建配置文件:/root/nginx/8571/nginx.conf

5、啟動 nginx
./nginx -c /root/nginx/8571/nginx.conf

注意:
若 nginx.conf 配置 location 後,重啟 nginx 再訪問,如果訪問提示:Nginx 403 Forbidden,則需要在 nginx.conf 頭部加入一行:

user root;

查看nginx埠使用情況:netstat -apn
啟動成功後輸入ip和埠8571訪問:

⑹ nginx部署前端純頁面

1.進入nginx配置文件vim .../nginx-1.9.12/conf/nginx.conf。

如上圖所示:第一個紅框中的內容就是應用伺服器的地址陪粗;第二個紅框中的內容就是前端包的位置。

此時,配置文件已經准備完畢。這個包和埠可以存在多個。

2.進入.../nginx-1.9.12/sbin 找到nginx的啟動程序。

nginx -c ../nginx-1.9.12/conf/nginx.conf    啟動蘆返鎮nginx程序,並指定配置文件。

3.如果要替換包,則直接替換就行,nginx為熱載入自動更新的。但是以防有緩存之類的存在,可以使用nginx -s reload命令進行重載一次。

追加 一 :

如果前端包的構造如下圖

則location配置依然如下圖

但是訪問地址則需要指定到具體的html文件上。。

綁定: http://127.0.0.1:48110/binding.html

成功: http://127.0.0.1:48110/success.html

失敗: http://127.0.0.1:48110/error.html

追加 二:

同一個埠部署多個頁面:

一個server下,多個 location。

location的作用就是是否有後綴,並且這個後綴會去拼接root後的地址。

比如第二個location /sis/。

則在訪問127.0.0.1:8080/sis時,會去自動尋找/apps/svr/nginx-1.9.12/pagefile/0921/sis這個包。  世明 (Ps:location後的地址一定要用 / 關閉,比如 location /sis/,不然訪問127.0.0.1:8080/sis時,會報錯,只有用127.0.0.1:8080/sis/才行。)

這樣就部署好了一個 埠支持多個頁面。

閱讀全文

與部署前端到雲伺服器nginx相關的資料

熱點內容
金碟專業版的伺服器如何啟動 瀏覽:401
谷輪壓縮機上海 瀏覽:723
兩對情侶互換的電影 瀏覽:347
linux的解壓gz命令 瀏覽:377
排序演算法的測試用例 瀏覽:411
linux終端編碼 瀏覽:141
程序員決定去擺攤 瀏覽:213
戰術手語圖解命令手語 瀏覽:58
不同視覺演算法優缺點 瀏覽:523
兩台伺服器一台存儲怎麼冗餘 瀏覽:125
android的層次結構圖 瀏覽:459
極簡雲是什麼垃圾伺服器 瀏覽:260
怎麼給電腦硬碟解壓 瀏覽:337
大廠程序員年薪多少 瀏覽:303
小黃人電影在線觀看 瀏覽:595
退火演算法求解背包問題 瀏覽:263
小米電視上的抖音短視頻app怎麼操作 瀏覽:958
哇聽app怎麼賺錢 瀏覽:378
銑床pdf 瀏覽:504
linux查看文件信息命令 瀏覽:564