文档章节

nginx,作为前端的你会多少?

o
 osc_a22drz29
发布于 2019/03/25 20:40
字数 1009
阅读 23
收藏 0

精选30+云产品,助力企业轻松上云!>>>

--现在阅读的你,如果是个FE,相信你不是个纯切图仔。反之,如果是,该进阶了,老铁!
前端的我们,已经不仅仅是做页面,写样式了,我们还需要会做相关的服务器部署。废话不多说,下面就从前端的角度来讲以下nginx的相关使用。
  • 给我们的静态资源启一个web 服务
  • 给我们的nodejs 的项目设置反向代理,80端口访问
  • 给我们的接口做转发
  • 设置跨域请求
  • 配置https服务的请求接口

一、登录云服务器

 
首先你得有一台linux服务器(用你电脑起个本地服务也OK,这里不做这个介绍,我们用的是云服务器),如果没有,你可以上相关的云服务实验室开 1、2个小时的服务器玩玩也行,这里推荐 阿里云的 https://edu.aliyun.com/lab/ ,和腾讯云的 https://cloud.tencent.com/developer/labs/gallery 。下面是取阿里云开放实验室的服务器演示:
 

登录服务器:

 

二、安装nginx (源码编译安装)

1、安装nginx 的相关依赖

yum -y install gcc pcre pcre-devel zlib zlib-devel openssl openssl-devel
 

2. 下载nginx包

wget http://nginx.org/download/nginx-1.15.8.tar.gz
 
解压:
tar -zxvf nginx-1.15.8.tar.gz
 
 

3.编译安装

3.1、 配置nginx安装选项

./configure --prefix=/usr/local/nginx
 

3.2、编译安装

make && make install
 
 

3.3、启动、查看进程

/usr/local/nginx/sbin/nginx 
ps -ef | grep nginx
 
 
查看网页,nginx 启动成功。
 
补充命令:
/usr/local/nginx/sbin/nginx -t // 查看nginx 配置文件是否语法正确
/usr/local/nginx/sbin/nginx -s reload // 重新加载nginx 配置
/usr/local/nginx/sbin/nginx -s stop // 停止nginx
 
我们要修改nginx 的基本配置, 做以下步骤:
cd /usr/local/nginx
mkdir vhosts
cd vhosts
vim active.conf
按 esc
在按 :wq 保存并退出
修改nginx.conf
vim /usr/local/nginx/nginx.conf
在倒数第二行添加 include vhosts/*.conf
(以上nginx 的安装路径,可以自己自由选择),
 
⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️⬆️
注意:下面具体的演示案例,是我个人的服务器,使用的是域名访问, 上面的实验服务器的时长限制,没办法做很多的业务操作。
====到这里基本上配置好nginx 的使用和扩展,下面就是我们要利用 nginx 实现一些功能了。====

三、使用nginx

1、给我们的静态资源启一个web 服务

vim /usr/local/nginx/vhosts/active.conf ,将server 模块写进去,
server  {
        listen 8008;
        server_name localhost;
        root /usr/myfile/dist;
        index index.html;
}
 
访问:
 

2、接口转发, 跨域请求

server {

        server_name vue.wtodd.wang;
        charset utf-8;
        location /nodejsapi/ {
            proxy_pass http://localhost:5000/;
        }
 
}
实际请求 http://localhost:5000/ 的接口,被代理到请求该域名de /nodejsapi/ 下
访问:
 
 

3、给我们其他端口启动的nodejs 项目设置反向代理到80端口访问

server	{
	listen 80;
	server_name csa.scampus.cn;
	location / {
		proxy_pass http://127.0.0.1:8000;
	}
}
页面访问:
实际项目访问地址:
 

4、配置https服务的请求接口

这里涉及到了https 证书的配置,这里不牵涉这个话题,这里 https://help.aliyun.com/document_detail/28548.html?spm=a2c4g.11186623.6.556.31ae62aaoYIZQr 是阿里云的免费https 证书,可参照该步骤。
有人说,前端为什么还要https 的服务? 微信小程序的服务接口,需要走https 的哇!我们做demo,不要自己会配置一下吗,省得找后台哇😂
server {
        listen       80;
        server_name  api.scampus.cn;
        rewrite ^ https://$http_host$request_uri? permanent;
}
server {
        listen 443;
        ssl_certificate /etc/nginx/ssl/alyca.pem;
        ssl_certificate_key /etc/nginx/ssl/alyca.key;
        server_name api.scampus.cn;
        ssl on;
        ssl_session_timeout 5m;
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_prefer_server_ciphers on;
        location / {
                proxy_pass http://localhost:4000/;
        }
}
访问:原先真实请求地址
 
配置 https 访问的地址:
 
 
总结:
这里nginx 在前端的使用只是很少的一部分,比如做请求拦截、api版本控制等,但这一些应用也是受到前端处理范围的局限,使得我们运用的也不多,相信以后随着“大前端“的发展,我们会更多的使用nginx功能或类nginx 服务功能。
 
欢迎品阅和指正!
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

babe从入门到精通

前言 前面我们写了几篇很长的文章去介绍babel源码、preset-env、runtime, babel源码解析一 babel源码解析之(@babel/preset-env) babel源码解析之(@babel/plugin-transform-runtime) 在b...

osc_tc7vil4d
21分钟前
9
0
grpc+gin+proto,使用http调用rpc接口

接下来重点讲如何创建并通过http 使用rpc接口 。 proto代码 syntax = "proto3";package proto.web.web.proto;option go_package = "pb;pb";// 进入message ComeIn {string name = 1;......

osc_bskubcvl
22分钟前
12
0
BSEC 块购链 开盘前三天注册实名就送两台矿机 实体公司可考察

2020年6月28日19点38分BSEC正式开盘! 块购链发行总量:8000万枚 免费挖 块购链是什么?块购链是一个基于区块链技术,致力于为淘宝、天猫、京东、唯品会等购物平台提供安全稳定的优惠券发放技...

osc_cseo1dn1
24分钟前
5
0
leetcode面试题 17.10(主要元素)--Java语言实现

求: 数组中占比超过一半的元素称之为主要元素。给定一个整数数组,找到它的主要元素。若没有,返回-1。 示例 1: 输入:[1,2,5,9,5,9,5,5,5] 输出:5 示例 2: 输入:[3,2] 输出:-1 示例 ...

拓拔北海
24分钟前
25
0
Go 方法的基本概念及使用

方法 基本介绍 在某些情况下,我们要需要声明(定义)方法。比如 Person 结构体:除了有一些字段外( 年龄,姓名..),Person 结构体还有一些行为比如:可以说话、跑步..,通过学习,还可以做算术题。...

osc_7lh4ey2u
25分钟前
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部