React全家桶建站教程-Nginx #3

本文涉及的产品
日志服务 SLS,月写入数据量 50GB 1个月
简介: React全家桶建站教程-Nginx #3

介绍


  • 轻量级,同样起Web 服务,比apache 占用更少的内存及资源
  • 抗并发,nginx 处理请求是异步非阻塞的,而apache 则是阻塞型的,在高并发下nginx 能保持低资源低消耗高性能
  • 高度模块化的设计,编写模块相对简单
  • 社区活跃,各种高性能模块出品迅速

例子


https://github.com/xuya227939/blog/tree/master/examples/nginx


安装


本地:

ECS(CentOs系统): 如果没有机器的话,现在有活动噢!学生好像可以每个月10块购买机器。

https://promotion.aliyun.com/ntms/act/group/team.html?group=9Az1ljXGL5$ brew install nginx$ yum install nginx


配置


1.清空nginx的默认配置项

  • $ 本地:cd /usr/local/etc/nginx/
  • $ ECS:cd /etc/nginx/
  • $ echo ''->nginx.conf
  • $ vim nginx.conf好像mac需要安装vim命令,忘了。如果没有的话,安装一下或者使用$ vi nginx.conf

2.写入代码

events {
  worker_connections 1024;    #默认最大的并发数为1024
}
http {
  include             mime.types;     #设定mime类型,类型由mime.type文件定义
  default_type        application/octet-stream;   #默认返回值
  server {
    listen       2000 default_server;         #监听端口
    root         /Users/jiang/Desktop/WorkSpace;    #要访问的html文件所在目录
    access_log  logs/access.log;    #成功日志
    error_log logs/error.log;            #失败日志
    index index.html index.php;    #默认找寻文件
    location / {                              #访问2000端口的重定向
      root /Users/jiang/Desktop/WorkSpace;   #重定向访问的html文件所在目录
      try_files $uri /index.html;
      proxy_set_header X-Forwarded-For $remote_addr;
      proxy_set_header Host $host;
      index index.html index.htm index.php;
    }
    error_page 404 /404.html;
      location = /40x.html {
    }
    error_page 500 502 503 504 /50x.html;
      location = /50x.html {
    }
  }
}

:wq // 保存并退出

3.开启


开启 如果报了类似这样的错,说明该目录下没有文件。需要创建。$ sudo nginxopen() "/usr/local/Cellar/nginx/1.15.0/logs/access.log" failed (2: No such file or directory)

  • $ cd /usr/local/Cellar/nginx/1.15.0进入该目录
  • $ mkdir logs && chmod 777 logs创建logs目录并赋予最高权限组
    然后sudo nginx 开启,访问 http://localhost:2000/,如果报500,查看错误日志。

    如果遇到这个问题的话
    nginx没有权限访问该日志,需要赋予最高权限$ tail -f /usr/local/Cellar/nginx/1.15.0/logs/error.log/Users/jiang/Desktop/WorkSpace/index.html" failed (13: Permission denied)chmod 777  /Users/jiang/Desktop/WorkSpace && chmod 777 /Users/jiang/Desktop/WorkSpace/index.html

3.访问http://localhost:2000/


命令


1.Mac上操作nginx

  • $ sudo nginx -s reload //刷新nginx,每次修改完nginx,默认不生效的,需要刷新才行。
  • $ sudo nginx //开启nginx
  • $ sudo nginx -s stop //停止nginx

2.CentOs上操作nginx

  • $ service nginx start //开启nginx
  • $ service nginx stop //停止nginx
  • $ service nginx restart //重启nginx
  • $ service nginx reload //刷新nginx

ECS机器上配置nginx


user nginx;
worker_processes auto;
pid /run/nginx.pid;
include /usr/share/nginx/modules/*.conf;
events {
  worker_connections 1024;
}
http {
  gzip on;
  gzip_min_length 1k;
  gzip_buffers   4 16k;
  gzip_comp_level 2;
  gzip_types   text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/jpg image/gif image/png;
  gzip_vary on;
  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
  sendfile            on;
  tcp_nopush          on;
  tcp_nodelay         on;
  keepalive_timeout   65;
  types_hash_max_size 2048;
  include             /etc/nginx/mime.types;
  default_type        application/octet-stream;
  include /etc/nginx/conf.d/*.conf;
  server {
    listen       80 default_server;
    server_name  localhost;
    root         /data/sight/build;
    include /etc/nginx/default.d/*.conf;
    access_log  /data/logs/access.log  main;
    error_log /data/logs/error.log;
    index index.html index.php;
    location ~ .*\.(gif|jpg|png)$ {    
      access_log on;
      expires 30d;    
      root /data/images/;#指定图片存放路径    
      client_max_body_size    10m;    
      client_body_buffer_size 1280k;
    } 
    location ~* ^.+\.(eot|ttf|otf|woff|svg)$ {
      access_log off;
      expires max;
    }
    location / {
      root /data/sight/build;
      try_files $uri /index.html;
      proxy_set_header X-Forwarded-For $remote_addr;
      proxy_set_header Host $host;
      index index.html index.htm index.php;
    }
    error_page 404 /404.html;
      location = /40x.html {
    }
    error_page 500 502 503 504 /50x.html;
      location = /50x.html {
    }
  }
}

多了个图片服务器和开启了gzip压缩。


欢迎在此issue下进行交流、学习



结语


看完之后,是不是觉得特别简单,容易上手?只需要你编写下简单指令和块指令即可。

相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
目录
相关文章
|
3月前
|
tengine 关系型数据库 MySQL
Tengine、Nginx安装MySQL数据库命令教程
本指南详细介绍了在Linux系统上安装与配置MySQL数据库的步骤。首先通过下载并安装MySQL社区版本,接着启动MySQL服务,使用`systemctl start mysqld.service`命令。若启动失败,可尝试使用`sudo /etc/init.d/mysqld start`。利用`systemctl status mysqld.service`检查MySQL的服务状态,确保其处于运行中。通过日志文件获取初始密码,使用该密码登录数据库,并按要求更改初始密码以增强安全性。随后创建一个名为`tengine`的数据库,最后验证数据库创建是否成功以及完成整个设置流程。
|
3月前
|
tengine 应用服务中间件 Linux
Tengine、Nginx安装PHP命令教程
要在阿里云Linux上安装PHP,请先更新YUM源并启用PHP 8.0仓库,然后安装PHP及相关扩展。通过`php -v`命令验证安装成功后,需修改Nginx配置文件以支持PHP,并重启服务。最后,创建`phpinfo.php`文件测试安装是否成功。对于CentOS系统,还需安装EPEL源和Remi仓库,其余步骤类似。完成上述操作后,可通过浏览器访问`http://IP地址/phpinfo.php`测试安装结果。
|
3月前
|
前端开发 JavaScript CDN
React 教程
10月更文挑战第6天
61 3
|
3月前
|
应用服务中间件 Linux nginx
Mac os 安装 nginx 教程(success)
这篇文章是关于如何在Mac OS系统上使用Homebrew安装nginx及其依赖,并解决安装过程中可能出现的权限问题。
305 0
Mac os 安装 nginx 教程(success)
|
3月前
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
1117 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
4月前
|
Web App开发 前端开发 测试技术
react18基础教程系列--安装环境及packagejson文件分析
react18基础教程系列--安装环境及packagejson文件分析
|
5月前
|
前端开发 应用服务中间件 nginx
[译] 面向 React 和 Nginx 的 Docker 多阶段构建
[译] 面向 React 和 Nginx 的 Docker 多阶段构建
[译] 面向 React 和 Nginx 的 Docker 多阶段构建
|
6月前
|
前端开发 JavaScript 开发者
react18【系列实用教程】组件 (2024最新版 | 含父子组件传值、兄弟组件传值、越层组件传值、“插槽“)
react18【系列实用教程】组件 (2024最新版 | 含父子组件传值、兄弟组件传值、越层组件传值、“插槽“)
103 2
|
6月前
|
前端开发 JavaScript 数据格式
react18【系列实用教程】Hooks (useState,useReducer,useRef,useEffect,useContext,useMemo,useCallback,自定义 Hook )
react18【系列实用教程】Hooks (useState,useReducer,useRef,useEffect,useContext,useMemo,useCallback,自定义 Hook )
125 1
|
6月前
|
JavaScript 前端开发
react18【系列实用教程】双向绑定表单 (2024最新版)含受控组件、非受控组件、单行多行输入框 input,下拉选择 select,单选 radio,多选 checkbox,标签 label
react18【系列实用教程】双向绑定表单 (2024最新版)含受控组件、非受控组件、单行多行输入框 input,下拉选择 select,单选 radio,多选 checkbox,标签 label
198 1