前端项目部署nginx代理

Vue3 + Vite 项目部署到 Nginx 的配置方案

根据你的需求,你需要将多个 Vue3 + Vite 项目部署到同一个 Nginx 服务器上,并且希望通过不同端口或路径访问不同项目。以下是几种配置方案:

方案一:通过不同路径访问不同项目(共享端口)

假设你的项目结构如下:

  1. /mydist/- 第一个项目
  2. /mydemo/- 第二个项目
  3. /mylist/- 第三个项目

Nginx 配置示例:

js 复制代码
 server {
    listen 80;
    server_name your-domain.com;
     # 第一个项目 - mydist
    location /mydist/ {
        alias /path/to/your/mydist/;
        try_files $uri $uri/ /mydist/index.html;
    }

    # 第二个项目 - mydemo
    location /mydemo/ {
        alias /path/to/your/mydemo/;
        try_files $uri $uri/ /mydemo/index.html;
    }

    # 第三个项目 - mylist
    location /mylist/ {
        alias /path/to/your/mylist/;
        try_files $uri $uri/ /mylist/index.html;
    }
}
注意事项​:

确保每个 Vue 项目的 vite.config.js中设置了正确的 base

js 复制代码
// mydist 项目的配置
export default defineConfig({
  base: '/mydist/',
  // 其他配置...
})

方案二:通过不同端口访问不同项目

js 复制代码
# 第一个项目 - mydist (端口 8001)
server {
    listen 8001;
    server_name your-domain.com;

    location / {
        root /path/to/your/mydist;
        try_files $uri $uri/ /index.html;
    }
}

# 第二个项目 - mydemo (端口 8002)
server {
    listen 8002;
    server_name your-domain.com;

    location / {
        root /path/to/your/mydemo;
        try_files $uri $uri/ /index.html;
    }
}

# 第三个项目 - mylist (端口 8003)
server {
    listen 8003;
    server_name your-domain.com;

    location / {
        root /path/to/your/mylist;
        try_files $uri $uri/ /index.html;
    }
}
注意事项​:

这种情况下,Vue 项目的 base可以设置为 /

js 复制代码
export default defineConfig({
  base: '/',
  // 其他配置...
})

访问方式:

  1. mydist: http://your-domain.com:8001
  2. mydemo: http://your-domain.com:8002
  3. mylist: http://your-domain.com:8003

Nginx 中 rootalias的区别与使用场景

rootalias都是 Nginx 中用于指定文件系统路径的指令,但它们的工作方式有重要区别。

主要区别

特性 root alias
路径处理 会将 location部分追加到路径后 完全替换 location部分
结尾斜杠 通常不需要 必须与 location匹配
使用场景 一般目录 需要精确映射的特殊目录

root的工作方式

js 复制代码
location /static/ {
    root /var/www/html;
}

当访问 /static/image.jpg时,Nginx 会查找:

js 复制代码
/var/www/html/static/image.jpg

注意:root会将完整的 URI 路径(包括 location部分)追加到指定的目录后。

alias的工作方式

js 复制代码
location /static/ {
    alias /var/www/static_files/;
}

当访问 /static/image.jpg时,Nginx 会查找:

js 复制代码
/var/www/static_files/image.jpg

注意:alias会用指定的路径完全替换 location部分

重要注意事项

  1. 斜杠问题​:

    使用 alias时,locationalias的结尾斜杠必须一致

    正确:

    bash 复制代码
     location /static/ {
         alias /var/www/files/;
     }

    错误:

    bash 复制代码
     location /static {
         alias /var/www/files/;
     }
  2. 正则表达式 location ​: 在正则表达式 location 块中只能使用 alias,不能使用 root

  3. 性能考虑 ​: root通常比 alias稍微高效一点,因为少了一次路径替换操作,但在大多数情况下差异可以忽略不计

相关推荐
满分观察网友z3 小时前
Restful API:互联网软件架构的设计风格
前端
程序员小续3 小时前
告别重复造轮子!看 ahooks 如何改变你的代码结构
前端·javascript·react.js
中国lanwp3 小时前
Tomcat 中部署 Web 应用
java·前端·tomcat
袁煦丞3 小时前
WSL双系统协作神器:cpolar内网穿透实验室第517个成功挑战
前端·程序员·远程工作
起风了啰3 小时前
SkySwitch 云控灯
前端
大力yy3 小时前
从零到一:VS Code 扩展开发全流程简介(含 Webview 与 React 集成)
前端·javascript·react.js
Deepsleep.3 小时前
前端常见安全问题 + 防御方法 + 面试回答
前端·安全·面试
IT小农工3 小时前
windows系统edge浏览器退出账户后还能免密登录
前端·edge
柯南95273 小时前
Chrome浏览器插件(Extensions)的原理
前端·chrome