【Nginx】Nginx部署前端静态资源

news/2024/10/3 23:28:55

打包部署

我们的前端工程开发好了,但是我们需要发布,那么如何发布呢?主要分为2步:

  1. 前端工程打包
  2. 通过nginx服务器(点击下载Nginx)发布前端工程

1 前端工程打包

接下来我们先来对前端工程进行打包

我们直接通过VS Code的NPM脚本中提供的build按钮来完整,如下图所示,直接点击即可:

然后会在工程目录下生成一个dist目录,用于存放需要发布的前端资源,如下图所示:

2 部署前端工程

2.1 nginx介绍

nginx: Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少,并发能力强,在各大型互联网公司都有非常广泛的使用。

niginx在windows中的安装是比较方便的,直接解压即可。所以我们直接将资料中的nginx-1.22.0.zip压缩文件拷贝到无中文的目录下,直接解压即可,如下图所示就是nginx的解压目录以及目录结构说明:

很明显,我们如果要发布,直接将资源放入到html目录中。

6.2.2 部署

将我们之前打包的前端工程dist目录下得内容拷贝到nginx的html目录下,如下图所示:

然后我们通过双击nginx下得nginx.exe文件来启动nginx,如下图所示:

nginx服务器的端口号是80,所以启动成功之后,我们浏览器直接访问http://localhost:80 即可,其中80端口可以省略,其浏览器展示效果如图所示:

到此,我们的前端工程发布成功。

PS: 如果80端口被占用,我们需要通过conf/nginx.conf配置文件来修改端口号。如下图所示:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.ryyt.cn/news/44465.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

BUUCTF-Misc(151-160)

[DDCTF2018]第四扩展FS binwalk提取一下然后提取出来一个加密压缩包,密码就在图片的备注里Pactera提取出来是一个文本字频统计得到flagflag{huanwe1sik4o!}Beautiful_Side 010editor打开,发现一个png文件,我们提取出来发现是半张二维码然后打开QRazyBox - QR Code Analysis …

docker阶段01 容器化概述, Docker介绍, 安装, 镜像特性和操作, 容器操作

1.容器化概述容器: 泛指可以存放其他物品的一种容纳工具,部分和完全封闭的 单台服务器运行多个环境程序假如让不同的环境程序运行在不同环境中 容器中怎么实现: 1.通过虚拟化实现,如图,通过kvm相当于创建了多个独立的操作系统2.通过容器实现,依赖于宿主机操作系统,更省资源…

FASTAPI从入门到进阶

fastapi框架fastapi,一个用于构建 API 的现代、快速(高性能)的web框架。 fastapi是建立在Starlette和Pydantic基础上的,Pydantic是一个基于Python类型提示来定义数据验证、序列化和文档的库。Starlette是一种轻量级的ASGI框架/工具包,是构建高性能Asyncio服务的理性选择。…

『手写Mybatis』实现映射器的注册和使用

前言 如何面对复杂系统的设计? 我们可以把 Spring、MyBatis、Dubbo 这样的大型框架或者一些公司内部的较核心的项目,都可以称为复杂的系统。 这样的工程也不在是初学编程手里的玩具项目,没有所谓的 CRUD,更多时候要面对的都是对系统分层的结构设计和聚合逻辑功能的实现,再…

松鼠的新家

https://www.luogu.com.cn/problem/P3258 考虑用 LCA。 注意我们不统一起点,统计终点。 最后统一然起点多一个糖果,终点较少一个。 首先处理链的情况。 然后对于一般情况:注意我们最后从下往上做差分,发现 \(s_x+=1,s_y+=1,s_p+=1,s_{pf}+=0\),符合要求。

裸函数和调用约定

一、裸函数 在正常的函数编译中,即使函数没有定义函数体的内容,编译器也依然会编译出部分汇编指令用来执行函数。但是如果定义一个裸函数 void _declspec(naked) test()编译器将不会操作这个函数,不会给其生成汇编指令(但是会在主函数中生成call和jmp指令指向这个裸函数)可…

帮猪猪修修改的代码2016年的代码记录

这是一个图片轮播的代码,但是它们的是css 动画,当时代码运行不了,我花了二天才修改,现在记录一下,凭回忆用。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>网易科技</title> <meta name="…

input的时候, 我输入一条链接可以运行,但输入两条会报错?

大家好,我是Python进阶者。 一、前言 前几天在Python交流群【Cappuccino】问了一个Python基础的问题,问题如下:再問一個沒那麼複雜的問題,請教一下,當我改成input 的時候, 我輸入一條鏈接可以運行,但輸入兩條就會報錯,請問多於一條鏈接的輸入格式是怎樣呢? 二、实现过…