From 48cef548c5dc867b9d8b2177ae04cc90b1e1ef49 Mon Sep 17 00:00:00 2001
From: clz <fadinglight9291117@126.com>
Date: Tue, 6 Sep 2022 01:05:29 +0800
Subject: [PATCH] =?UTF-8?q?feat=F0=9F=94=AB:=20docker=E9=95=9C=E5=83=8F=20?=
 =?UTF-8?q?&=20nginx?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Dockerfile                      |  8 +++++---
 default.conf.template           | 15 +++++++++------
 docker-compose.yaml             | 13 +++++++++++++
 src/App.tsx                     |  1 -
 src/components/layout/index.tsx | 27 ++++++++++++++++-----------
 vite.config.ts                  |  2 +-
 6 files changed, 44 insertions(+), 22 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 35cf0b5..8704979 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,7 +1,9 @@
 FROM nginx:alpine
 
-WORKDIR /app
 
-COPY ./dist/* /usr/share/nginx/html
+COPY ./dist/ /usr/share/nginx/html
+
+RUN rm /etc/nginx/conf.d/default.conf
+
+COPY default.conf.template /etc/nginx/templates/
 
-EXPOSE 3000
diff --git a/default.conf.template b/default.conf.template
index 41d3828..a1e7854 100644
--- a/default.conf.template
+++ b/default.conf.template
@@ -1,13 +1,16 @@
 server {
-    listen ${NGINX_PORT};
-    server_name ${NGINX_HOST}
+    gzip on;
 
+    listen ${NGINX_PORT};
+    server_name ${NGINX_HOST};
+
+    root   /usr/share/nginx/html;
+    index  index.html index.htm;
+    
     location / {
-        root   /usr/share/nginx/html;
-        index  index.html index.htm;
-        try_files $uri /index.html =404;
+        try_files $uri /index.html;
     }
-    location /api {
+    location /api/ {
         proxy_pass ${NGINX_API_PROXY};
     }
 }
\ No newline at end of file
diff --git a/docker-compose.yaml b/docker-compose.yaml
index e69de29..854fa8d 100644
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -0,0 +1,13 @@
+version: '3.8'
+
+services:
+  proxy:
+    image: registry.cn-hangzhou.aliyuncs.com/fadinglight/bill-react
+    container_name: bill-react
+    restart: always
+    ports:
+      - "3000:80"
+    environment:
+      - NGINX_HOST=bill-react
+      - NGINX_PORT=80
+      - NGINX_API_PROXY=http://www.fadinglight.cn:8080/
diff --git a/src/App.tsx b/src/App.tsx
index 184b895..1f7d4af 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -31,7 +31,6 @@ function App() {
                         <Route path={"/chat"} element={<Chat/>}/>
                         <Route path={"/editor"} element={<MdEditor/>}/>
                         <Route path={'/login'} element={<Login/>}/>
-                        <Route path={'/*'} element={<NotFound/>}/>
                     </Routes>
                 </Layout>
             </BillContext.Provider>
diff --git a/src/components/layout/index.tsx b/src/components/layout/index.tsx
index dd7eec0..9c0e25b 100644
--- a/src/components/layout/index.tsx
+++ b/src/components/layout/index.tsx
@@ -1,6 +1,6 @@
 import styles from './index.module.scss'
-import {NavLink, useLocation, useRoutes} from "react-router-dom";
-import React, {ReactElement, useState} from 'react';
+import { NavLink, useLocation, useRoutes } from "react-router-dom";
+import React, { ReactElement, useMemo, useState } from 'react';
 import {
     Menu,
     MenuTheme,
@@ -19,19 +19,18 @@ interface IProps {
 }
 
 export default function Layout(props: IProps) {
-    const {children, home} = props
+    const { children, home } = props
 
     const items = [
-        {label: <NavLink to={"/home"}>Home</NavLink>, key: '/home', icon: <HomeOutlined/>},
-        {label: <NavLink to={"/record"}>Record</NavLink>, key: '/record', icon: <FormOutlined/>},
-        {label: <NavLink to={"/login"}>Login</NavLink>, key: '/login', icon: <LoginOutlined/>},
-        {label: <NavLink to={"/chat"}>Chat</NavLink>, key: '/chat', icon: <WechatOutlined/>},
-        {label: <NavLink to={"/editor"}>Editor</NavLink>, key: '/editor', icon: <EditOutlined/>},
+        { label: <NavLink to={"/home"}>Home</NavLink>, key: '/home', icon: <HomeOutlined /> },
+        { label: <NavLink to={"/record"}>Record</NavLink>, key: '/record', icon: <FormOutlined /> },
+        { label: <NavLink to={"/login"}>Login</NavLink>, key: '/login', icon: <LoginOutlined /> },
+        { label: <NavLink to={"/chat"}>Chat</NavLink>, key: '/chat', icon: <WechatOutlined /> },
+        { label: <NavLink to={"/editor"}>Editor</NavLink>, key: '/editor', icon: <EditOutlined /> },
     ]
 
 
     const SiderMenu = (sprops: { theme?: MenuTheme }) => {
-        const location = useLocation()
 
         const siderTitleCSS: React.CSSProperties = {
             color: "white",
@@ -39,6 +38,12 @@ export default function Layout(props: IProps) {
             paddingInline: "10px",
         }
         const [collapsed, setCollapsed] = useState(false)
+
+        const location = useLocation()
+        const selectedKey = useMemo(() => {
+            return location.pathname === "/" ? "/home" : location.pathname
+        }, [location.pathname])
+
         return (
             <AntLayout.Sider
                 collapsible
@@ -51,7 +56,7 @@ export default function Layout(props: IProps) {
                     items={items}
                     theme={sprops.theme}
                     mode="inline"
-                    defaultSelectedKeys={[location.pathname]}
+                    defaultSelectedKeys={[selectedKey]}
                 />
             </AntLayout.Sider>
         )
@@ -60,7 +65,7 @@ export default function Layout(props: IProps) {
     return (
         <div className={styles.container}>
             <nav className={styles.nav}>
-                {home && <SiderMenu theme='dark'/>}
+                {home && <SiderMenu theme='dark' />}
             </nav>
             <main className={styles.main}>
                 <header></header>
diff --git a/vite.config.ts b/vite.config.ts
index 9def47c..23a81ee 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -5,7 +5,7 @@ import react from '@vitejs/plugin-react'
 export default defineConfig({
   server: {
     proxy: {
-      "/api": {
+      "/api/": {
         target: "http://www.fadinglight.cn:8080/",
         changeOrigin: true,
         rewrite: (path) => path.replace(/^\/api/, ""),