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

简介: 给我们的静态资源启一个web 服务 给我们的nodejs 的项目设置反向代理,80端口访问 给我们的接口做转发 设置跨域请求 配置https服务的请求接口

--现在阅读的你,如果是个FE,相信你不是个纯切图仔。反之,如果是,该进阶了,老铁!

前端的我们,已经不仅仅是做页面,写样式了,我们还需要会做相关的服务器部署。废话不多说,下面就从前端的角度来讲以下nginx的相关使用。

  • 给我们的静态资源启一个web 服务
  • 给我们的nodejs 的项目设置反向代理,80端口访问
  • 给我们的接口做转发
  • 设置跨域请求
  • 配置https服务的请求接口

登录云服务器

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

登录

登录

安装nginx (源码编译安装)

安装nginx 的相关依赖

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

安装依赖

下载nginx包

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

nginx bao

解压:

tar -zxvf nginx-1.15.8.tar.gz

安装依赖

编译安装

配置nginx安装选项

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

安装依赖

编译安装

make && make install

安装依赖

启动、查看进程

/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 服务功能。

欢迎品阅和指正!

目录
相关文章
|
5月前
|
前端开发 应用服务中间件 nginx
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
468 0
|
5月前
|
移动开发 前端开发 JavaScript
前端vue2、vue3去掉url路由“ # ”号——nginx配置(一)
前端vue2、vue3去掉url路由“ # ”号——nginx配置
361 0
|
1天前
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
8 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
2月前
|
负载均衡 前端开发 应用服务中间件
使用Nginx配置SSL以及部署前端项目
本文介绍了如何使用Nginx配置SSL证书以启用HTTPS,并展示了如何通过Nginx部署前端项目,包括配置SSL证书、设置代理和负载均衡的示例。
92 2
|
5月前
|
前端开发 JavaScript 应用服务中间件
前端vue2、vue3去掉url路由“ # ”号——nginx配置(二)
前端vue2、vue3去掉url路由“ # ”号——nginx配置
259 0
|
2月前
|
JSON 前端开发 应用服务中间件
韬光敛彩:用 nginx + express 无痛实现前端项目本地 mock
韬光敛彩:用 nginx + express 无痛实现前端项目本地 mock
|
2月前
|
缓存 负载均衡 前端开发
前端必会的nginx知识点
【8月更文挑战第22天】前端必会的nginx知识点
54 0
|
3月前
|
开发框架 前端开发 应用服务中间件
部署基于.netcore5.0的ABP框架后台Api服务端,以及使用Nginx部署Vue+Element前端应用
部署基于.netcore5.0的ABP框架后台Api服务端,以及使用Nginx部署Vue+Element前端应用
|
3月前
|
前端开发 应用服务中间件 nginx
网页设计,若依项目修改(It must be done)01----若依打包位置,nginx代理前端静态资源和后端接口,就是怎样设置转载,访问固定端口,让他访问其他资料的配置文件,访问/,给你那些
网页设计,若依项目修改(It must be done)01----若依打包位置,nginx代理前端静态资源和后端接口,就是怎样设置转载,访问固定端口,让他访问其他资料的配置文件,访问/,给你那些
|
4月前
|
前端开发 应用服务中间件 nginx
nginx前后端分离、多前端部署配置文件
nginx前后端分离、多前端部署配置文件