腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

Docker+Nginx打包部署前后端分離步驟實(shí)現(xiàn)

更新時(shí)間：2023年01月08日 15:47:08 作者：別團(tuán)等shy哥發(fā)育

這篇文章主要介紹了Docker+Nginx打包部署前后端分離步驟實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

問題描述

最近做了一個(gè)前后端分離的通用權(quán)限管理系統(tǒng)，今天想用自己的服務(wù)器部署下，本地部署測(cè)試是沒問題的，但是部署在服務(wù)器上還是出現(xiàn)了許多小插曲，這里大概記錄一下吧。

項(xiàng)目打包

前端項(xiàng)目打包

由于我需要在同一個(gè)端口號(hào)下使用nginx部署多個(gè)前端項(xiàng)目，所以需要額外設(shè)置一些東西。

修改vue.config.js文件

添加如下配置：

router配置中添加base屬性

const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes,
  base:'/guigu'
})

打包前端項(xiàng)目

執(zhí)行命令：

npm run build:prod

出現(xiàn)dist文件夾說明打包成功

后端項(xiàng)目打包

這里我跳過了test步驟

打包之后target文件夾下面會(huì)有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的配置分為兩個(gè)部分，第一個(gè)部分實(shí)現(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;
}

第二部分是將后端請(qǐng)求指向后端項(xiàng)目。這里直接替換了uri的前綴

prod-api

也就是說假設(shè)前端向后端發(fā)送的請(qǐng)求為

http://localhost:8800/prod-api/admin/system/index

經(jīng)過nginx反向代理后，實(shí)際上到達(dá)后端的uri為

http://localhost:8800/admin/system/index

至此，前端項(xiàng)目部署完畢

訪問

codeleader.top/guigu

會(huì)出現(xiàn)如下頁(yè)面說明前端部署成功

后端通過Dockerfile打包成docker鏡像

這里為什么使用docker?

我開始不想用這個(gè),是直接將jar包在服務(wù)器上部署的，覺得小項(xiàng)目沒必要用docker。

但是由于我以前搭建個(gè)人博客的時(shí)候裝的jdk11，這個(gè)項(xiàng)目使用jdk8開發(fā)的，環(huán)境不一致，docker的環(huán)境隔離機(jī)制非常適合現(xiàn)在這種情況，關(guān)于docker使用場(chǎng)景請(qǐng)看我docker專欄，這里不再贅述。

編寫Dockerfile

# 基礎(chǔ)鏡像使用java
FROM java:8
# 作者
MAINTAINER xtt
# VOLUME 指定臨時(shí)文件目錄為/tmp，在主機(jī)/var/lib/docker目錄下創(chuàng)建了一個(gè)臨時(shí)文件并鏈接到容器的/tmp
VOLUME /tmp
# 將jar包添加到容器中并更名為guigu_docker.jar
ADD service-system.jar guigu_docker.jar
# 運(yùn)行jar包
RUN bash -c 'touch /guigu_docker.jar'
ENTRYPOINT ["java","-jar","/guigu_docker.jar"]
#暴露8800端口作為微服務(wù)
EXPOSE 8800

構(gòu)建Docker鏡像

將打包的后端項(xiàng)目jar包和Dockerfile放在同一個(gè)目錄下面

執(zhí)行命令如下命令構(gòu)建鏡像：

docker build -t guigu_docker:1.0 .

查看構(gòu)建的鏡像

docker images

運(yùn)行容器

docker run -d -p 8800:8800 --name guigu-auth guigu_docker:1.0

運(yùn)行測(cè)試

點(diǎn)擊登錄按鈕，成功進(jìn)入系統(tǒng)，說明前后端部署成功。

現(xiàn)在這種部署方式跟部署單個(gè)微服務(wù)的方法一樣，但是生產(chǎn)中不可能只有一個(gè)微服務(wù)，所以需要借助容器編排來(lái)實(shí)現(xiàn)一次打包一堆微服務(wù)，包括docker-compose、docker swam、k8s、DevOps等這還需要大量的開發(fā)實(shí)踐才行，這些技術(shù)光學(xué)沒用，要在自己的項(xiàng)目中實(shí)踐才行。其實(shí)這里nginx和前端也可以用容器部署的,但這里暫時(shí)感覺沒必要。

開發(fā)+部署多有意思啊，現(xiàn)在整天搞自己不感興趣的方向已經(jīng)和當(dāng)初自己想象的研究生科研生涯完全不同了，這種感覺或許只有自己讀研之后才能感同身受了,雖有諸多無(wú)奈，但我絕不會(huì)放棄我所熱愛的技術(shù)，架構(gòu)師之路任重而道遠(yuǎn)。

以上就是Docker+Nginx打包部署前后端分離步驟實(shí)現(xiàn)的詳細(xì)內(nèi)容，更多關(guān)于Docker+Nginx部署前后端分離的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: