feat🔫: docker镜像 & nginx

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

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};
     }
 }

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/

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>

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>

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/, ""),