前端通过nginx部署一个本地服务的方法

news/2024/11/5 16:03:50 标签: 前端, nginx, 运维

前端通过nginx部署一个本地服务的方法:

1.下载ngnix

nginx
下载完成后解压缩后运行nginx.exe文件

2.打包你的前端项目文件

yarn build 

把生成的dist文件复制出来,替换到nginx的html文件下
在这里插入图片描述

nginxconf_16">3.配置conf目录的nginx.conf文件

主要配置server监听

    server {
        listen       8088;
        server_name  localhost;

        location / {
            root  D:\\nginx-1.26.2\\nginx-1.26.2\\html;
            try_files $uri $uri/ @router;
            index  index.html index.htm;
        }

        location /api/ {
                proxy_pass http://localhost:1001/;  #匹配到/api/关键字可以转换到指定服务下
                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-Proto $scheme;
        }

        # 处理前端路由的 named location
        location @router {
            # 这里通常指向你的前端入口文件,例如 index.html
            # 也可以在这里进行更复杂的反向代理设置
            rewrite ^/(.*)$ /index.html last;
        }
        location = /favicon.ico {
            log_not_found off;
            access_log off;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

root D:\nginx-1.26.2\nginx-1.26.2\html;配置静态文件的目录,
正常是单斜杠,如果报错就试试双斜杠
location /api/ 匹配到/api/关键字可以转换到指定后端服务下
try_files $uri $uri/ @router; location @router 是为了避免刷新报错

nginx_61">4.运行nginx服务

运行cmd 运行到nginx服务的目录下,运行服务

cd xxxx/nginx-1.26.2
nginx -t 
nginx -s reload //重新运行

以上配置完成后打开localhost:8088就可以打开前端项目了。


http://www.niftyadmin.cn/n/5739657.html

相关文章

C++ unordered封装

C 哈希-CSDN博客 哈希表是unordered系列容器的底层逻辑,再实现了哈希的底层后,我们按照如下步骤封装unordered: 1. 改变数据类型,将HashTable中的所有的_kv都改成T 2. 因为map需要取key,写一个KeyOfT的仿函数并封装 3. iterator ,…

【React】初学React

A. react中如何创建元素呢? 说明一点: 属性都改为驼峰形式(无障碍属性aria-*除外), class改成className 创建元素 B. 变量或表达式如何表示呢?大括号{ }包起来 变量值用大括号包裹 C. 元素和组件的区别 元素…

深入了解 Vite 中的手动分包技术

之前自己的项目当中,对于分包的概念仅停留在前后端分离以及我做开源项目时,已有的项目进行了分包,包与包之间变量和方法的相互调用等,上线项目也没有特意为分包方案做具体的配置。但在现代前端开发中,提高应用程序的加…

如何评估共享旅游卡的市场潜力?

评估共享旅游卡的市场潜力,我们可以从以下几个维度进行分析: 市场需求分析: 根据搜索结果,随着人们生活水平的提高和旅游消费观念的转变,越来越多的人追求个性化、多样化、性价比高的旅游体验。这表明共享旅游卡项目正…

Hadoop-004-Big Data Tools插件的使用

一、Big Data Tools插件配置流程 1、安装Big Data Tools插件 以IntelliJ IDEA 2024.2.3为例打开setting, 搜索安装Big Data Tools插件后重启IDEA 2、Windows系统基础配置 Windows系统需要做一些基础设置,配合插件使用,将之前下载的hadoop-3.2.4.tar.gz 解压到D…

音视频入门基础:H.264专题(22)——通过FFprobe显示H.264裸流每个packet的信息

音视频入门基础:H.264专题系列文章: 音视频入门基础:H.264专题(1)——H.264官方文档下载 音视频入门基础:H.264专题(2)——使用FFmpeg命令生成H.264裸流文件 音视频入门基础&…

IDEA加载通义灵码插件及使用指南

安装通义灵码插件 登录通义灵码IDE插件 下载登录参考教程 https://help.aliyun.com/zh/lingma/user-guide/download-the-installation-guide 本地工程和企业知识库准备 请下载本地工程和知识库压缩包,并在本地解压缩,其中包含demoProject和知识库文件…

PyQt5实战——操作台打印重定向,主界面以及stacklayout使用(四)

个人博客:苏三有春的博客 系类往期文章: PyQt5实战——多脚本集合包,前言与环境配置(一) PyQt5实战——多脚本集合包,UI以及工程布局(二) PyQt5实战——多脚本集合包,程序…