nginx部署web、react、vue项目

94 阅读2分钟

nginx部署web、react、vue项目

一、nginx部署项目

部署为上线后访问地址为:www.demo.com

server  {
  listen       80;
  server_name  localhost;

  # 配置web项目
  location / {
      root   html/h5; #项目路径
      index  index.html index.htm;
  }
}

文件结构为

h5.png

二、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、文件结构为

react.png

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

4、文件结构为

map.png