feat🔫: docker镜像 & nginx
This commit is contained in:
parent
6fdee6a3b1
commit
48cef548c5
|
@ -1,7 +1,9 @@
|
||||||
FROM nginx:alpine
|
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
|
|
||||||
|
|
|
@ -1,13 +1,16 @@
|
||||||
server {
|
server {
|
||||||
|
gzip on;
|
||||||
|
|
||||||
listen ${NGINX_PORT};
|
listen ${NGINX_PORT};
|
||||||
server_name ${NGINX_HOST}
|
server_name ${NGINX_HOST};
|
||||||
|
|
||||||
|
root /usr/share/nginx/html;
|
||||||
|
index index.html index.htm;
|
||||||
|
|
||||||
location / {
|
location / {
|
||||||
root /usr/share/nginx/html;
|
try_files $uri /index.html;
|
||||||
index index.html index.htm;
|
|
||||||
try_files $uri /index.html =404;
|
|
||||||
}
|
}
|
||||||
location /api {
|
location /api/ {
|
||||||
proxy_pass ${NGINX_API_PROXY};
|
proxy_pass ${NGINX_API_PROXY};
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -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/
|
|
@ -31,7 +31,6 @@ function App() {
|
||||||
<Route path={"/chat"} element={<Chat/>}/>
|
<Route path={"/chat"} element={<Chat/>}/>
|
||||||
<Route path={"/editor"} element={<MdEditor/>}/>
|
<Route path={"/editor"} element={<MdEditor/>}/>
|
||||||
<Route path={'/login'} element={<Login/>}/>
|
<Route path={'/login'} element={<Login/>}/>
|
||||||
<Route path={'/*'} element={<NotFound/>}/>
|
|
||||||
</Routes>
|
</Routes>
|
||||||
</Layout>
|
</Layout>
|
||||||
</BillContext.Provider>
|
</BillContext.Provider>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import styles from './index.module.scss'
|
import styles from './index.module.scss'
|
||||||
import {NavLink, useLocation, useRoutes} from "react-router-dom";
|
import { NavLink, useLocation, useRoutes } from "react-router-dom";
|
||||||
import React, {ReactElement, useState} from 'react';
|
import React, { ReactElement, useMemo, useState } from 'react';
|
||||||
import {
|
import {
|
||||||
Menu,
|
Menu,
|
||||||
MenuTheme,
|
MenuTheme,
|
||||||
|
@ -19,19 +19,18 @@ interface IProps {
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Layout(props: IProps) {
|
export default function Layout(props: IProps) {
|
||||||
const {children, home} = props
|
const { children, home } = props
|
||||||
|
|
||||||
const items = [
|
const items = [
|
||||||
{label: <NavLink to={"/home"}>Home</NavLink>, key: '/home', icon: <HomeOutlined/>},
|
{ label: <NavLink to={"/home"}>Home</NavLink>, key: '/home', icon: <HomeOutlined /> },
|
||||||
{label: <NavLink to={"/record"}>Record</NavLink>, key: '/record', icon: <FormOutlined/>},
|
{ label: <NavLink to={"/record"}>Record</NavLink>, key: '/record', icon: <FormOutlined /> },
|
||||||
{label: <NavLink to={"/login"}>Login</NavLink>, key: '/login', icon: <LoginOutlined/>},
|
{ label: <NavLink to={"/login"}>Login</NavLink>, key: '/login', icon: <LoginOutlined /> },
|
||||||
{label: <NavLink to={"/chat"}>Chat</NavLink>, key: '/chat', icon: <WechatOutlined/>},
|
{ label: <NavLink to={"/chat"}>Chat</NavLink>, key: '/chat', icon: <WechatOutlined /> },
|
||||||
{label: <NavLink to={"/editor"}>Editor</NavLink>, key: '/editor', icon: <EditOutlined/>},
|
{ label: <NavLink to={"/editor"}>Editor</NavLink>, key: '/editor', icon: <EditOutlined /> },
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
||||||
const SiderMenu = (sprops: { theme?: MenuTheme }) => {
|
const SiderMenu = (sprops: { theme?: MenuTheme }) => {
|
||||||
const location = useLocation()
|
|
||||||
|
|
||||||
const siderTitleCSS: React.CSSProperties = {
|
const siderTitleCSS: React.CSSProperties = {
|
||||||
color: "white",
|
color: "white",
|
||||||
|
@ -39,6 +38,12 @@ export default function Layout(props: IProps) {
|
||||||
paddingInline: "10px",
|
paddingInline: "10px",
|
||||||
}
|
}
|
||||||
const [collapsed, setCollapsed] = useState(false)
|
const [collapsed, setCollapsed] = useState(false)
|
||||||
|
|
||||||
|
const location = useLocation()
|
||||||
|
const selectedKey = useMemo(() => {
|
||||||
|
return location.pathname === "/" ? "/home" : location.pathname
|
||||||
|
}, [location.pathname])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AntLayout.Sider
|
<AntLayout.Sider
|
||||||
collapsible
|
collapsible
|
||||||
|
@ -51,7 +56,7 @@ export default function Layout(props: IProps) {
|
||||||
items={items}
|
items={items}
|
||||||
theme={sprops.theme}
|
theme={sprops.theme}
|
||||||
mode="inline"
|
mode="inline"
|
||||||
defaultSelectedKeys={[location.pathname]}
|
defaultSelectedKeys={[selectedKey]}
|
||||||
/>
|
/>
|
||||||
</AntLayout.Sider>
|
</AntLayout.Sider>
|
||||||
)
|
)
|
||||||
|
@ -60,7 +65,7 @@ export default function Layout(props: IProps) {
|
||||||
return (
|
return (
|
||||||
<div className={styles.container}>
|
<div className={styles.container}>
|
||||||
<nav className={styles.nav}>
|
<nav className={styles.nav}>
|
||||||
{home && <SiderMenu theme='dark'/>}
|
{home && <SiderMenu theme='dark' />}
|
||||||
</nav>
|
</nav>
|
||||||
<main className={styles.main}>
|
<main className={styles.main}>
|
||||||
<header></header>
|
<header></header>
|
||||||
|
|
|
@ -5,7 +5,7 @@ import react from '@vitejs/plugin-react'
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
server: {
|
server: {
|
||||||
proxy: {
|
proxy: {
|
||||||
"/api": {
|
"/api/": {
|
||||||
target: "http://www.fadinglight.cn:8080/",
|
target: "http://www.fadinglight.cn:8080/",
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
rewrite: (path) => path.replace(/^\/api/, ""),
|
rewrite: (path) => path.replace(/^\/api/, ""),
|
||||||
|
|
Loading…
Reference in New Issue
Block a user