nginx部署前端项目的详细步骤
前言
在前端开发过程中经常是需要把前端静态资源放到服务器中看效果,这时经常用到nginx来配置。
1. 什么是nginx
Nginx是一款高性能的http 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。
由俄罗斯的程序设计师Igor Sysoev所开发,官方测试nginx能够支支撑5万并发链接,
并且cpu、内存等资源消耗却非常低,运行非常稳定。
2. 应用场景
我们这次用到的是 http服务器。
Nginx是一个http服务可以独立提供http服务。可以做网页静态服务器。
3. 下载nginx
nginx download官网地址
官网提供三种版本:
Mainline version:Mainline 是 Nginx 目前主力在做的版本,可以说是开发版
Stable version:最新稳定版,生产环境上建议使用的版本
Legacy versions:遗留的老版本的稳定版
以windows版为例,下载后,将其解压到 本地的任一目录下;
我是放到了G盘,新建一个software文件夹
,把解压的文件放在里面,此时我们可以看到有如下目录:
然后用vscode代码编辑器打开解压文件夹下的conf文件夹的nginx.conf文件
,这是一个非常重要的文件,用来配置nginx服务器,默认的配置也存放在此。
4. 配置nginx服务器
打开nginx.conf文件,下面是我的配置,可以复制一份,根据情况改下端口号和浏览器访问域名
#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;underscores_in_headers on;#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;upstream ylkj-api {server 127.0.0.1:17002;}server {listen 81;server_name 127.0.0.1;location / {alias "D:/CurProject/package.json";}location /static {alias "D:/CurProject/wepyModao/project/src/static/data";index index.html index.htm;}location /wepydata {alias D:/CurProject/wepyModao/project/src/static/data;index index.html index.htm;}location /ylkj-api {#proxy_pass http://115.182.107.203:8088/ylkj-api/;proxy_set_header X-Real-IP $remote_addr;proxy_set_header Host $host;proxy_set_header Accept-Encoding 'gzip';client_max_body_size 100m;client_body_buffer_size 128k;proxy_connect_timeout 600;proxy_send_timeout 600;proxy_read_timeout 600;proxy_busy_buffers_size 64k;proxy_temp_file_write_size 64k;proxy_buffer_size 64k;proxy_buffers 4 32k;access_log ./access.log ;error_log ./error.log error;}}server {listen 8090;server_name 191.105.0.52;location /{root D:/nginxRun/dist/;index index.html index.htm;if (!-e $request_filename) {rewrite ^/(.*) /index.html last;break;}}}
}
说明:
5. 将build好的内容文件夹放到nginxRun里
只需要生成的dist文件夹
6. 启动nginx服务器
windows系统右键我们下方任务栏的黑色部分,打开任务管理器,看下nginx是否启动。
7. 浏览器打开体验一下
比如我们打一个测试包,按照项目里配置的命令行执行npm run build:test
,将生成的dist文件夹拖进nginxRun里面,在浏览器输入191.105.0.52:8090
或者127.0.0.1:8090
都能打开页面。
8. 注意事项
1、每次更改了nginx.conf都要去任务管理器里结束进程,重新打开才能更新。
2、在修改nginx.conf文件时,每行的末尾必须带有分好";",否则会报错。
3、另外一些小的功能更改可以不用nginx,只要电脑和手机必须连在同一个局域网。
可参考:
nginx安装及其配置详细教程
nginx部署前端项目的详细步骤相关推荐
- win10 nginx部署前端项目(静态资源服务器和HTML)
win10 nginx部署前端项目(静态资源服务器和HTML) niginx的安装和启停操作参照博客:https://blog.csdn.net/qq_26666947/article/details ...
- nginx 部署前端项目,不缓存html文件,项目发版后,不用手动刷新页面
nginx 部署前端项目,不缓存html文件,项目发版后,不用手动刷新页面 location / {expires 1h;root /home/test/vue/dist/;index index.h ...
- 简单Tomcat和Nginx部署前端项目
前言 记录一下前端项目的部署,主要最近也在做这些事情. 一.tomcat部署前端 这里我使用的事linux环境,windows下类似. 1.下载tomcat tomcat下载官网 版本很多,下载常用的 ...
- centos7+tomcat部署JavaWeb项目超详细步骤
转自:https://www.cnblogs.com/xiaohu1218/p/7233162.html 我们平时访问的网站大多都是发布在云服务器上的,比如阿里云.腾讯云等.对于新手,尤其是没有接触过 ...
- 使用nginx部署前端项目
目录 安装Nginx 1.下载docker的nginx镜像 2.查看下载完成的镜像 3.运行一个nginx的镜像的实例 4.进入nginx容器 5.在物理机创建对应文件夹 6.拷贝容器中的对应的文件夹 ...
- Docker利用Nginx部署前端项目
今天给大家分享的是Docker利用Nginx部署Vue等前端页面项目:其实是我工作刚好用到,顺便分享给大家O(∩_∩)O,那么话不多说直接开始. 一:准备文件 我们先将前端项目打包好,放到此文件夹下, ...
- 云服务器部署web项目 超详细步骤 腾讯云 阿里云
购买阿里云服务器ECS,选择CentOS 7.6操作系统 外界用户访问云服务器中实例的示意图 重置实例的密码 设置安全组规则 创建安全组和安全组规则 为安全组添加实例 使用XShell和XFTP连接到 ...
- docker nginx部署前端项目
最近一直在搞前后端分类,一直在想前端的html页面应该用什么部署 想来想去,如果用tomcat好像有点浪费资源,作为程序员自然要时时刻刻追求新的东西 一直以来都是在apache tomcat上面运行, ...
- Nginx 部署前端项目dist文件
写好的项目 npm run build 生成的dist文件夹放桌面备用 下载nginx后 将dist文件夹放入html文件夹中 进入conf修改配置 里面有nginx.conf 文本修改 下面s ...
最新文章
- groovy–运算符重载
- 中文文本中的关键字提取算法总结
- win8.1升级到win10后 vmware不能连网的问题
- 问模板函数、函数模板,模板类、类模板的区别的问题?
- 限制按钮点击_Android | 使用 AspectJ 限制按钮快速点击
- 10许可证即将到期_食品经营许可证延续
- Python的find、rfind、index、rindex方法的区别
- 取得人生成功的40条定律
- 中标麒麟linux系统安装打印机_国产中标麒麟操作系统的打印机安装
- 蓝桥杯c语言大一的知识够了吗,参加蓝桥杯后的感受以及个人总结
- 不值一提?开源CRM是否值得应用
- 电脑操作系统维护10条基础知识!
- 基于虚拟机的VxWorks实验平台设计与实现(读研时的一篇论文)
- 使用npm安装下载jQuery
- 从王自如和老罗的论战中我貌似懂得了点神马...
- python 批量转换xls to xlsx,出现pywintypes.com_error: (-2147417848, ‘被调用的对象已与其客户端断开连接)’的问题处理
- 3des java ecb_3DES_ECB_加密解密
- 期刊论文发表见刊是什么意思
- 【原创】【I2C】I2C介绍
- JAVA易医就医购药交互平台计算机毕业设计Mybatis+系统+数据库+调试部署
热门文章
- 苹果微信更新不了最新版本_苹果iOS用户更新微信至版本7.0.13,可以进行微信号修改支持一年修改一次...
- 计算机真有趣作文,。。。。真有趣作文(共10篇)
- 146_路由器项目_附加功能:可以拿取文件内IP保存到过滤链表中,过滤IP也可以保存到txt文件,也可以终端输入IP,保存到文件【单链表的尾插、头插、删除指定节点、遍历等】】
- eclipse新建C/C++项目
- html中字体纹理效果,CSS3实现各种纹理背景效果
- 2023最新前端面试题3(持续更新)
- 最流行的编程语言JavaScript能做什么?
- 去除字符串中的空格(c++)
- 编程小白C语言学习计划
- Html table添加空行