微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

--现在阅读的你,如果是个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,不要自己会配置一下吗,省得找后台

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐