一、部署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端口就可以之間訪問前端默認首頁了。
?我們試試和后端的交互,可以看出登錄成功。