一、前言

我們常常見到很多比較棒的開源項目，但在本地安裝運行的話就會很復雜，要配置不同的環境，安裝不同的依賴，好一點的會用docker直接拉取，或者打包好。

這些無疑都會增加初學者上手的成本，所以這篇文章總結了下目前比較常用的解決方法之一：

使用docker-compose同時管理多個服務，只需要一行命令docker compose up -d，就可以啟動一個包含后端項目、前端項目、數據庫的完整服務。

而docker-compose作為docker容器的編排工具，可以幫助我們實現管理多個docker容器。

其實整體的過程并不難，但要配置完成，也要很多步驟，這篇文章主要是從實戰的角度，將整個過程串起來。涉及的知識點包括：nginx、docker、docker-compose、node、mysql也需要了解下。

適合讀下去的朋友：

• 對Docker有基本的了解

• 同時需要部署多個項目

• 需要開源項目或者自建項目的整體部署

• 需要打包部署一整個網站

需要提前準備的：

• Docker安裝并啟動（演示版本如下）

• docker-compose（安裝Docker同時會自動安裝，如果沒有可以自行安裝，也很簡單）

• 一個前端項目（這里演示使用React SPA）

• 一個后端項目（這里使用Express）

如圖所示，通過docker-componse.yml文件一次啟動不同的容器，然后他們都可以對外提供服務。

二、前端項目構建

1、前端項目處理

首先我們通過CRA下載一個項目模版，為了可以模擬實際的項目需要，對下載的模版做一些處理，讓這個項目可以

• 1、區分當前項目是預發環境還是生產環境

• 2、引入Axios可以請求接口

接著我們打包yarn build:prod，打包后的文件夾build就是我們要部署的靜態資源。

在前面工程化實踐過程中提過相關內容，如果有問題可以參考下

• 前端工程化實踐 - React項目配置預發環境和生產環境（三）

2、拉取Nginx鏡像部署

我們通過Docker部署前面打包的靜態資源

當前項目的路徑是 /Users/user/Desktop/mine/fronted-demo2/build

直接運行下面命令行，啟動前端服務

docker run -d -p 80:80 -v /Users/user/Desktop/mine/fronted-demo2/build:/usr/share/nginx/html --name frontend-test nginx 復制代碼

通過本機80端口訪問，發現當前服務是生產環境，并且由于后端服務沒有部署，此時數據庫拿到的數據為空。

測試，我們切換路由，發現頁面404了，是因為單頁面應用路由在前端，需要nginx轉發下，接著我們用項目中的Nginx配置覆蓋容器中的配置

3、提取Nginx配置到項目中

首先，我們進入上一步的Docker容器，可以看到Nginx的路徑。

docker exec -it frontend-test /bin/bash 復制代碼

在項目根目錄下新建nginx/default.conf

server {     listen  80;     server_name  localhost;     underscores_in_headers  on;     root /home/frontend;     location / {       try_files $uri $uri/ @router;       index index.html;     }     location @router {       rewrite ^.*$ /index.html last;     } } 復制代碼

然后通過掛載的方式，啟動容器，發現訪問正常。

4、編寫Dockerfile文件

FROM nginx WORKDIR /home/frontend COPY build . COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf EXPOSE 80 復制代碼

在項目根目錄下，新建Dockerfile文件，其中包括基礎鏡像、工作目錄、將項目copy到鏡像，將Nginx配置文件復制到鏡像中。

5、構建前端服務鏡像并啟動

docker build -t frontend . docker images docker run -d -p 80:80 --name frontend-v1 frontend 復制代碼

可以發現前端服務的鏡像已經打包完成并啟動，打開本地80端口訪問，測試完畢可以刪除，然后留鏡像frontend備用。也可以將鏡像推送鏡像倉庫，后面直接通過遠程來拉取也可以。

主意：如果之前的Docker容器啟動，需要先關掉，否則會報端口被占用，如果不刪除，就需要修改重新啟動容器的名字。

三、數據庫啟動

1、拉取并啟動數據庫、連接數據庫

docker run -p 3306:3306 --restart=always --privileged=true --name mysql -v /Users/user/Desktop/mysql/data:/var/lib/mysql -v /Users/user/Desktop/mysql/my.cnf:/etc/mysql/my.cnf -e MYSQL_ROOT_PASSWORD="123456" -d mariadb 復制代碼

一行命令啟動Mariadb，這里選擇Mariadb是由于我m1的電腦，不支持mysql鏡像，所以改成了Mariadb，使用是一樣。上面的命令除了啟動數據庫服務，還設置了數據的一些配置，密碼，將數據庫的數據放在了本地。

[mysqld] skip-name-resolve user=root character-set-server=utf8 default_authentication_plugin=mysql_native_password sql_mode=ONLY_FULL_GROUP_BY,STRICT_TRANS_TABLES,ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION lower_case_table_names=1 #忽略表名大小寫 [client] default-character-set=utf8 [mysql] default-character-set=utf8 復制代碼

2、新建庫和表

這里可以進入容器中操作數據庫，還可以使用客戶端連接數據庫

四、后端項目啟動

1、下載Express項目模版并連接數據庫

這里配置數據庫，寫好項目接口，確保本地啟動服務正常。

2、拉起鏡像，部署鏡像

部署服務，我們選擇使用pm2，為了區分生產環境和預發環境，我們在根目錄下新建pm2.config.js，然后通過傳入不同的參數，啟動對應的環境

module.exports = {   apps : [       {         name: "myapp",         script: "./bin/www",         watch: true,         env: {             "NODE_ENV": "development"         },         env_production: {             "NODE_ENV": "production",         }       }   ] } 復制代碼

啟動預發環境pm2 start pm2.config.js --env development

啟動生產環境pm2 start pm2.config.js --env production

再項目中通過process.env.NODE_ENV讀取

3、編寫Dockerfile并構建新的鏡像

FROM keymetrics/pm2 RUN mkdir -p /home/backend WORKDIR /home/backend COPY ./ /home/backend RUN yarn install ENV NPM_CONFIG_LOGLEVEL warn EXPOSE 9000 CMD ["pm2-runtime", "start", "pm2.config.js", "--env", "production"] 復制代碼

然后構建鏡像docker build -t backend .

五、docker-compose.yml 配置

截止目前，我們有了三個Docker鏡像，分別是前端服務的鏡像，后端服務的鏡像和數據庫的鏡像。然后我們編寫docker-compose.yml來同時啟動這三個服務，并且保證三者的啟動順序

1、編寫docker-compose配置文件

新建一個目錄，然后再目錄下新建docker-compose.yml和目錄mysql，mysql中包含了mysql的數據和日志信息，這樣就不用重啟服務導致數據庫信息丟失

version: '3' networks:   app-web:    driver: bridge services:   mysql:     image: mariadb     ports:      - 3306:3306     command: --default-authentication-plugin=mysql_native_password     restart: always     networks:      - app-web     environment:      - TZ=Asia/Shanghai      - MYSQL_USER=root      - MYSQL_ROOT_PASSWORD=123456     volumes:      - ./mysql/data:/var/lib/mysql      - ./mysql/my.cnf:/etc/mysql/my.cnf      - /etc/localtime:/etc/localtime   backend:     image: backend     ports:      - 9000:9000     depends_on:      - mysql     networks:      - app-web   frontend:     image: frontend     ports:      - 80:80     depends_on:      - backend 復制代碼

看到這個配置不要怕，拆分開，其實很簡單，整個配置文件就是一個完整的項目，包括了mysql、backend、frontend，每個部分和配置Dockerfile差不多，增加了depends_on，很好理解，前置的服務需要提前部署，networks，讓不同的容器在相同的網絡中運行。

當然這只是提供了最基礎的配置，更復雜的配置需要根據使用場景來完善。

2、啟動服務

docker compose up -d 復制代碼

-d 是以守護進程的方式運行，通過docker ps可以查看當前所有運行中的服務。

docker compose down 復制代碼

該語句將會停止當前集群下的所有服務，并刪除容器。

到這里，我們的docker-compose整體打包部署一個網站已經完成了，過程中可能存在各種各樣的坑，但只要配置報錯日志進行查詢，就能一一解決。

如果需要重新部署一套，或者發布新版本，只需要更新docker-compose.yml就可以了

六、注意點

1、mysql配置

數據庫和項目的一些信息需要靈活配置，根據自己的需要。

2、自動遷移數據庫

我們發現，一些新的數據庫表，沒有進行初始化，導致需要手動處理，在項目中我們可以用腳本去，或者使用一些數據庫封裝的orm進行自動遷移。

3、一些報錯信息

解決辦法，修改mysql配置host為mysql

• 1、docker拉取鏡慢的話，可以考慮國內鏡像

• 2、前端、后端項目可以使用任意的語言，只要構架不同的鏡像就可以了。

docker查看日志

docker logs -f --tail 100 containerId