摘要：反之，如果是，该进阶了，老铁前端的我们，已经不仅仅是做页面，写样式了，我们还需要会做相关的服务器部署。废话不多说，下面就从前端的角度来讲以下的相关使用。
--现在阅读的你，如果是个FE，相信你不是个纯切图仔。反之，如果是，该进阶了，老铁！
前端的我们，已经不仅仅是做页面，写样式了，我们还需要会做相关的服务器部署。废话不多说，下面就从前端的角度来讲以下nginx的相关使用。
给我们的静态资源启一个web 服务
给我们的nodejs 的项目设置反向代理，80端口访问
给我们的接口做转发
设置跨域请求
配置https服务的请求接口
首先你得有一台linux服务器（用你电脑起个本地服务也OK，这里不做这个介绍，我们用的是云服务器），如果没有，你可以上相关的云服务实验室开 1、2个小时的服务器玩玩也行，这里推荐 阿里云的 https://edu.aliyun.com/lab/ ，和腾讯云的 https://cloud.tencent.com/developer/labs/gallery 。下面是取阿里云开放实验室的服务器演示：
登录
yum -y install gcc pcre pcre-devel zlib zlib-devel openssl openssl-devel
wget http://nginx.org/download/nginx-1.15.8.tar.gz
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;
}
访问：
server {
server_name vue.wtodd.wang;
charset utf-8;
location /nodejsapi/ {
proxy_pass http://localhost:5000/;
}
}
实际请求 http://localhost:5000/ 的接口，被代理到请求该域名de /nodejsapi/ 下
访问：
server {
listen 80;
server_name csa.scampus.cn;
location / {
proxy_pass http://127.0.0.1:8000;
}
}
页面访问：
实际项目访问地址：
这里涉及到了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 服务功能。
欢迎品阅和指正!
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/3339.html
摘要：作为前端的你会多少现在阅读的你，如果是个，相信你不是个纯切图仔。反之，如果是，该进阶了，老铁前端的我们，已经不仅仅是做页面，写样式了，我们还需要会做相关的服务器部署。废话不多说，下面就从前端的角度来讲以下的相关使用。nginx,作为前端的你会多少？--现在阅读的你，如果是个FE，相信你不是个纯切图仔。反之，如果是，该进阶了，老铁！前端的我们，已经不仅仅是做页面，写样式了，我们还需要会做相关的...
摘要：下面是取阿里云开放实验室的服务器演示登录安装源码编译安装安装的相关依赖下载包解压编译安装配置安装选项编译安装启动查看进程查看网页，启动成功。 --现在阅读的你，如果是个FE，相信你不是个纯切图仔。反之，如果是，该进阶了，老铁！ 前端的我们，已经不仅仅是做页面，写样式了，我们还需要会做相关的服务器部署。废话不多说，下面就从前端的角度来讲以下nginx的相关使用。 给我们的静态资源启一个...
摘要：转行前端有哪些疑虑在人生的抉择处，寻求一些别人的经验和总结，无可厚非，但是决定了就一定要坚定的走下去，谨慎是为了更好的坚持，而不是放弃的理由。写在前面这里前后端指的是开发的前后端。 转行前端有哪些疑虑？ 在人生的抉择处，寻求一些别人的经验和总结，无可厚非，但是决定了就一定要坚定的走下去，谨慎是为了更好的坚持，而不是放弃的理由。写在前面：这里前后端指的是web开发的前后端。1、前端岗位需...
摘要：转行前端有哪些疑虑在人生的抉择处，寻求一些别人的经验和总结，无可厚非，但是决定了就一定要坚定的走下去，谨慎是为了更好的坚持，而不是放弃的理由。写在前面这里前后端指的是开发的前后端。 转行前端有哪些疑虑？ 在人生的抉择处，寻求一些别人的经验和总结，无可厚非，但是决定了就一定要坚定的走下去，谨慎是为了更好的坚持，而不是放弃的理由。写在前面：这里前后端指的是web开发的前后端。1、前端岗位需...
摘要：转行前端有哪些疑虑在人生的抉择处，寻求一些别人的经验和总结，无可厚非，但是决定了就一定要坚定的走下去，谨慎是为了更好的坚持，而不是放弃的理由。写在前面这里前后端指的是开发的前后端。 转行前端有哪些疑虑？ 在人生的抉择处，寻求一些别人的经验和总结，无可厚非，但是决定了就一定要坚定的走下去，谨慎是为了更好的坚持，而不是放弃的理由。写在前面：这里前后端指的是web开发的前后端。1、前端岗位需...
阅读 3467·2021-11-12 10:36
阅读 2834·2021-09-22 15:35
阅读 2781·2021-09-04 16:41
阅读 1143·2019-08-30 15:55
阅读 3558·2019-08-29 18:43
阅读 2052·2019-08-23 18:24
阅读 1351·2019-08-23 18:10
阅读 1902·2019-08-23 11:31
