一、前言

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

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

使用docker-compose同時(shí)管理多個(gè)服務(wù)，只需要一行命令docker compose up -d，就可以啟動一個(gè)包含后端項(xiàng)目、前端項(xiàng)目、數(shù)據(jù)庫的完整服務(wù)。

而docker-compose作為docker容器的編排工具，可以幫助我們實(shí)現(xiàn)管理多個(gè)docker容器。

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

適合讀下去的朋友：

• 對Docker有基本的了解

• 同時(shí)需要部署多個(gè)項(xiàng)目

• 需要開源項(xiàng)目或者自建項(xiàng)目的整體部署

• 需要打包部署一整個(gè)網(wǎng)站

需要提前準(zhǔn)備的：

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

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

• 一個(gè)前端項(xiàng)目（這里演示使用React SPA）

• 一個(gè)后端項(xiàng)目（這里使用Express）

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

二、前端項(xiàng)目構(gòu)建

1、前端項(xiàng)目處理

首先我們通過CRA下載一個(gè)項(xiàng)目模版，為了可以模擬實(shí)際的項(xiàng)目需要，對下載的模版做一些處理，讓這個(gè)項(xiàng)目可以

• 1、區(qū)分當(dāng)前項(xiàng)目是預(yù)發(fā)環(huán)境還是生產(chǎn)環(huán)境

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

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

在前面工程化實(shí)踐過程中提過相關(guān)內(nèi)容，如果有問題可以參考下

• 前端工程化實(shí)踐 - React項(xiàng)目配置預(yù)發(fā)環(huán)境和生產(chǎn)環(huán)境（三）

2、拉取Nginx鏡像部署

我們通過Docker部署前面打包的靜態(tài)資源

當(dāng)前項(xiàng)目的路徑是 /Users/user/Desktop/mine/fronted-demo2/build

直接運(yùn)行下面命令行，啟動前端服務(wù)

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

通過本機(jī)80端口訪問，發(fā)現(xiàn)當(dāng)前服務(wù)是生產(chǎn)環(huán)境，并且由于后端服務(wù)沒有部署，此時(shí)數(shù)據(jù)庫拿到的數(shù)據(jù)為空。

測試，我們切換路由，發(fā)現(xiàn)頁面404了，是因?yàn)閱雾撁鎽?yīng)用路由在前端，需要nginx轉(zhuǎn)發(fā)下，接著我們用項(xiàng)目中的Nginx配置覆蓋容器中的配置

3、提取Nginx配置到項(xiàng)目中

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

docker exec -it frontend-test /bin/bash 復(fù)制代碼

在項(xiàng)目根目錄下新建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;     } } 復(fù)制代碼

然后通過掛載的方式，啟動容器，發(fā)現(xiàn)訪問正常。

4、編寫Dockerfile文件

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

在項(xiàng)目根目錄下，新建Dockerfile文件，其中包括基礎(chǔ)鏡像、工作目錄、將項(xiàng)目copy到鏡像，將Nginx配置文件復(fù)制到鏡像中。

5、構(gòu)建前端服務(wù)鏡像并啟動

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

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

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

三、數(shù)據(jù)庫啟動

1、拉取并啟動數(shù)據(jù)庫、連接數(shù)據(jù)庫

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 復(fù)制代碼

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

[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 復(fù)制代碼

2、新建庫和表

這里可以進(jìn)入容器中操作數(shù)據(jù)庫，還可以使用客戶端連接數(shù)據(jù)庫

四、后端項(xiàng)目啟動

1、下載Express項(xiàng)目模版并連接數(shù)據(jù)庫

這里配置數(shù)據(jù)庫，寫好項(xiàng)目接口，確保本地啟動服務(wù)正常。

2、拉起鏡像，部署鏡像

部署服務(wù)，我們選擇使用pm2，為了區(qū)分生產(chǎn)環(huán)境和預(yù)發(fā)環(huán)境，我們在根目錄下新建pm2.config.js，然后通過傳入不同的參數(shù)，啟動對應(yīng)的環(huán)境

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

啟動預(yù)發(fā)環(huán)境pm2 start pm2.config.js --env development

啟動生產(chǎn)環(huán)境pm2 start pm2.config.js --env production

再項(xiàng)目中通過process.env.NODE_ENV讀取

3、編寫Dockerfile并構(gòu)建新的鏡像

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"] 復(fù)制代碼

然后構(gòu)建鏡像docker build -t backend .

五、docker-compose.yml 配置

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

1、編寫docker-compose配置文件

新建一個(gè)目錄，然后再目錄下新建docker-compose.yml和目錄mysql，mysql中包含了mysql的數(shù)據(jù)和日志信息，這樣就不用重啟服務(wù)導(dǎo)致數(shù)據(jù)庫信息丟失

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 復(fù)制代碼

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

當(dāng)然這只是提供了最基礎(chǔ)的配置，更復(fù)雜的配置需要根據(jù)使用場景來完善。

2、啟動服務(wù)

docker compose up -d 復(fù)制代碼

-d 是以守護(hù)進(jìn)程的方式運(yùn)行，通過docker ps可以查看當(dāng)前所有運(yùn)行中的服務(wù)。

docker compose down 復(fù)制代碼

該語句將會停止當(dāng)前集群下的所有服務(wù)，并刪除容器。

到這里，我們的docker-compose整體打包部署一個(gè)網(wǎng)站已經(jīng)完成了，過程中可能存在各種各樣的坑，但只要配置報(bào)錯(cuò)日志進(jìn)行查詢，就能一一解決。

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

六、注意點(diǎn)

1、mysql配置

數(shù)據(jù)庫和項(xiàng)目的一些信息需要靈活配置，根據(jù)自己的需要。

2、自動遷移數(shù)據(jù)庫

我們發(fā)現(xiàn)，一些新的數(shù)據(jù)庫表，沒有進(jìn)行初始化，導(dǎo)致需要手動處理，在項(xiàng)目中我們可以用腳本去，或者使用一些數(shù)據(jù)庫封裝的orm進(jìn)行自動遷移。

3、一些報(bào)錯(cuò)信息

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

• 1、docker拉取鏡慢的話，可以考慮國內(nèi)鏡像

• 2、前端、后端項(xiàng)目可以使用任意的語言，只要構(gòu)架不同的鏡像就可以了。

docker查看日志

docker logs -f --tail 100 containerId