build: add dockerfile (#216)

* build: add dockerfile

Signed-off-by: lin594 <lin.yan@bupt.edu.cn>

* Update .env.example

---------

Signed-off-by: lin594 <lin.yan@bupt.edu.cn>

Author: lin594

.dockerignore

@@ -0,0 +1,5 @@
+node_modules
+docs
+dist
+.vscode
+.idea

.env.example

@@ -0,0 +1,6 @@
+SERVICE_NAME=hinghwa-dict-uni-app
+BACKEND_URL=http://api.pxm.edialect.top # 代码暂不支持 
+
+# Traefik Only
+PORT=80
+HOST_ADDRESS=m.pxm.edialect.top

Dockerfile

@@ -0,0 +1,16 @@
+FROM node:14-alpine AS build
+RUN mkdir -p /usr/src/app
+WORKDIR /usr/src/app
+COPY package*.json yarn.lock ./
+ENV NODE_ENV=production
+RUN yarn install --frozen-lockfile --production=false
+COPY . .
+RUN yarn build
+
+FROM nginx:stable-alpine
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY scripts/replace_api_prod.sh /
+RUN chmod +x /replace_api_prod.sh
+COPY --from=build /usr/src/app/dist/build/h5 /usr/share/nginx/html
+
+CMD ["sh", "/replace_api_prod.sh"]

docker-compose.yml

@@ -0,0 +1,20 @@
+services:
+  hinghwa-dict-uni-app:
+    build: .
+    image: "${SERVICE_NAME}"
+    container_name: "${SERVICE_NAME}"
+    environment: 
+      VITE_BACKEND_URL: "${BACKEND_URL}"
+    labels:
+      - "traefik.http.routers.${SERVICE_NAME}.rule=${HOST_ADDRESS}"
+      - "traefik.http.services.${SERVICE_NAME}.loadbalancer.server.port=${PORT:-80}"
+      - "traefik.http.routers.${SERVICE_NAME}.entrypoints=websecure"
+      - "traefik.http.routers.${SERVICE_NAME}.tls=true"
+      - "traefik.http.routers.${SERVICE_NAME}.middlewares=${SERVICE_NAME}-compress"
+      - "traefik.http.middlewares.${SERVICE_NAME}-compress.compress=true"
+    networks:
+      - traefik-global-proxy
+
+networks:
+  traefik-global-proxy:
+    external: true

nginx.conf

@@ -0,0 +1,28 @@
+server {
+    listen 80;
+    server_name localhost;
+
+    location /assets/ {
+      alias /usr/share/nginx/html/assets/;
+    }
+
+    location / {
+        root /usr/share/nginx/html;
+        try_files $uri $uri/ /index.html;
+        add_header Cache-Control "no-cache";
+    }
+
+    error_page 500 502 503 504 /50x.html;
+    location = /50x.html {
+        root /usr/share/nginx/html;
+    }
+
+    location ~* \.(?:css|js|ico)$ {
+        root /usr/share/nginx/html;
+        try_files $uri $uri/ /index.html;
+
+        expires 15d;
+        add_header Pragma public;
+        add_header Cache-Control "public";
+    }
+}

scripts/replace_api_prod.sh

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+echo "replacing URLs with $VITE_BACKEND_URL"
+find '/usr/share/nginx/html' -name '*.js' -exec sed -i -e 's,VITE_BACKEND_URL_RUNTIME_REPLACEMENT,'"$VITE_BACKEND_URL"',g' {} \;
+echo "result: $?, now starting nginx"
+nginx -g "daemon off;"

src/pages/quizzes/quizset/questionCard.vue

@@ -181,7 +181,7 @@ export default {
 }
 
 .fixbutton {
-  postion: fixed;
+  position: fixed;
   width: 40%;
   margin-top: 100%;