---
# System prepended metadata

title: 第 11 章 Docker 三大功用實作範例完整演練
tags: [專案佈署, db, api, docker, docker-compose, '2021', web]

---

# 第 11 章 Docker 三大功用實作範例完整演練

# 簡化專案佈署流程觀念

https://i.imgur.com/MORsoJn.png
![](https://i.imgur.com/MORsoJn.png)


會用實務上常用的架構前端、後端、資料庫

# 簡化專案佈署流程實作


## 展示結果
```
cd docker-demo/tmp
# ls
# cd docker-course-grand-demo-compose-master
# ls
app db docker.yml web
docker-compose build --no-cache
docker-compose up -d
docker containr ls
echo $(docker-machine ip)
連過去
docker-compose down
```

## 佈署步驟建立

``
# ls -a`
# cat .env
``

docker-compose.yml 檔案
```
version: "3.7"
services: 
  mysql-db:
    container_name: mydb (container 叫這個名稱)
    build:
      context: ./db
    image: uopsdod/mysql-db-01 (image 叫這個名稱)
    ports: 
      - "3306:3306"
    environment:
      - MYSQL_ROOT_PASSWORD=${MYSQL_ROOT_PASSWORD} (這些在 .env裡)
      - MYSQL_USER=${MYSQL_USER}
      - MYSQL_PASSWORD=${MYSQL_PASSWORD}
      - MYSQL_DATABASE=${MYSQL_DATABASE}
    networks:
      my-bridge-001:
    volumes:
      - db-data:/var/lib/mysql
  java-app:
    container_name: myapp
    build:
      context: ./app
    image: uopsdod/java-app-01
    ports:
      - "8080:8080"
    command: ./wait-for-it.sh mydb:3306 -- java -jar target/accessing-data-mysql-0.0.1-SNAPSHOT.jar 
    environment:
      - DB_HOST_IP=mydb
    networks:
      my-bridge-001:
  react-web:
    container_name: myweb
    build:
      context: ./web
    image: uopsdod/react-web-01
    command: ./wait-for-it.sh ${API_HOST_IP}:8080 -- npm start
    ports: 
      - "3000:3000"
    environment:
      - REACT_APP_API_HOST_IP=${API_HOST_IP}


networks:
  my-bridge-001:

volumes:
  db-data:
```

## db 部份
```dockerfile=
# Derived from official mysql image (our base image)
FROM mysql

# Add the content of the sql-scripts/ directory to your image
# All scripts in docker-entrypoint-initdb.d/ are automatically
# executed during container startup
COPY ./sql-scripts/ /docker-entrypoint-initdb.d/


```

## app 部份
```dockerfile=
FROM maven:3-jdk-8
ENV DB_HOST_IP="localhost"
WORKDIR /usr/src/app
COPY . ./
COPY wait-for-it.sh ./wait-for-it.sh
RUN chmod +x wait-for-it.sh
RUN mvn clean package
CMD java -jar target/accessing-data-mysql-0.0.1-SNAPSHOT.jar
```

## web 部份
```dockerfile=
# image build phase
FROM node
WORKDIR /myapp
COPY package.json .
RUN npm install
COPY . .
COPY wait-for-it.sh ./wait-for-it.sh
RUN chmod +x wait-for-it.sh
# container running phase
CMD ["npm", "start"]
```

```
docker volume ls
docker network ls
docker container ls
docker network insepect network_id
```

# 建立乾淨測試環境

docker-compose.yaml，少了 volume
```
version: "3.7"
services: 
  mysql-db:
    container_name: mydb
    build:
      context: ./db
    image: uopsdod/mysql-db-01
    ports: 
      - "3306:3306"
    environment:
      - MYSQL_ROOT_PASSWORD=${MYSQL_ROOT_PASSWORD}
      - MYSQL_USER=${MYSQL_USER}
      - MYSQL_PASSWORD=${MYSQL_PASSWORD}
      - MYSQL_DATABASE=${MYSQL_DATABASE}
    networks:
      my-bridge-001:
    
  java-app:
    container_name: myapp
    build:
      context: ./app
    image: uopsdod/java-app-01
    ports:
      - "8080:8080"
    command: ./wait-for-it.sh mydb:3306 -- java -jar target/accessing-data-mysql-0.0.1-SNAPSHOT.jar 
    environment:
      - DB_HOST_IP=mydb
    networks:
      my-bridge-001:
  react-web:
    container_name: myweb
    build:
      context: ./web
    image: uopsdod/react-web-01
    command: ./wait-for-it.sh ${API_HOST_IP}:8080 -- npm start
    ports: 
      - "3000:3000"
    environment:
      - REACT_APP_API_HOST_IP=${API_HOST_IP}
networks:
  my-bridge-001:
```

```
docker-compose down
docker-compose build --no-cache
docker-compose up -d
echo $(docker-machine ip)
docker container ls
```

# 跨平台佈署

## 上傳 docker hub

1. 到Repository

```
docker-compose build --no-cache
docker images


docker push xxx/web
docker push xxx/app
docker push xxx/db

// 上面三個可以簡化成

docker-compose push 會把 docker-compose.yaml 裡面所設定的 image push 上去 

```

2. 到 docker hub

## mac 示範

```
docker rmi $(docker images -a -q)  // 刪除所有image
docker images
docker pull xxx/db
docker pull xxx/app
docker pull xxx/web
docker images
docker-compose up -d
echo $(docker-machine ip)
docker container ls
docker-compose down
docker-compose pull (會把 docker-compose 裡面定的image 一次抓下來)
```

## linux

```
sudo yum install -y git
git clone 專案連結
cd docker-xxxxx
ls -a

// 更改 .env 裡的 API_HOST_IP

// 安裝 docker-compose 指令
 sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose
/usr/local/bin/docker-compose --version
sudo docker images
sudo /usr/local/bin/docker-compose pull
sudo docker images
sudo /usr/local/bin/docker-compose up -d
sudo docker-container ls

// 找出對外IP

docker-compose down
```

## windows

下載 docker-course-grand-demo-compose-master

```
cd docker-course-grand-demo-compose-master
ls -a
cat .env
docker images
docker-compose pull
docker images
docker-compose up -d
docker container ls
echo $(docker-machine ip)
docker-compose down
```

###### tags: `2021` `docker` `docker-compose` `專案佈署` `web` `api` `db`


{%hackmd BJrTq20hE %}
