利用docker-compsoe部署前后端分離的項(xiàng)目
說(shuō)在前面
我們都知道，docker可以實(shí)現(xiàn)很簡(jiǎn)便的部署環(huán)境。現(xiàn)在我們有一個(gè)前后端分離的項(xiàng)目，前端基于Vue開(kāi)發(fā)、利用Webpakc打包為dist文件夾。后端則是一個(gè)Node.js服務(wù)，提供API接口，前端和后端是分離的。所以我們肯定是前端項(xiàng)目一個(gè)container,后臺(tái)項(xiàng)目也是一個(gè)container。那么如果是在生產(chǎn)環(huán)境，就會(huì)產(chǎn)生跨域問(wèn)題。前端的請(qǐng)求要反向代理到后臺(tái)。大家肯定首先想到的就是使用Nginx設(shè)置proxy_pass。是的沒(méi)有錯(cuò)。那么我們有了這些想法。我們?nèi)绾瓮ㄟ^(guò)docker-compose來(lái)實(shí)現(xiàn)呢？
開(kāi)始動(dòng)手
其實(shí)我也是才開(kāi)始了解docker的。所以有很多不明白的地方，例如在docker里面，是通過(guò)image生成一個(gè)container,那么這個(gè)container，就可以當(dāng)作是一個(gè)獨(dú)立的系統(tǒng)，這個(gè)系統(tǒng)也就有自己獨(dú)立的端口。那么就像我們剛剛那樣的需求，假設(shè)我們的前端在container1里面暴露80端口，同時(shí)映射到宿主機(jī)的80端口，后端在container2里面暴露3000端口，同時(shí)映射到宿主機(jī)的3000端口。那我們反向代理請(qǐng)求的時(shí)候，是通過(guò)宿主機(jī)來(lái)反向代理呢，還是通過(guò)container來(lái)實(shí)現(xiàn)呢？我在網(wǎng)上查閱并學(xué)習(xí)了很多其他大佬的文章，還有官網(wǎng)的文檔。發(fā)現(xiàn)直接通過(guò)container就可以實(shí)現(xiàn)這種需求。為什么呢？因?yàn)閐ocker-compose，會(huì)將所有的container構(gòu)建在同一網(wǎng)絡(luò)下，我們要找其他container，我們只需通過(guò)docker-compose里面的service name 即可找到。 下面先來(lái)看看我們的目錄:
vueMusic
??├─ .git
??├─ .gitignore
??├─ LICENSE
??├─ README.md
??├─ babel.config.js
??├─ dist
??├─ docker-compose.yml
??├─ docs
??├─ nginx.conf
??├─ package-lock.json
??├─ package.json
??├─ public
??├─ server
??├─ src
??└─ vue.config.jsdist是我們的前端項(xiàng)目，server是我們的后端項(xiàng)目。 下面再來(lái)看看我們的docker-compose.yml:
version: '3'
??services:
??music-web: #前端項(xiàng)目的service name
??????container_name: 'music-web-container'??#容器名稱
??????image: nginx #指定鏡像
??????restart: always
??????ports:
??????- 80:80
??????volumes:
??????- ./nginx.conf:/etc/nginx/nginx.conf #掛載nginx配置
??????- ./dist:/usr/share/nginx/html/ #掛載項(xiàng)目
??????depends_on:
??????- music-server
??music-server: #后端項(xiàng)目的service name
??????container_name: 'music-server-container'
??????build: ./server #根據(jù)server目錄下面的Dockerfile構(gòu)建鏡像
??????restart: always
??????expose:
??????- 3000可以看見(jiàn)，我們通過(guò)volumes屬性將宿主機(jī)的nginx.conf掛載到容器內(nèi)的nginx配置文件，用來(lái)覆蓋原有的配置文件,同時(shí)也將dist掛載到容器內(nèi)。我們將前端項(xiàng)目的容器暴露并映射給宿主機(jī)的80端口，我們將后端項(xiàng)目的容器暴露3000端口。那么我們?cè)谀睦飳?shí)現(xiàn)反向代理請(qǐng)求呢？請(qǐng)看nginx.conf:
#user nobody;
??worker_processes??1;
??events?{
??????worker_connections??1024;
??}
??http?{
??????include???????mime.types;
??????default_type??application/octet-stream;
??????sendfile????????on;
??????#tcp_nopush on;
??????#keepalive_timeout 0;
??????keepalive_timeout??65;
??????#gzip on;
??????gzip?on;
??????gzip_min_length??5k;
??????gzip_buffers?????4?16k;
??????#gzip_http_version 1.0;
??????gzip_comp_level?3;
??????gzip_types?text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
??????gzip_vary?on;
??????server?{
??????????listen??80;
??????????server_name??www.xieyezi.com;
??????????#音樂(lè)app項(xiàng)目
??????????location?/ {
??????????index?index.html index.htm; #添加屬性。
??????????root?/usr/share/nginx/html; #站點(diǎn)目錄
??????????}
??????????#音樂(lè)app項(xiàng)目設(shè)置代理轉(zhuǎn)發(fā)
??????????location?/api/ {
??????????proxy_pass??http://music-server:3000/;
??????????}
??????????error_page???500?502?503?504??/50x.html;
??????????location?= /50x.html {
??????????????root???/usr/share/nginx/html;
??????????}
??????}
??}可以看上面的proxy_pass http://music-server:3000/;。其中music-server是我們后端項(xiàng)目的服務(wù)名，我們通過(guò)服務(wù)名來(lái)找到這個(gè)容器，這樣就實(shí)現(xiàn)了反向代理。
部署
- 到我們的服務(wù)器，指定一個(gè)目錄，利用git拉取我們的項(xiàng)目。
- 進(jìn)入項(xiàng)目的根目錄，執(zhí)行docker-compose up -d 運(yùn)行服務(wù)。
- 執(zhí)行docker ps即可看見(jiàn)我們剛剛啟動(dòng)的容器。
部署的架構(gòu)圖
這里還有我另外一個(gè)項(xiàng)目：resume
總結(jié)
我們應(yīng)當(dāng)保持一個(gè)虔誠(chéng)謙虛的態(tài)度去學(xué)習(xí)。也許你已經(jīng)熟知某一領(lǐng)域，別人向你請(qǐng)教的時(shí)候，請(qǐng)不要高高在上、目中無(wú)人。每個(gè)厲害的大牛，都是小人物成長(zhǎng)起來(lái)的，誰(shuí)都有這樣一個(gè)過(guò)程。所以，人生苦短，請(qǐng)與人為善。
作者：覺(jué)非
鏈接：https://juejin.im/post/6844903926077063176