利用docker-compsoe部署先後端分離的項目

時間 2019-11-24

標籤利用 docker compsoe 部署後端分離項目欄目 Docker 简体版

原文原文鏈接

說在前面

咱們都知道，docker能夠實現很簡便的部署環境。如今咱們有一個先後端分離的項目，前端基於Vue開發、利用Webpakc打包爲dist文件夾。後端則是一個Node.js服務，提供API接口，前端和後端是分離的。因此咱們確定是前端項目一個container,後臺項目也是一個container。那麼若是是在生產環境，就會產生跨域問題。前端的請求要反向代理到後臺。你們確定首先想到的就是使用Nginx設置proxy_pass。是的沒有錯。那麼咱們有了這些想法。咱們如何經過docker-compose來實現呢？javascript

開始動手

其實我也是纔開始瞭解docker的。因此有不少不明白的地方，例如在docker裏面，是經過image生成一個container,那麼這個container，就能夠看成是一個獨立的系統，這個系統也就有本身獨立的端口。那麼就像咱們剛剛那樣的需求，假設咱們的前端在container1裏面暴露80端口，同時映射到宿主機的80端口，後端在container2裏面暴露3000端口，同時映射到宿主機的3000端口。那咱們反向代理請求的時候，是經過宿主機來反向代理呢，仍是經過container來實現呢？我在網上查閱並學習了不少其餘大佬的文章，還有官網的文檔。發現直接經過container就能夠實現這種需求。爲何呢？由於docker-compose，會將全部的container構建在同一網絡下，咱們要找其餘container，咱們只需經過docker-compose裏面的service name 便可找到。下面先來看看咱們的目錄:php

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是咱們的前端項目，server是咱們的後端項目。下面再來看看咱們的docker-compose.yml:css

version: '3'
  services:
  music-web:  #前端項目的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/    #掛載項目
      depends_on:
      - music-server
  music-server:    #後端項目的service name
      container_name: 'music-server-container'
      build: ./server  #根據server目錄下面的Dockerfile構建鏡像
      restart: always
      expose:
      - 3000
複製代碼

能夠看見，咱們經過volumes屬性將宿主機的nginx.conf掛載到容器內的nginx配置文件，用來覆蓋原有的配置文件,同時也將dist掛載到容器內。咱們將前端項目的容器暴露並映射給宿主機的80端口，咱們將後端項目的容器暴露3000端口。那麼咱們在哪裏實現反向代理請求呢？請看nginx.conf:html

#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;
          #音樂app項目
          location / {
          index index.html index.htm;   #添加屬性。 
          root /usr/share/nginx/html;   #站點目錄
          }
          #音樂app項目設置代理轉發
          location /api/ {
          proxy_pass  http://music-server:3000/;
          }
          error_page   500 502 503 504  /50x.html;
          location = /50x.html {
              root   /usr/share/nginx/html;
          }
      }
  }
複製代碼