nginx部署web、react、vue项目
一、nginx部署项目
部署为上线后访问地址为:www.demo.com
server {
listen 80;
server_name localhost;
# 配置web项目
location / {
root html/h5; #项目路径
index index.html index.htm;
}
}
文件结构为
二、nginx部署带有资源名React项目
背景(需求:nginx上部署两个react项目
)
使用 react-create-app 创建项目,想实现打包后部署服务器子级目录,经过多次调试跑通,并记录一下,方便自己后期使用,也方便其他伙伴有相同需求可以参考。
服务端部署后的域名及路由预期: www.demo.com (参照一,react项目采用默认配置就行)
服务端部署后的域名及路由预期: www.demo.com/admin
想通过访问 域名/admin 直接访问到 build 下的文件
主要配置 3 个点
1. Router 设置 basename
重点是设置属性:basename = "/admin"
import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import '@/i18n'
import App from '@/App'
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(
<BrowserRouter basename="/admin">
<App />
</BrowserRouter>,
)
2. package.json 设置
package.json, 增加配置项:"homepage": "/admin/"
{
....省略
"homepage": "/admin/",
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject",
"fix": "eslint --fix --ext .ts,.tsx src"
},
....省略
}
3. Nginx 服务端配置
服务器使用了 Nginx,所有需要配置这里
server {
listen 80;
server_name localhost;
# 配置react项目
location / admin {
alias html/react/;
index index.html index.htm;
try_files $uri $uri / /index.html;
}
}
4、文件结构为
三、nginx部署带有资源名vue项目(vite举例)
背景(需求:nginx上部署两个vue项目
)
使用 vite 创建项目,想实现打包后部署服务器子级目录,经过多次调试跑通,并记录一下,方便自己后期使用,也方便其他伙伴有相同需求可以参考。
服务端部署后的域名及路由预期: www.demo.com (参照一,react项目采用默认配置就行)
服务端部署后的域名及路由预期: www.demo.com/map
想通过访问 域名/map 直接访问到 dist 下的文件
主要配置 3 个点
1、vite.config.ts
export default defineConfig({
base: '/map/', // 项目路径为 map
.....其它配置
})
2、router.ts
// 创建路由
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), // vite中使用 import.meta.env.BASE_URL
routes,
})
3. Nginx 服务端配置
服务器使用了 Nginx,所有需要配置这里
server {
listen 80;
server_name localhost;
# 配置vue
location /map {
alias html/map/;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
}