Docker部署Vue+Springboot項目

一、部署Springboot項目

? 1.1先將本地的java項目打成jar包。

? ? ? ? ?再右上角進行maven操作。

? 1.2將jar包上傳到服務器當中。

先再目錄/home 下創建一個文件夾(classRoom)用于存放后端打鏡像時需要的文件。

如果是服務器的話可以直接將文件拖拽到想要轉移的地方。

因為我們需要將這個jar包打成鏡像放在docker上運行,那么我們需要一個配置文件用于鏡像的運行。圖片中的Dockerfile就是這個配置文件,要注意這個兩個文件要放在同一目錄下。那么現在就開始來編寫配置文件。

DockerFile:(這里里面我只寫了必須的配置,其他配置都走的是默認配置)

#表示從名為 java 的官方鏡像庫中拉取標簽為 8 的鏡像作為基礎鏡像
FROM java:8   
#表示將構建上下文中的 classroom-realtime-feedback-0.0.1-SNAPSHOT.jar 文件復制到鏡像中的 #classroom-realtime-feedback.jar
COPY classroom-realtime-feedback-0.0.1-SNAPSHOT.jar classroom-realtime-feedback.jar
#聲明鏡像中的應用程序會監聽 8080 端口
EXPOSE 8080
#表示定義鏡像的入口點,即當容器啟動時,會執行 java -jar classroom-realtime-feedback.jar 命令來運行應用程序
ENTRYPOINT ["java","-jar","classroom-realtime-feedback.jar"]

1.3開始構建鏡像并運行容器。

????????要在classRom目錄下執行這條語句,注意最后還有一個“?.?”,這個點表示的是當前目目錄,表示使用當前目錄下的Dockerfile文件進行鏡像的構建一個名字為classroom-realtime-feedback的鏡像。

執行完語句之后我們可以看看有沒有這個鏡像。

那么后面我們就開始創建個容器執行這個鏡像。執行下面這條語句,可以看到我寫了三個端口映射,是因為我這個是websocket項目,有兩個端口是websocket監聽的。要注意如果你們項目有多個端口,那么一定要進行映射,不然請求就打不到后端。我之前就是只監聽了一個端口導致沒有ws請求沒有建立連接。所以這個端口映射是因項目而異。

????????這個語句的意思就是為名為classroom-realtime-feedback的鏡像創建一個容器名為classroom-realtime-feedback并運行。

?通過docker ps命令可以看到我們這個容器正在運行:

到此位置springboot項目已經部署成功。

二、部署vue項目(使用nginx配合轉發)

注意vue項目部署有一個大坑!!!

????????就是我正常部署完成后我的前端請求一直打不到后端,報post 405錯誤,然后我擱往上查了半天好多博客都說是什么nginx無法使用Post請求訪問靜態資源,要用GET請求。然后我按照他們的要求進行修改結果還是沒成功,結果最后發現并不是他們說的那樣。

? ? ? ? 是因為我之前再vue項目中使用了路由轉發。但是這個配置只有再開發環境時能生效,再生產環境時,無法生效,就是根本走不到這里來。所以導致url沒有進行處理,后端沒有對應的請求接口。再生產環境中我們要使用nginx進行轉發。

下面我們進行正式的Vue項目的部署?:

? 2.1 將本地vue項目使用npm run build項目進行構建。

? ??

2.2將本地的dist文件夾上傳到服務器當中?

現在服務器中創建一個文件夾 vue -nginx用于存放關于前端的文件

然后將dist文件拉去到vue-nginx文件夾中。因為我們需要以nginx為基礎鏡像構建鏡像,所以我們還得編寫一下nginx的配置文件(default.conf),用在其中編寫適合我們項目的轉發規則:

default.conf:

我再其中寫的轉發規則可以按照自己的路徑規則進行改寫

server {listen       80;server_name  自己服務器的ip; # 修改為docker服務宿主機的ip#這是最后進行匹配的location / {root   /usr/share/nginx/html;index  index.html index.htm;try_files $uri $uri/ /index.html =404;#error_page 405 =200 @405; }
#當url中有/test/的會將這個后面的和proxy_pass的路徑進行拼接再進行轉發
#如/test/login會變成自己后端ip+端口/login,然后進行轉發
location  ^~/test/ {proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  #ip為后端服務地址proxy_pass 自己后端ip+端口/;
}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}
}

編寫完nginx配置文件那么我們需要編寫鏡像配置文件Dockerfile:

FROM nginx
# 設置維護者信息
MAINTAINER wuing
# 刪除默認的配置文件
RUN rm /etc/nginx/conf.d/default.conf
# 添加你的配置文件到鏡像中
ADD default.conf /etc/nginx/conf.d/
# 將dist文件夾下的內容復制到鏡像的/usr/share/nginx/html/目錄下
COPY dist/ /usr/share/nginx/html/

這樣文件都準備好了,可以開始鏡像的創建了。

? ?2.3開始構建鏡像并運行容器

注意前端構建也要再前端目錄下進行構建,并需要“?.?”,表示根據當前路徑下的Dockerfile文件進行鏡像的構建。

然后還是創建容器,注意這里的80端口映射映射的是nginx的端口,要和那個配置文件了寫的一致

到此為止我也就構建完畢了,讓我們來看看效果:

三、效果演示

訪問服務器地址+9090端口就可以之間訪問前端默認首頁了。

?我們試試和后端的交互,可以看出登錄成功。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/163275.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/163275.shtml
英文地址,請注明出處:http://en.pswp.cn/news/163275.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

升級Cmake(不用卸載原有的版本)

1、下載需要的(版本)[https://cmake.org/download/] https://cmake.org/download/ 2、解壓、編譯并安裝到制定目錄,修改環境變量 tar -zxvf cmake-3.20.0-rc1.tar.gz cd cmake-3.20.0-rc1 ./bootstrap --prefix/opt/cmake-install make make install 配置環境變量…

基準電壓源的工作原理和作用是什么(高精度電壓源)

基準電壓源是一種能夠提供固定、穩定的直流電壓輸出的電源設備。它廣泛應用于精密儀器、測試設備、通信設備等領域,是實現精確電壓測量和校準的重要工具。本文將為您介紹基準電壓源的工作原理和作用。 一、基準電壓源的工作原理 基準電壓源采用了高精度的電路設計和…

Sam Altman回歸OpenAI,新董事會成員曝光!

11月22日下午,OpenAI在社交平臺宣布,在原則上已達成協議,讓 Sam Altman重返 OpenAI擔任首席執行官,并重組董事會。稍后會公布更詳細的內容。 初始董事會成員包括前Salesforce聯合首席執行官Bret Taylor(擔任主席&…

python 使用redis分布式鎖的實例

在分布式系統中,處理并發請求是一個常見的挑戰。一個經典的場景是多個用戶同時嘗試從一個共享資源中進行取款操作。為了確保賬戶余額的一致性,我們需要使用鎖來防止多個線程同時修改賬戶余額。在本文中,我們將使用 Redis 鎖來實現這個目標。 …

鴻蒙開發-ArkTS 語言

鴻蒙開發-ArkTS 語言 1. 初識 ArkTS 語言 ArkTS 是 HarmonyOS 優選主力開發語言。ArkTS 是基于 TS(TypeScript)擴展的一門語言,繼承了 TS 的所以特性,是TS的超集。 主要是擴展了以下幾個方面: 聲明式UI描述和自定義組件: ArkTS允…

淺談Linux bash腳本----getopts獲取腳本POSIX標準傳參

getopts是一個在 Shell 腳本中用于解析命令行選項的內置命令。 它用于處理腳本的參數,使得腳本可以接受不同的選項和參數,并根據用戶提供的輸入采取相應的操作。 getopts 命令基于 POSIX 標準,并且通常與 while 循環結合使用。它的語法如下…

labview 安捷倫 34970A 采集溫度等

本文詳細描述了怎么用安捷倫34970A采集溫度,并列出了labview的下載鏈接,具有一定的參考價值。 1.必要條件: RS-232電纜一根 IO Libraries Suite 軟件 BenchLink Data Logger 軟件 軟件可以在http://www.keysight.com.cn下載 檢查RS-232…

SQLite3 數據庫學習(五):Qt 數據庫高級操作

參考引用 SQLite 權威指南&#xff08;第二版&#xff09;SQLite3 入門 1. Qt 數據庫密碼加密 MD5 加密在線工具 1.1 加密流程 加密后的密碼都是不可逆的 1.2 代碼實現 loginsqlite.h #ifndef LOGINSQLITE_H #define LOGINSQLITE_H#include <QWidget> #include <Q…

通過Whisper模型將YouTube播放列表中的視頻轉換成高質量文字稿的項目

項目簡介 一個通過Whisper模型將YouTube播放列表中的視頻轉換成高質量文字稿的項目。 這個基于 Python 的工具旨在將 YouTube 視頻和播放列表轉錄為文本。它集成了多種技術&#xff0c;例如用于轉錄的 Fast-Whisper、用于自然語言處理的 SpaCy 以及用于 GPU 加速的 CUDA&…

pytest測試框架介紹(1)

又來每天進步一點點啦~~~ 一、Pytest介紹&#xff1a; pytest 是一個非常成熟的全功能的Python測試框架&#xff1b; pytest 簡單、靈活、易上手&#xff1b; 支持參數化 能夠支持簡單的單元測試和復雜的功能測試&#xff0c;可以做接口自動化測試&#xff08;pytestrequests&…

根據商品鏈接獲取拼多多商品詳情數據接口|拼多多商品詳情價格數據接口|拼多多API接口

拼多多&#xff0c;作為中國最大的社交電商之一&#xff0c;為賣家提供了豐富的商品詳情接口。這些接口可以幫助賣家快速獲取商品信息&#xff0c;提高銷售效率。本文將詳細介紹如何使用拼多多商品詳情接口&#xff0c;以及它的優勢和注意事項。 一、拼多多商品詳情接口概述 …

Picasso網絡原生PICA Token通過XCM集成進入Moonriver生態

波卡上的首選多鏈開發平臺Moonbeam宣布Moonriver和Picasso&#xff08;分別為Moonbeam和Composable Finance的Kusama對應平行鏈&#xff09;已達成XCM集成。該集成將Picasso的PICA Token引入Moonriver生態系統使用&#xff0c;并允許用戶在Picasso網絡上使用MOVR。兩條平行鏈都…

大宗商品貿易集團數據治理實踐,夯實數字基座 | 數字化標桿

某大型央企是首批全國供應鏈創新與應用示范企業&#xff0c;在“十四五”規劃期內以聚焦供應鏈管理核心主業作為主要戰略發展方向。供應鏈運營管理以大宗商品貿易為主&#xff0c;其交易往往具有交易量巨大、交易環節復雜、風險交易難識別、風險客商難管控等痛點。 隨著集團數…

豬肉罐頭加工污水處理設備生產廠家價格

豬肉罐頭加工污水處理設備生產廠家價格 設備原理 廢水由收集管網收集&#xff0c;自流進入格柵渠&#xff0c;通過格柵除污機去除大塊碎肉、漂浮物&#xff0c;入初沉池把有利于沉淀的非溶解物質加以沉淀&#xff0c;然后自流進入調節池&#xff0c;由調節池調節水量和均化水質…

五分鐘搭建開源ERP:Odoo,并實現公網遠程訪問

文章目錄 前言1. 下載安裝Odoo&#xff1a;2. 實現公網訪問Odoo本地系統&#xff1a;3. 固定域名訪問Odoo本地系統 前言 Odoo是全球流行的開源企業管理套件&#xff0c;是一個一站式全功能ERP及電商平臺。 開源性質&#xff1a;Odoo是一個開源的ERP軟件&#xff0c;這意味著企…

小豬優版的前世今生:從籍籍無名到行業矚目,再到驟變的風暴中心

1. 前世&#xff1a;籍籍無名到行業新星的崛起 小豬優版在初創時期&#xff0c;并不被大眾所知。然而&#xff0c;它憑借對短視頻行業的深度洞察&#xff0c;以及獨特的商業模式&#xff0c;開始在這個領域嶄露頭角。它提供了一個平臺&#xff0c;不僅助力內容創作者更好地展現…

使用whisper實現語音轉文本

項目地址&#xff1a;GitHub - openai/whisper: Robust Speech Recognition via Large-Scale Weak Supervision 1、需要py3.8環境 conda activate p38 2、安裝 pip install -U openai-whisper 3、下載項目 pip install githttps://github.com/openai/whisper.git 4、安裝…

6:kotlin 空值安全(Null safety)

在Kotlin中&#xff0c;是可以有空值的。為了防止程序中出現空值問題&#xff0c;Kotlin實施了空值安全。空值安全在編譯時而不是運行時檢測到可能的空值問題。 空值安全是一組功能的組合&#xff0c;允許您&#xff1a; 明確聲明程序中允許空值的地方。檢查空值。對可能包含…

如何避免Steam搬磚項目中賬號被盜

購買steam余額有風險嗎&#xff1f;及N種被紅鎖的情況 相信最近很多人都已經聽說過steam游戲搬磚這個項目&#xff0c;也叫CSGO游戲搬磚項目&#xff0c;還有人叫它&#xff1a;國外steam游戲匯率差項目&#xff0c;無論怎么稱呼&#xff0c;都是同一個項目。 那么什么是stea…

2022-4-10 臺大機器人學 軌跡

臺大機器人學 運動學 軌跡規劃 多段 linear function with parabolic blends 直線轉二次曲線平滑過多個中間via points