前端:简单的nginx启动本地打包文件dist

Nginx (engine x) 是一个高性能的HTTP和反向代理web服务器,

Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,在BSD-like 协议下发行。其特点是占有内存少,并发能力强,事实上nginx的并发能力确实在同类型的网页服务器中表现较好,中国大陆使用nginx网站用户有:百度、京东、新浪、网易、腾讯、淘宝等。(看一下就行,前端用它启动就行了,下面内容10分钟就够了)

nginx下载使用
nginx修改配置
打开配置文件在这里插入图片描述

在这里插入图片描述

    server {
        listen 8082; // 端口号
        server_name localhost; // 服务名字
        // 代理服务地址 
        location /sales{
            proxy_pass https://uat-beijing.cbs.bacic5i5j.com/sales/; // 项目服务地址,需修改为自己用的
        }

        location /base {

        }
		// 我的项目
        location /sales-web/scm-customer-web {
            alias d:/project/scm-customer-web/dist/; // 项目dist文件位置 终端pwd即可显示
            index index.html;  
            try_files $uri $uri/ /sales-web/scm-customer-web/index.html;  // dist文件有index文件直接显示要不往下找
        }

    }
nginx启动
  1. 点击nginx启动
  2. 浏览器输入 http://local.cbs.bacic5i5j.com8082/sales-web/scm-customer-web/
注意事项
  1. 修改配置项需要重启nginx
### 配置 Nginx 以部署和启动前端项目 #### 初始化项目并准备环境 为了确保项目的顺利运行,在开始之前需确认服务器已准备好。这包括但不限于创建必要的目录结构来容纳即将部署的应用程序文件。 #### 安装与验证 Nginx 如果尚未安装 Nginx,则需要按照官方文档指导完成安装过程[^1]。可以通过命令行工具检查当前系统中是否存在可用的 Nginx 版本,以此判断是否已经成功安装: ```bash nginx -v ``` 对于 Linux 用户来说,通常可以利用包管理器如 `apt` 或者 `yum` 来简化这一流程;而对于 Windows 和 macOS 用户而言,则可以从官方网站获取适用于各自平台的二进制分发版进行本地安装[^2]。 #### 修改 Nginx 的默认配置 为了让 Nginx 正确处理来自客户端浏览器发出的各种请求并将它们转发给对应的静态资源文件(HTML/CSS/JS),必须编辑位于 `/etc/nginx/sites-available/default` (Linux)或其他相应位置下的站点配置文件。下面是一个简单的例子展示如何设置一个典型的单页应用(SPA): ```nginx server { listen 80; server_name localhost; location / { root /path/to/your/project/dist; # 替换成实际路径 try_files $uri $uri/ /index.html; } error_page 500 502 503 504 /50x.html; } ``` 这段配置的关键在于 `try_files` 指令,它允许当访问不存在的具体页面时返回根目录下的 index 文件而不是抛出错误码 404,这对于支持 HTML5 History API 路由模式非常重要。 #### 打包并上传项目 构建好应用程序之后,应该将其编译成生产版本并通过 FTP/SFTP 等方式传输到远程主机上的指定目标文件夹内。注意要保持源代码的安全性和隐私性,只公开那些真正需要对外界可见的部分[^3]。 #### 解决刷新路由导致的 404 错误 由于 SPA 应用可能会遇到用户直接输入 URL 地址或点击书签后无法正常加载的情况,因此除了上述提到过的调整 Nginx 设置外,还可能需要额外考虑其他因素比如防火墙规则、DNS 记录等可能导致此类现象的原因,并采取适当措施加以修正。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值