diff --git a/README-deployment.md b/README-deployment.md deleted file mode 100644 index 53547da..0000000 --- a/README-deployment.md +++ /dev/null @@ -1,70 +0,0 @@ -# SPA 路由部署说明 - -## 问题描述 -React Router 使用的是客户端路由,当用户直接访问 `/admin`、`/create` 等路由时,服务器会尝试查找对应的文件,但这些路径在服务器上并不存在,因此返回 404。 - -## 解决方案 - -### 1. OpenResty/Nginx 配置 - -在你的 OpenResty 配置中添加以下配置: - -```nginx -server { - listen 80; - server_name your-domain.com; - root /path/to/your/dist; - index index.html; - - # 处理静态资源 - location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ { - expires 1y; - add_header Cache-Control "public, immutable"; - try_files $uri =404; - } - - # SPA 路由回退 - 关键配置 - location / { - try_files $uri $uri/ /index.html; - } -} -``` - -### 2. 关键配置说明 - -- `try_files $uri $uri/ /index.html;` 是核心配置 -- 当访问任何路由时,服务器会: - 1. 首先尝试查找对应的文件 (`$uri`) - 2. 然后尝试查找对应的目录 (`$uri/`) - 3. 最后回退到 `index.html` - -### 3. 部署步骤 - -1. 构建项目: - ```bash - pnpm build - ``` - -2. 将 `dist` 目录的内容上传到服务器 - -3. 配置 OpenResty/Nginx 使用上述配置 - -4. 重启服务器: - ```bash - nginx -s reload - # 或 - systemctl reload nginx - ``` - -### 4. 验证 - -部署后,以下访问方式都应该正常工作: -- 直接访问 `https://your-domain.com/admin` -- 直接访问 `https://your-domain.com/create` -- 通过侧边栏导航访问 - -### 5. 注意事项 - -- 确保静态资源路径正确 -- 如果使用子路径部署,需要相应调整配置 -- API 路由需要单独配置代理,避免被 SPA 回退规则影响 \ No newline at end of file diff --git a/README.md b/README.md index 61ab9a1..a39a3b7 100644 --- a/README.md +++ b/README.md @@ -1,74 +1,107 @@ -# React + TypeScript + Vite +A simple anonymous post website awa! -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. -Currently, two official plugins are available: -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh +## 快速开始~ -## React Compiler -The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation). -## Expanding the ESLint configuration +0、Clone本仓库 -If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules: -```js -export default defineConfig([ - globalIgnores(['dist']), - { - files: ['**/*.{ts,tsx}'], - extends: [ - // Other configs... - // Remove tseslint.configs.recommended and replace with this - tseslint.configs.recommendedTypeChecked, - // Alternatively, use this for stricter rules - tseslint.configs.strictTypeChecked, - // Optionally, add this for stylistic rules - tseslint.configs.stylisticTypeChecked, +`git clone https://github.com/Sycamore-Whisper/frontend.git` - // Other configs... - ], - languageOptions: { - parserOptions: { - project: ['./tsconfig.node.json', './tsconfig.app.json'], - tsconfigRootDir: import.meta.dirname, - }, - // other options... - }, - }, -]) + + +1、安装node依赖 + + + +`pnpm install` + + + +2、修改配置 + + + +找到/src/config.ts,根据注释配置后端信息和变量 + + + +接下来,找到/public/icon.png,将其替换为你自己的图标 + + + +最后,找到/public/about.md,填入自己的关于信息! + + + +配置完成! + + + +3、构建静态文件 + + + +`pnpm build` + + + +生成出的静态文件在/dist目录下,将其上传到静态网页托管服务商或者自己的服务器上 + + + +接下来,配置SPA路由回退: + +```nginx +# Nginx/OpenResty +location / { + try_files $uri $uri/ /index.html; +} ``` -You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules: -```js -// eslint.config.js -import reactX from 'eslint-plugin-react-x' -import reactDom from 'eslint-plugin-react-dom' -export default defineConfig([ - globalIgnores(['dist']), - { - files: ['**/*.{ts,tsx}'], - extends: [ - // Other configs... - // Enable lint rules for React - reactX.configs['recommended-typescript'], - // Enable lint rules for React DOM - reactDom.configs.recommended, - ], - languageOptions: { - parserOptions: { - project: ['./tsconfig.node.json', './tsconfig.app.json'], - tsconfigRootDir: import.meta.dirname, - }, - // other options... - }, - }, -]) +```nginx +# Apache - .htaccess + + RewriteEngine On + RewriteBase / + + RewriteCond %{REQUEST_FILENAME} !-f + RewriteCond %{REQUEST_FILENAME} !-d + RewriteCond %{REQUEST_FILENAME} !-l + RewriteRule . /index.html [L] + ``` -"# frontend" + + + +4、初始化后端 + + + +打开前端,会自动跳转至/init以便配置后端参数! + + + +部署完成owo。 + + + + + +`python api\_server.py` + + + +后端API已部署完成喵!接下来,请调用/init接口进行初始化 + +## License + + + +This project is licensed under the MIT License.