nginx部署多个vue或react项目

下载nginx(tar.gz)

nginx: download(官方地址)

部署nginx

bash 复制代码
# 进入nginx压缩包所在目录
cd /usr/nginx
 
# 解压
tar -zxvf nginx-1.25.3.tar.gz

# 安装nginx的相关依赖
yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel

# 生成Makefile可编译文件
cd /usr/nginx/nginx-1.25.3
# --prefix=PATH:指定nginx的安装目录(默认/usr/local/nginx)
./configure --with-http_ssl_module

# 编译和安装
make
make install

# 进入nginx安装目录下的sbin目录(默认:/usr/local/nginx/sbin)
cd /usr/local/nginx/sbin

# 执行脚本启动 nginx 服务
./nginx

# 安装查看端口的工具
yum install net-tools

# 查看nginx进程
ps -ef | grep nginx
# 查看进程id所占用的端口号(默认80端口)
netstat -nap | grep 进程id

配置vue或者react项目(以vite构建的项目为例,修改vite.config.ts文件)

主项目

TypeScript 复制代码
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  base: "/",
  plugins: [react()],
})

子项目(注意:这里base不能为/,否则不生效)

TypeScript 复制代码
import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
    base: "/like/",
    plugins: [vue()],
    server: {
        host: '0.0.0.0',
        port: 10000
    },
})

将打包好的dist目录上传到自己配置的linux目录下(例如我是放到/usr/web目录中)

配置nginx.cnf文件(默认位置:/usr/local/nginx/conf/)

bash 复制代码
worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;

        location / {
            root   /usr/web/main/dist/;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

        # 子项目
        location /like {
            alias /usr/web/like/dist/;
            try_files $uri $uri/ /dist/index.html last;
            index index.html;
        }
    }
}

修改完成后重启nginx

bash 复制代码
./nginx -s reload

这个时候就可以分别访问了

效果如下:

访问:ip

访问:ip/like

相关推荐
乐闻x3 分钟前
最佳实践:如何在 Vue.js 项目中使用 Jest 进行单元测试
前端·vue.js·单元测试
檀越剑指大厂17 分钟前
【Python系列】异步 Web 服务器
服务器·前端·python
我是Superman丶20 分钟前
【前端】js vue 屏蔽BackSpace键删除键导致页面后退的方法
开发语言·前端·javascript
Hello Dam21 分钟前
基于 Spring Boot 实现图片的服务器本地存储及前端回显
服务器·前端·spring boot
小仓桑23 分钟前
利用 Vue 组合式 API 与 requestAnimationFrame 优化大量元素渲染
前端·javascript·vue.js
Hacker_xingchen23 分钟前
Web 学习笔记 - 网络安全
前端·笔记·学习
天海奈奈24 分钟前
前端应用界面的展示与优化(记录)
前端
多多*1 小时前
后端并发编程操作简述 Java高并发程序设计 六类并发容器 七种线程池 四种阻塞队列
java·开发语言·前端·数据结构·算法·状态模式
mubeibeinv1 小时前
列表代码思路
前端
过期的H2O21 小时前
【H2O2|全栈】JS进阶知识(十)ES6(6)
开发语言·前端·javascript·ecmascript·es6