docker compose一鍵打包部署項(xiàng)目的實(shí)踐

一、前言

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

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

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

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

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

• 對(duì)Docker有基本的了解
• 同時(shí)需要部署多個(gè)項(xiàng)目
• 需要開(kāi)源項(xiàng)目或者自建項(xiàng)目的整體部署
• 需要打包部署一整個(gè)網(wǎng)站

• Docker安裝并啟動(dòng)（演示版本如下）

• docker-compose（安裝Docker同時(shí)會(huì)自動(dòng)安裝，如果沒(méi)有可以自行安裝，也很簡(jiǎn)單）
• 一個(gè)前端項(xiàng)目（這里演示使用React SPA）
• 一個(gè)后端項(xiàng)目（這里使用Express）

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

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

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

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

2、引入Axios可以請(qǐng)求接口

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

2、拉取Nginx鏡像部署

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

當(dāng)前項(xiàng)目的路徑是/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配置到項(xiàng)目中

首先，我們進(jìn)入上一步的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、編寫(xiě)Dockerfile文件

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

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

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

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

三、數(shù)據(jù)庫(kù)啟動(dòng)

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

复制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

一行命令啟動(dòng)Mariadb，這里選擇Mariadb是由于我m1的電腦，不支持mysql鏡像，所以改成了Mariadb，使用是一樣。上面的命令除了啟動(dòng)數(shù)據(jù)庫(kù)服務(wù)，還設(shè)置了數(shù)據(jù)的一些配置，密碼，將數(shù)據(jù)庫(kù)的數(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 #忽略表名大小寫(xiě)
复制[client]复制default-character-set=utf8复制[mysql]复制default-character-set=utf8

2、新建庫(kù)和表

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

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

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

2、拉起鏡像，部署鏡像

部署服務(wù)，我們選擇使用pm2，為了區(qū)分生產(chǎn)環(huán)境和預(yù)發(fā)環(huán)境，我們?cè)诟夸浵滦陆╬m2.config.js，然后通過(guò)傳入不同的參數(shù)，啟動(dòng)對(duì)應(yīng)的環(huán)境

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

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

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

審核編輯：湯梓紅