使用nginx部署多个vue项目

使用nginx部署多个vue项目

产生背景

最近公司要上线项目,由于囊中羞涩,需要在一台服务器的同一个域名下面部署多个项目,访问根路径(https://www.domain.com)是主项目,访问https://www.domain.com/project1 是项目1,访问https://www.domain.com/project2 是项目2,但是每个项目里面又有自己的路由,测试多次终于成功,遂记录以供后续查阅。

步骤一:不可忽略的打包配置

主项目、子项目配置

vue.config.js

router.js

步骤二:nginx配置

javascript 复制代码
// 主项目存放路径:/mydata/mainProject
// 项目1存放路径:/mydata/project1/
// 项目2存放路径:/mydata/project2/
server
{
    listen 80;
    server_name www.domain.com;


    location / {
        root /mydata/mainProject;
        index index.php index.html index.htm default.php default.htm default.html;
        try_files $uri $uri/ /index.html;
    }
    
    location ^~ /project1/ {
        alias /mydata/project1/;
        index index.php index.html index.htm default.php default.htm default.html;
        try_files $uri $uri/ /project1/index.html;
    }
    location ^~ /project2/ {
        alias /mydata/project2/;
        index index.php index.html index.htm default.php default.htm default.html;
        try_files $uri $uri/ /project2/index.html;
    }

    location /prod-api/ {
      proxy_pass http://127.0.0.1:8080/;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-Forwarded-Host $http_host;
      proxy_set_header X-Forwarded-Port $server_port;
      proxy_set_header X-Forwarded-Proto $scheme;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
    }
}

结语

可能在部署过程中会遇到奇奇怪怪的问题,有可能是静态资源访问404,301等等,反正就是不断调整打包配置,重复修改nginx配置,最终目前方案可行(小声bb:全部当成子项目来部署方便得多,但是老板说主项目必须是访问域名就可以了,不能在根路径下加前缀)。

如果大家有更好的方案请多多指教。😜😜😜😜😜😜😜😜😜

相关推荐
阿里云云原生1 小时前
用通义灵码渐进式开发 0->1 实现高考志愿规划项目题文档
阿里云·高考·通义灵码
智慧源点3 小时前
阿里云RDS MySQL数据归档全攻略:方案选择指南
阿里云·云计算
m0_748254093 小时前
阿里云详解:与 AWS、GCP 的全方位比较
阿里云·云计算·aws
阿里云大数据AI技术8 小时前
鹰角网络基于阿里云 EMR Serverless StarRocks 的实时分析工程实践
starrocks·clickhouse·阿里云·emr·实时分析
十八旬8 小时前
阿里云服务-开启对象存储服务及获取AccessKey教程
阿里云·云计算
分享点10 小时前
Laravel 使用阿里云OSS S3 协议文件上传
阿里云·php·laravel
hzp6661 天前
阿里云的centos8 服务器安装MySQL 8.0
mysql·阿里云·centos8
22:30Plane-Moon1 天前
项目1总结其三(图片上传功能)
ide·spring boot·vue
TG_yunshuguoji1 天前
阿里云对象存储OSS之间进行数据转移教程
阿里云·数据迁移·在线迁移
阿࿆杰࿆2 天前
solon-flow基于bpmnJs的流程设计器
vue·流程图·react