一、前言

我們常常見到很多比較棒的開源項目，但在本地安裝運行的話就會很復雜，要配置不同的環境，安裝不同的依賴，好一點的會用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）

二、前端項目構建

1、前端項目處理

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

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

2、引入Axios可以請求接口

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

2、拉取Nginx鏡像部署

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

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

dockerrun-d-p80:80-v/Users/user/Desktop/mine/fronted-demo2/build:/usr/share/nginx/html--namefrontend-testnginx

3、提取Nginx配置到項目中

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

docker exec -it frontend-test /bin/bash

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

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

docker build -t frontend .
docker images
docker run -d -p 80:80 --name frontend-v1 frontend

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

三、數據庫啟動

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

dockerrun-p3306:3306--restart=always--privileged=true--namemysql-v/Users/user/Desktop/mysql/data:/var/lib/mysql-v/Users/user/Desktop/mysql/my.cnf:/etc/mysql/my.cnf-eMYSQL_ROOT_PASSWORD="123456"-dmariadb

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

[mysqld]skip-name-resolveuser=rootcharacter-set-server=utf8default_authentication_plugin=mysql_native_passwordsql_mode=ONLY_FULL_GROUP_BY,STRICT_TRANS_TABLES,ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTIONlower_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",        }      }  ]}

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

FROM keymetrics/pm2
RUN mkdir -p /home/backend
WORKDIR/home/backend

審核編輯：湯梓紅