首页 > 系统相关 >datart前端单独部署到nginx

datart前端单独部署到nginx

时间:2024-10-13 17:00:26浏览次数:7  
标签:前端 uri try nginx html location datart

这里假设你的本地可以正常跑起来前端项目,服务器为centos7且已经部署了nginx

构建前端工程(frontend文件夹下是前端工程)

npm run build:all

将构建出来的build文件夹放到服务器一个路径下

配置nginx.conf,这里只写了http节点下的server节点怎么配置

server {
    listen 3000;
    server_name localhost;

    # 静态文件目录
    root /xxxx/xxx/build/;  # 修改为你的项目打包输出路径,步骤2的那个路径

    # 默认访问的文件
    index index.html;

    # 配置 API 请求的代理
    location /api/v1/ {
        proxy_pass http://127.0.0.1:8080;  # 修改为你的后端 API 地址
    }

    # 配置静态资源代理
    location /resources/ {
        proxy_pass http://127.0.0.1:8080;  # 修改为后端资源路径
    }

    # 处理前端路由问题,重定向所有请求到 index.html
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 处理特定页面的路由
    location /shareChart/ {
        try_files $uri /shareChart.html;
    }

    location /shareDashboard/ {
        try_files $uri /shareDashboard.html;
    }

    location /shareStoryPlayer/ {
        try_files $uri /shareStoryPlayer.html;
    }

    # 开启 gzip 压缩
    gzip on;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/json;
    gzip_min_length 1000;
}

 

重启nginx

nginx -s reload

 

标签:前端,uri,try,nginx,html,location,datart
From: https://www.cnblogs.com/LTQ151/p/18462552

相关文章

  • 前端知识整理(全屏播放器 CSS JavaScript 轮转播放 jquery库 AJAX 画布 网页测试)
    currenttime在前端开发中,“currenttime”通常指的是获取用户设备的当前时间。这可以通过JavaScript来实现,下面是一个简单的示例代码,展示如何获取并显示当前时间:<!DOCTYPEhtml><html><head><title>显示当前时间</title></head><body><h1>当前时间:</h1><pid="d......
  • nginx搭建视频下载站
    目录1.前言与介绍 2.atuoindex模块介绍 3.主要的功能 4.下载站基本要求5.具体配置6.做完如上的配置重载服务 7.创建密码文件 8.在windows主机上做域名解析 9.查看统计结果1.前言与介绍 前面的学习中根据nginx的简单的配置实现了根据IP端口和域名实现......
  • vue中上传xlsx表格文件,并获取文件json数据【前端文件上传】
    import*asXLSXfrom"xlsx";onMounted(function(){document.getElementById('fileInput').addEventListener('change',function(){constfileObj=this.files[0]//console.log(fileObj)//......
  • C#使用SignalR实现与前端vue实时通信
    C#后端1、安装SignalR包首先确保项目中已安装SignalR相关包。可以通过NuGet包管理器安装:dotnetaddpackageMicrosoft.AspNetCore.SignalR2、配置SignalR在Startup.cs文件中配置SignalRusingMicrosoft.AspNetCore.Builder;usingMicrosoft.AspNetCore.Hosting;......
  • 前端工程化
    1.概念前端开发的管理工具。2.模块化和包管理分解与聚合函数文件问题1.全局污染2.依赖混乱模块化标准民间标准commonjs(重要)运行时amdcmdumd官方标准EcmaScriptModuleESM(重要)编译时commonjsletxxx=require("a.js");运行时:只有运行过后才能确定依赖关......
  • Web前端高级工程师培训:异步处理专题
    异步处理专题课前准备工具编辑器VSCode浏览器Chorme前置知识ES6基础语法课堂主题同步及异步概念方块运动的实现promise的用法then的返还值Async函数和await课堂目标理解并学会使用promise使用方式以及async、await的使用同步异步概念js是单线程单......
  • 前端学习第四天笔记 函数 对象 math对象 Date对象 DOM概述 document对象的获取元素、
    文章目录函数函数的声明函数名的提升对象math对象Math.abs()Math.max()和Math.min()Math.floor()和Math.ceil()Math.random()Date对象Date.now()Date对象中的Get方法DOM概述节点节点树Node.nodeType属性document对象_方法/获取元素document.getElementsByTagName()do......
  • Web前端开发入门学习笔记之CSS 39-40 --新手超级友好版- 文本颜色字体篇
       Foreword写在前面的话: 大家好,我是一名刚开始学习HTML的新手。这篇文章是我在学习html过程中的一些笔记和心得,希望能和同样在学习HTML的朋友们分享。由于我的知识有限,文章中可能存在错误或不准确的地方,欢迎大家在评论区提出建议和指正。我非常期待大家的反馈,以便我能......
  • Web集群服务-Nginx
    1.web服务1. WEB服务:网站服务,部署并启动了这个服务,你就可以搭建一个网站2. WEB中间件:等同于WEB服务3. 中间件:范围更加广泛,指的负载均衡之后的服务4. 数据库中间件:数据库缓存,消息对列2. 极速上手指南nginx官网: nginxdocumentation2.1 配置yum源vim......
  • prometheus+grafana 监控nginx
    一:安装插件1.1 查看nginx已启用tub_status模块nginx-V2>&1|grep-owith-http_stub_status_module如果在终端输出with-http_stub_status_module,说明nginx已启用tub_status模块在nginx的配置文件添加如下配置location/nginx_status{stub_statuson;......