下载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