您好,登錄后才能下訂單哦!
這篇文章主要介紹如何利用docker-compsoe部署前后端分離的項(xiàng)目,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
開始動(dòng)手
其實(shí)我也是才開始了解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.js
dist是我們的前端項(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)了反向代理。
以上是“如何利用docker-compsoe部署前后端分離的項(xiàng)目”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。