如何使用nginx部署一个前端项目

部署微前端项目在同一服务器的同一个端口下 微前端是一种架构模式,它将前端应用程序拆分为多个独立的、可独立开发和部署的微服务。每个微前端应用都可以独立运行,并且可以组合在一起形成一个完整的前端应用程序。在本文中,我们将探讨如何将微前端项目部署在同一台服务器的同一个端口下。 阅读详情

如何使用nginx部署一个前端项目呢,首先在服务器中去下载一个nginx,然后,打开nginx的配置文件,主要留意以下配置中server {}里面的配置:

#user  nobody;
worker_processes  1;
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
#pid        logs/nginx.pid;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;
    server {
        listen       8080;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   F:\Webpages;
            index  index.html index.htm;
        }
        location /WebSite/ {
          
            proxy_pass http://192.168.1.127:8090/;
  
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}
    
    # HTTPS server
    #
    #server {
    #    listen       443;
    #    server_name  localhost;

    #    ssl                  on;
    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_timeout  5m;

    #    ssl_protocols  SSLv2 SSLv3 TLSv1;
    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers   on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}
}
 listen       8080;
 server_name  localhost;
    #charset koi8-r;
    #access_log  logs/host.access.log  main;
    location / {
        root   F:\Webpages;
        index  index.html index.htm;
    }
    location /WebSite/ {
        proxy_pass http://192.168.1.127:8090/;

    }

修改完配置文件后,启动nginx服务(双击nginx执行文件或者使用命令启动),最后再打开任务管理器,确认服务是否开启成功(注意开启成功的有两个nginx服务,其中一个为保护程序,所以在kill服务的时候也需要把两个服务kill掉,不然无法正确重新启动)

【agent实操】OpenClaw玩转股票分析多个AI智能体(agent)出谋划策 本文介绍了一个基于OpenClaw的多Agent股票分析系统。该系统采用"三人组+总调度"模式,包含三个核心Agent:小牛马(策略中枢)、牛老二(基本面分析师)和牛老三(技术面分析师)。相比单Agent模式,该系统具有分析更专业、权限分级更安全、成本控制更优等优势。文章详细说明了系统部署的6个步骤,包括创建独立Agent工作区、配置专属人设与技能等,并提供了环境检查命令和验证方法。通过这种多Agent协作的方式,可以实现更专业、更安全的股票分析。 阅读详情

相关推荐

计算机组成原理汉字编码与校验设计实验报告(汉字国标码转区位码实验、汉字机内码获取实验、海明编码电路设计与海明解码)

这次实验利用logisim进行设计,进行了以下这四个实验,其中分为汉字国标码转区位码实验、汉字机内码获取实验、海明编码电路设计与海明解码,实验报告分为四个部分,在这四个部分中依次对四个实验的方案设计,设计思路进行了介绍

zhang2gongzi的博客 6万+

如何检查线上tomcat,nginx等服务器,前端代码是否部署/更新成功?

场景: 在前后端分离的开发模式下,前端同事打包生成最新dist,交给后端同事,后端同事在tomcat,nginx等等中部署,如何知道文件的最后更新时间呢? 1. 利用 document.lastModified , 是否最新代码不知道, 但文档最新修改时间也可以侧面反映有没有更新前端dist文件 mounted() { var print = console; // 使用这种写法,可以绕过生产模式去除console.log (drop_console),实现在控制台打印信息

hubary的博客 1016

Zynq UltraScale+ MPSoC-AMP(linux+裸机)

接着 Zynq UltraScale+ MPSoC-双核裸机AMP继续 平台工具:zcu106,vitis2020.2,petalinux2019.2 文章目录1.cpu1跑裸机2.cpu0跑linux2.1petalinux设置2.2 app3.生成BOOT.bin4.zcu106测试 1.cpu1跑裸机 参照Zynq UltraScale+ MPSoC-双核裸机AMP建立的工程进行修改。BSP中stdin与out修改为uart1,uart1给裸机用,uart0给linux用。 ddr空间裸机与linu

zhuxl24的博客 5196

使用nginx部署前端项目(超详细教程)

愿我们的付出都值得

IT小辉同学 3万+

基于Arduino与脑电模块的意念控制LED灯环实现

脑机接口(BCI)技术通过采集和处理脑电信号,实现人脑与外部设备的直接交互。其核心原理是利用传感器捕捉大脑活动产生的微弱电信号,经过放大、滤波和特征提取,转换为可识别的指令。这项技术在医疗康复、神经反馈训练和人机交互等领域具有重要价值。本文聚焦于一个具体的工程实践:使用消费级NeuroSky TGAM模块采集专注度与放松度数据,通过Arduino平台解析信号,并驱动WS2812B LED灯环实现实时可视化反馈。项目涵盖了硬件选型、电路搭建、数据解析和光效映射等关键环节,为脑机接口入门和嵌入式开发提供了完整的

weixin_28721917的博客 285

解密高并发系统的瓶颈:五大解决方案

在互联网应用中,高并发是指在短时间内同时有大量的用户访问一个网站或服务,造成系统压力过大,导致服务器宕机或服务停止响应的情况。高并发是互联网应用面临的一个重要问题,需要采取一系列措施来解决。负载均衡、缓存、数据库优化、异步处理和分布式架构是解决高并发问题的主要方法。在实际应用中,需要根据具体情况选择不同的方法来解决高并发问题。在高并发情况下,使用负载均衡是解决问题的一种常见方法。负载均衡可以通过将请求分配到多个服务器上,从而减少单个服务器的负载。这可以通过硬件设备或软件实现。

BUG制造者:图图 <p>这是一个P标签</p> 3906

nginx部署前端项目的详细步骤

在前端开发过程中经常是需要把前端静态资源放到服务器中看效果,这时经常用到nginx来配置。

铁锤妹妹的博客 2万+

RAW、RGB、YUV图像格式的采样与存储原理详解

本文详细解析了RAW、RGB和YUV三种核心图像格式的采样与存储原理。RAW是传感器原始数据,信息完整但需后期处理;RGB直接对应显示,直观但数据量大;YUV通过亮色分离与色度下采样,在保证观感的前提下大幅提升传输与存储效率,是视频编码与流媒体的主流格式。理解其差异是图像处理与视频开发的基础。

e4f5g6h7的博客 517

nginx部署前端项目详细教程

本文主要讲述了使用nginx打包部署前端项目的整套流程。

太阳与星辰的博客 1万+

Pico设备手势追踪实战:5步搞定MRTK3手部模型与UI交互配置

本文详细介绍了在Pico设备上使用MRTK3实现手势追踪的5个关键步骤,包括环境配置、手部模型冲突解决、射线交互优化、UI交互配置及性能优化。通过实战案例和代码示例,帮助开发者快速解决MR开发中的常见问题,提升混合现实应用的交互体验。

onion的博客 500

手把手教你学SOC芯片架构--NoC(片上网络,Network on Chip)全方位解析

​、​。

MHD0815的博客 873

使用nginx部署前端项目

使用FileZilla或者其他工具上传前端项目到nginx的html目录。浏览器访问:http://43.139.56.13/czczz-admin。浏览器访问:http://localhost/czczz-admin。将我们要执行的项目同样放到nginx下html目录下。可以看到,成功访问到前端页面并且调用了后端的接口。这样,一个简单去前后端分离项目就部署完毕了!-p: 将容器的 端口映射到主机的端口。–name: 启动容器的名字。可以看到,访问成功了。在浏览器访问主机ip。nginx安装成功。

lianaozhe的博客 6335

Modbus通信从入门到精通_2_Modbus TCP通信详解及仿真(搭建ModbusTCP仿真环境:创建虚拟PLC并进行ModbusTCP通讯;寄存器与PLC中映射关系;适合理解如何编写上位机)

LocalPort”是PLC的端口,最终的设置如下图所示:(相关的设置都可以查看帮助文档)P#DB1.DBX0.0 BYTE28是以指针形式表示的DB1的DBX0.0开始(在使用的西门子Modbus tcp的程序块中设置的“MB_HOLD_REG”输出寄存器),其有28个字节(28个字节对应14个寄存器),4001是第一个寄存器,往后数14个即可。在上面的基础上,增加一个“DB1”的“组对象”,同时将“MW0”的组对象禁止(双击组对象,“Active”取消勾选),启动之后发现无法连接。

分享学习成长历程,Winter is coming! 1万+

Nginx使用同一个域名部署多个前端Angular项目

前言: 现在基本上都是前后端分离的部署方式,前端可能项目很多,需要在同一个域名或ip部署多个前端项目的需求。 环境描述: Centos7 nginx 1.19.6 部署的项目 angular 使用docker 进行部署nginx的 Docker部署nginx 1、准备工作 第一步 创建配置文件目录 mkdir -p /usr/local/nginx/conf 第二步 执行运行nginx docker run --name nginx-test -d nginx:latest 第三步 拷贝文件 #把容

Joe192的博客 1172

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

贝叶斯统计 [韦来生编]

贝叶斯(Bayes)统计是近几十年来迅速发展起来的数理统计的一个重要分支。贝叶斯方法与经典统计方法的主要不同之处是进行统计推断时除了利用样本信息外,还要利用参数的先验信息,因此可以提高统计推断或统计决策的效果。它在经济、金融、生物、医学、自然科学和社会科学等许多领域具有广泛的应用。贝叶斯方法的研究已渗透到了统计学的几乎所有领域。作者在给中国科学技术大学概率论与数理统计专业本科生开设的“数理统计”课程中有一章专门讲授“贝叶斯方法和统计决策理论”,近十年来也给中国科学技术大学概率统计专业研究生开设过几次“贝叶斯分析”课。本书是在对过去讲稿的内容作了适当的增减和调整的基础上完成的。  本书共分六章。第1章是绪论,介绍了贝叶斯统计的若干基本概念,同时对必要的数理统计的基础知识有重点地作了回顾。第二章介绍了确定先验分布的若干可供选择的方法。第三章介绍了几类常见统计模型参数的后验分布的主要结果和计算方法。第四章和第五章分别介绍了“贝叶斯统计推断”和“贝叶斯统计决策”的内容。第六章介绍了贝叶斯统计计算的若干方法,包括蒙特卡洛方法和马尔可夫链蒙特卡洛(MCMC)方法以及相关统计软件的简介。本书的每一章附右大量的例题和习题,书末附有常用的几个表格和部分习题解答供读者查用。  大约可在54学时内讲授本书的第1章至第六章的主要内容,教师可根据学时需要选讲本书第1章至第六章的部分内容。书中标“*”号的章节可略去不讲,留给读者作为阅读材料。第六章例题中的R代码和部分例题的数据文件等可从作者个人主页下载。  作者在编写本书的过程中参考了J.O.Berger教授的《统计决策论及贝叶斯分析》和茆诗松教授编写的《贝叶斯统计》等书中的一些内容,以及《贝叶斯分析》一书中由张伟平博士编写的有关贝叶斯统计计算的一些内容。在此表示衷心感谢。  本书编写准备过程中,中国科学技术大学统计与金融系的几个研究生帮助完成了本书部分中文的录入和排版,作者对他们的辛勤工作表示真诚的感谢。高等教育出版社为本书的出版给予了大力支持。在此一并致谢。

【Nginx】同一个域名/端口下部署多个前端项目

在 Nginx 同一端口部署多个项目时,可以通过 URL 路径后缀来区分不同项目,并配置不同的 location 规则进行转发

qq_45797138的博客 515

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

Nginx部署前端vue项目

【代码】Nginx部署前端vue项目。

鱼遇海 572

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

一个nginx部署多个项目

在一台服务器上部署多个前端项目,只需一个nginx即可。 在nginx-1.20.1>>html路径下分别拷入多个项目的dist文件,并以个性化命名。 在nginx-1.20.1>>conf>>nginx.conf中进行配置 server{ location /aaa { alias E:\\nginx1.20.1\\html\\aaa; index index.html index.htm; try_files $uri $uri/ /aaa/index.

凤凰传奇的粉丝 1万+

K8s 如何部署前端网站项目?

通过本文,你已经学会了如何使用 Kubernetes 部署一个前端 Nginx 镜像,并配置 Ingress 来实现外部访问。Kubernetes 提供了强大的功能来管理容器化应用,希望这篇文章能帮助你更好地理解和使用 K8s。

Button12138的博客 881

使用nginx部署多个前端项目

常见3种方法来实现在一台服务器上使用nginx部署多个前端项目的方法。 基于域名配置 基于端口配置 基于location配置 基于域名配置 基于域名配置,前提是先配置好了域名解析。比如说你自己买了一个域名:www.test.com。 然后你在后台配置了2个它的二级域名: a.test.com、 b.test.com。 配置文件如下: 配置 a.test.com 的配置文件: vim /usr/nginx/modules/a.conf 复制代码 server { listen

大灰狼的小绵羊哥哥的博客 1万+

前端项目使用Docker + Nginx + node部署

前端项目使用Docker + Nginx + node + docker-compose部署

wNews的博客 1760

nginx部署前端项目自动化脚本

前言将项目 通过nginx 部署到 新的服务器 通过nginx反向代理出去。

微风轻吟挽歌的博客 840

使用nginx部署简单的前端项目,nginx.conf配置

前端项目监听8080端口 项目位于/usr/webfront/tcyx/ 既是:root变量,是项目静态资源的绝对位置 index代表默认项目首页网页 第二个location是后端代理 servername 可以是外网域名,也可以是本地ip nginx.conf配置文件: 启动nginx 可以了 ...

博客 1054

vue 项目前端部署以及windows ,linux 端部署遇到的问题

Vue项目打包之后,部署有两种方式,一是前台打包后扔给后台,放置在后台项目的根目录下就可以了。这种是最简单的。还有一种方式就是前端单独部署,这里讲的是后者 前端如何单独部署呢? 一个最简单的办法就是使用Nginx部署辣 一.我们将自己的Vue项目打包 运行npm run build 会在项目中生成一个叫dist文件 二.安装Nginx Nginx是一个类似于Tomcat的服务器,部署前...

大脸猫~ 9811

Nginx部署VUE项目

Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器,是部署前端项目的首选,在 Nginx 中部署 vue 项目的步骤如下: 1、原始配置文件如下 worker_processes 1; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; sendfile on;

JACKAL 20万+

Nginx部署前后端分离项目(SpringBoot+Vue)

【代码】Nginx部署前后端分离项目(SpringBoot+Vue)

stormkai的专栏 1432

nginx部署多个前端项目

同域名同端口通过nginx location转发部署多个前端项目 项目编译需要增加二级目录 // react项目 通过配置basename增加二级目录 <BrowserRouter basename={`/h5/`}>{props.children}</BrowserRouter> // 也可以通过webpack 处理输出 config.output.publicPath = '/h5/'; nginx配置多location转发 # 项目1 location

pgLi 3158
上一篇: 关于elementUI中,表格el-table在ie中宽度不为100%的问题
下一篇: SCRIPT5: 拒绝访问。Excel文件在IE下导不出来
悠了个悠悠
博客等级 码龄16年 1粉丝 24原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值