From b1a82893a2f5a5bfcc179c94ec73f621b0957e01 Mon Sep 17 00:00:00 2001
From: alimy <alimy@gility.net>
Date: Wed, 8 Jun 2022 07:51:51 +0800
Subject: [PATCH] optimize #68 add docker --build-arg support

---
 Dockerfile     | 19 +++++++++++++++++--
 README.md      | 34 +++++++++++++++++++++++++++++++++-
 web/.env       |  2 +-
 web/Dockerfile | 14 ++++++++++++--
 4 files changed, 63 insertions(+), 6 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 39f8608c..880ffcec 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,11 +1,21 @@
 # build frontend
 FROM node:18-alpine as frontend
+ARG API_HOST
+ARG USE_API_HOST=yes
+ARG EMBED_UI=yes
+ARG USE_DIST=no
 WORKDIR /web
 COPY web/ ./
-RUN echo 'VITE_HOST=""'>.env && yarn && yarn build
+RUN [ $EMBED_UI != yes ] || [ $USE_API_HOST != yes ] || echo "VITE_HOST='$API_HOST'">.env
+RUN [ $EMBED_UI != yes ] || [ $USE_DIST != no ] || (yarn && yarn build)
+RUN [ $EMBED_UI = yes ] || mkdir dist || echo ""
 
 # build backend
 FROM golang:1.18-alpine AS backend
+ARG API_HOST
+ARG USE_API_HOST=yes
+ARG EMBED_UI=yes
+ARG USE_DIST=no
 RUN apk --no-cache --no-progress add --virtual \
   build-deps \
   build-base \
@@ -15,9 +25,14 @@ WORKDIR /paopao-ce
 COPY . .
 COPY --from=frontend /web/dist ./web/dist
 ENV GOPROXY=https://goproxy.cn
-RUN make build TAGS='embed'
+RUN [ $EMBED_UI != yes ] || make build TAGS='embed'
+RUN [ $EMBED_UI = yes ] || make build
 
 FROM alpine:3.16
+ARG API_HOST
+ARG USE_API_HOST=yes
+ARG EMBED_UI=yes
+ARG USE_DIST=no
 ENV TZ=Asia/Shanghai
 RUN apk update && apk add --no-cache ca-certificates && update-ca-certificates
 
diff --git a/README.md b/README.md
index edef78a9..6abdee00 100644
--- a/README.md
+++ b/README.md
@@ -111,6 +111,24 @@ PaoPao主要由以下优秀的开源项目/工具构建
     ```
     提示: 如果需要内嵌web前端ui，请先构建web前端(建议设置web/.env为VITE_HOST="")。
 
+ 5. docker构建
+    ```sh
+     # 默认参数构建, 默认内嵌web ui并设置api host为空
+     %> docker build -t your/paopao-ce:tag .
+
+     # 内嵌web ui并且自定义API host参数
+     %> docker build -t your/paopao-ce:tag --build-arg API_HOST=http://paopao.info .
+
+     # 内嵌web ui并且使用本地web/.env中的API host
+     %> docker build -t your/paopao-ce:tag --build-arg USE_API_HOST=no .
+
+     # 内嵌web ui并且使用本地编译的web/dist构建
+     %> docker build -t your/paopao-ce:tag --build-arg USE_DIST=yes .
+
+     # 只编译api server
+     %> docker build -t your/paopao-ce:tag --build-arg EMBED_UI=no .
+    ```
+
 #### 前端
 
 1. 进入前端目录 `web`，编辑 `.env` 文件中后端服务地址，下载依赖包
@@ -129,6 +147,20 @@ PaoPao主要由以下优秀的开源项目/工具构建
 
     build完成后，可以在dist目录获取编译产出，配置nginx指向至该目录即可
 
+3. 使用Docker构建
+   ```sh
+   %> cd web
+
+   # 默认参数构建
+   %> docker build -t your/paopao-ce:web .
+
+   # 自定义API host 参数构建
+   %> docker build -t your/paopao-ce:web --build-arg API_HOST=http://paopao.info .
+
+   # 使用本地编译的dist构建
+   %> docker build -t your/paopao-ce:web --build-arg USE_DIST=yes .
+   ```
+
 #### 桌面端
 
 1. 进入前端目录 `web`，编辑 `.env` 文件中后端服务地址，下载依赖包
@@ -174,7 +206,7 @@ PaoPao主要由以下优秀的开源项目/工具构建
     volumes:
       - ./config.yaml:/app/paopao-ce/config.yaml
     ports:
-      - 127.0.0.1:8008:8008
+      - 8008:8008
     networks:
       - paopao-network
 ....
diff --git a/web/.env b/web/.env
index 90a3290e..292ec20f 100644
--- a/web/.env
+++ b/web/.env
@@ -1 +1 @@
-VITE_HOST="https://api.paopao.info"
\ No newline at end of file
+VITE_HOST=""
\ No newline at end of file
diff --git a/web/Dockerfile b/web/Dockerfile
index 0f32757a..4c67e603 100644
--- a/web/Dockerfile
+++ b/web/Dockerfile
@@ -1,9 +1,19 @@
-FROM library/nginx
+# build frontend
+FROM node:18-alpine as frontend
+ARG API_HOST
+ARG USE_DIST=no
+WORKDIR /web
+COPY . .
+RUN [ empty$API_HOST = empty ] || echo "VITE_HOST=$API_HOST" >.env
+RUN [ $USE_DIST != no ] || (yarn && yarn build)
 
+FROM library/nginx
+ARG API_HOST
+ARG USE_DIST=no
 USER root
 
 # copy static files
-COPY ./dist/ /usr/share/nginx/html/
+COPY --from=frontend /web/dist/ /usr/share/nginx/html/
 
 # HEALTHCHECK
 HEALTHCHECK --interval=5s --timeout=3s  --retries=3  CMD service nginx status | grep running || exit 1
\ No newline at end of file