# Week1A<br>
## Containerize Your Application
[TOC]
----
Made by FanRende (030Mortal#5525)
<img src="https://img.ifunny.co/images/56a968fe258d40c8e31851cb37b7b8ff992961d3759a8fbbd348f32d5a195ff3_1.webp" width="60%">
---
## 簡單專案
用我的 [MortalGPT](https://github.com/zxcj04/MortalGPT) 作為範例
----
### Usage
1. Clone this repository.
2. Install dependencies: `pipenv install`
3. Create a Telegram bot with [BotFather](https://t.me/BotFather) and get the bot token.
4. Create a OpenAI account and get the API key.
5. Copy the file `.example.env` to `.env` and fill in the bot token and API key.
6. Run the bot: `pipenv run bot`
----
### 容器化步驟
- 建立 Dockerfile 設定環境
- 建置 Image (也可以在 docker compose 時再 build)
- 建立 docker-compose.yaml 定義容器行為
- 啟動容器
```
.
├── docker-compose.yaml
├── Dockerfile
└── MortalGPT
├── ...
```
----
#### Dockerfile
```dockerfile
FROM python:3.10-slim
WORKDIR /app
RUN pip install --upgrade pip && \
pip install pipenv && \
apt-get update && \
apt-get install -y vim git ffmpeg
COPY MortalGPT/Pipfile* MortalGPT/.env ./
RUN pipenv install
ENTRYPOINT pipenv run bot
```
----
#### docker-compose.yaml
```yaml
version: '3.9'
services:
bot:
build: .
restart: always
volumes:
- ./MortalGPT:/app
```
----
#### 啟動容器
`docker-compose up`
or
`docker compose up`
---
## 前後端專案
<div class="flex-container">
<div class="flex-content">
```
.
├── backend
│ ├── docker-compose.yaml
│ ├── main.py
│ ├── Pipfile
│ └── Pipfile.lock
├── frontend
│ ├── docker-compose.yaml
│ ├── index.html
│ ├── node_modules
│ ├── package.json
│ ├── package-lock.json
│ └── src
├── docker
│ ├── backend
│ │ └── Dockerfile
│ └── frontend
│ └── Dockerfile
└── Makefile
```
</div>
</div>
----
### Dockerfile
定義 Image 內容 把該裝的指令裝好
環境設定設好
----
#### frontend
```dockerfile
FROM node:18.15.0-slim
WORKDIR /app
RUN apt-get update && apt-get install -y vim
```
----
#### backend
```dockerfile
FROM python:3.9-slim
WORKDIR /app
RUN pip install --upgrade pip && pip install pipenv
RUN apt-get update && apt-get install -y vim
```
----
### docker-compose.yaml
----
#### frontend
```yaml
version: '3.9'
services:
frontend-dev:
image: example/frontend
container_name: example-frontend-dev
command: bash -c "npm install && npm run dev"
restart: always
ports:
- "8018:8018"
volumes:
- .:/app
```
----
#### backend
```yaml
version: '3.9'
services:
backend-dev:
image: example/backend
container_name: example-backend-dev
command: bash -c "pipenv install && pipenv run dev"
restart: always
ports:
- "5018:5018"
volumes:
- .:/app
```
----
### Makefile
----
#### build image
<div class="small">
```yaml
build-frontend:
@echo "---------------------------------"
@echo " Building frontend..."
@echo "---------------------------------"
@docker build -t example/frontend -f docker/frontend/Dockerfile frontend
build-backend:
@echo "---------------------------------"
@echo " Building backend..."
@echo "---------------------------------"
@docker build -t example/backend -f docker/backend/Dockerfile backend
build: build-frontend build-backend
```
</div>
----
#### run container
<div class="small">
```yaml
run-frontend-dev: build-frontend
@echo "---------------------------------"
@echo " Running frontend..."
@echo "---------------------------------"
@cd frontend && docker compose up -d frontend-dev && cd ../
run-backend-dev: build-backend
@echo "---------------------------------"
@echo " Running backend..."
@echo "---------------------------------"
@cd backend && docker compose up -d backend-dev && cd ../
run-dev: run-frontend-dev run-backend-dev
```
</div>
----
#### stop container
<div class="small">
```yaml
stop-frontend-dev:
@echo "---------------------------------"
@echo " Stopping frontend..."
@echo "---------------------------------"
@cd frontend && docker compose down frontend-dev && cd ../
stop-backend-dev:
@echo "---------------------------------"
@echo " Stopping backend..."
@echo "---------------------------------"
@cd backend && docker compose down backend-dev && cd ../
stop-dev: stop-frontend-dev stop-backend-dev
```
</div>
----
#### logs
<div class="small">
```yaml
log-frontend:
@echo "---------------------------------"
@echo " Logging frontend..."
@echo "---------------------------------"
@cd frontend && docker compose logs -f && cd ../
log-backend:
@echo "---------------------------------"
@echo " Logging backend..."
@echo "---------------------------------"
@cd backend && docker compose logs -f && cd ../
```
</div>
---
參考 / 延伸閱讀:
- [Containerize an application](https://docs.docker.com/get-started/02_our_app/)
- [Overview of Docker Compose](https://docs.docker.com/compose/)
<div class="flex-container">
<div class="flex-content">
</div>
<div class="flex-content">
</div>
</div>
<style>
.gray {
color: gray;
font-size: 0.5em;
}
.slides .rust {
font-size: 0.75em !important;
line-height: 1.2em !important;
}
.mermaid {
background-color: rgba(1, 1, 1, .2) !important;
}
.slides code {
background-color: #444 !important;
border-radius: 10px;
white-space : pre-wrap !important;
padding-right: 0.1em;
padding-left: 0.1em;
}
.code-wrapper code {
background-color: inherit !important;
border-radius: inherit;
}
.flex-container {
display: flex;
justify-content: center;
}
.flex-content {
flex-grow: 1;
font-size: 0.7em;
}
.small {
font-size: 0.9em;
}
</style>
<style>
/* Customize website's scrollbar like Mac OS */
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(128, 128, 128, 1);
-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
</style>
{"description":"","slideOptions":"{\"theme\":\"dark\",\"transition\":\"fade\",\"previewLinks\":false}","title":"Week1A - Containerize Your Application","contributors":"[{\"id\":\"82f6b599-31b8-4112-9dc5-7d7b7d6a3ebb\",\"add\":7369,\"del\":1084}]"}