Docker+Nginx打包部署前后端分離步驟實現(xiàn)
問題描述
最近做了一個前后端分離的通用權(quán)限管理系統(tǒng)，今天想用自己的服務(wù)器部署下，本地部署測試是沒問題的，但是部署在服務(wù)器上還是出現(xiàn)了許多小插曲，這里大概記錄一下吧。
項目打包
前端項目打包
由于我需要在同一個端口號下使用nginx部署多個前端項目，所以需要額外設(shè)置一些東西。
修改vue.config.js文件
添加如下配置：
router配置中添加base屬性
const createRouter = () => new Router({
// mode: 'history', // require service support
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes,
base:'/guigu'
})
打包前端項目
執(zhí)行命令：
npm run build:prod
出現(xiàn)dist文件夾說明打包成功
后端項目打包
這里我跳過了test步驟
打包之后target文件夾下面會有jar包
將前端和后端的打包文件上傳到服務(wù)器
這里上傳的方法較多，不過多贅述了。
將dist.tgz文件解壓即可
tar -zxvf dist.tgz -C
寫你的解壓路徑即可
nginx反向代理配置
部分配置如下：
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
proxy_pass http://blog;
proxy_set_header HOST $host;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
location ^~/prod-api/ {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-NginX-Proxy true;
proxy_pass http://127.0.0.1:8800/;
}
# guigu-auth配置
location /guigu {
alias /opt/guigu-auth/guigu-front/;
index index.html index.htm;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}上面nginx.conf的配置分為兩個部分，第一個部分實現(xiàn)前端vue的映射，
即將
/opt/guigu-auth/guigu-front/index.html
映射成
127.0.0.1:8080/guigu
location /guigu {
alias /opt/guigu-auth/guigu-front/;
index index.html index.htm;
}第二部分是將后端請求指向后端項目。這里直接替換了uri的前綴
prod-api
也就是說假設(shè)前端向后端發(fā)送的請求為
http://localhost:8800/prod-api/admin/system/index
經(jīng)過nginx反向代理后，實際上到達后端的uri為
http://localhost:8800/admin/system/index
至此，前端項目部署完畢
訪問
codeleader.top/guigu
會出現(xiàn)如下頁面說明前端部署成功
后端通過Dockerfile打包成docker鏡像
這里為什么使用docker?
我開始不想用這個,是直接將jar包在服務(wù)器上部署的，覺得小項目沒必要用docker。
但是由于我以前搭建個人博客的時候裝的jdk11，這個項目使用jdk8開發(fā)的，環(huán)境不一致，docker的環(huán)境隔離機制非常適合現(xiàn)在這種情況，關(guān)于docker使用場景請看我docker專欄，這里不再贅述。
編寫Dockerfile
# 基礎(chǔ)鏡像使用java FROM java:8 # 作者 MAINTAINER xtt # VOLUME 指定臨時文件目錄為/tmp，在主機/var/lib/docker目錄下創(chuàng)建了一個臨時文件并鏈接到容器的/tmp VOLUME /tmp # 將jar包添加到容器中并更名為guigu_docker.jar ADD service-system.jar guigu_docker.jar # 運行jar包 RUN bash -c 'touch /guigu_docker.jar' ENTRYPOINT ["java","-jar","/guigu_docker.jar"] #暴露8800端口作為微服務(wù) EXPOSE 8800
構(gòu)建Docker鏡像
將打包的后端項目jar包和Dockerfile放在同一個目錄下面
執(zhí)行命令如下命令構(gòu)建鏡像：
docker build -t guigu_docker:1.0 .
查看構(gòu)建的鏡像
docker images
運行容器
docker run -d -p 8800:8800 --name guigu-auth guigu_docker:1.0
運行測試
點擊登錄按鈕，成功進入系統(tǒng)，說明前后端部署成功。
現(xiàn)在這種部署方式跟部署單個微服務(wù)的方法一樣，但是生產(chǎn)中不可能只有一個微服務(wù)，所以需要借助容器編排來實現(xiàn)一次打包一堆微服務(wù)，包括docker-compose、docker swam、k8s、DevOps等這還需要大量的開發(fā)實踐才行，這些技術(shù)光學(xué)沒用，要在自己的項目中實踐才行。其實這里nginx和前端也可以用容器部署的,但這里暫時感覺沒必要。
開發(fā)+部署多有意思啊，現(xiàn)在整天搞自己不感興趣的方向已經(jīng)和當(dāng)初自己想象的研究生科研生涯完全不同了，這種感覺或許只有自己讀研之后才能感同身受了,雖有諸多無奈，但我絕不會放棄我所熱愛的技術(shù)，架構(gòu)師之路任重而道遠。
以上就是Docker+Nginx打包部署前后端分離步驟實現(xiàn)的詳細內(nèi)容，更多關(guān)于Docker+Nginx部署前后端分離的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Docker的緩存機制是指當(dāng)你構(gòu)建鏡像時,Docker會盡可能重用之前步驟的輸出,本文主要介紹了一文弄懂docker的緩存機制,具有一定的參考價值,感興趣的可以了解一下2024-06-06
這篇文章主要介紹了docker-desktop啟動k8s,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細的介紹了快速安裝Docker的詳細步驟教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-03-03
這篇文章主要介紹了docker python api 安裝配置的詳解的相關(guān)資料,希望通過本文能幫助到大家，讓大家理解掌握這部分內(nèi)容，需要的朋友可以參考下2017-10-10
這篇文章主要介紹了Docker與Golang的巧妙結(jié)合的相關(guān)資料,需要的朋友可以參考下2016-10-10
使用docker創(chuàng)建和運行跨平臺的容器化mssql數(shù)據(jù)庫
這篇文章主要介紹了使用docker創(chuàng)建和運行跨平臺的容器化的mssql數(shù)據(jù)庫,本章介紹了在window10專業(yè)版下如何利用docker創(chuàng)建mssql數(shù)據(jù)庫，需要的朋友可以參考下2022-05-05
這篇文章主要介紹了Docker部署Consul配置過程解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-11-11
使用Maven打包構(gòu)建Docker鏡像并推送到倉庫
這篇文章主要介紹了使用Maven打包構(gòu)建Docker鏡像并推送到倉庫問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
本篇文章主要介紹了Docker私有倉庫最簡便的搭建方法，具有一定的參考價值，有興趣的可以了解一下。2017-02-02
Docker使用Calico網(wǎng)絡(luò)模式配置及問題處理方法
這篇文章主要介紹了Docker使用Calico網(wǎng)絡(luò)模式配置及問題處理,設(shè)計思想是Calico不使用隧道或者NAT來實現(xiàn)轉(zhuǎn)發(fā)，而是巧妙的把所有二三層流量轉(zhuǎn)換成三層流量，并通過host上路由配置完成跨host轉(zhuǎn)發(fā)，需要的朋友可以參考下2022-11-11