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

inapt 发布于2019-07-25 14:42 / 2878人阅读

摘要：下面是取阿里云开放实验室的服务器演示登录安装源码编译安装安装的相关依赖下载包解压编译安装配置安装选项编译安装启动查看进程查看网页，启动成功。

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

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

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

给我们的nodejs 的项目设置反向代理，80端口访问

给我们的接口做转发

设置跨域请求

配置https服务的请求接口

登录云服务器

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

安装nginx (源码编译安装)

安装nginx 的相关依赖

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

下载nginx包

wget http://nginx.org/download/ngi...

解压：

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/docum...
是阿里云的免费https 证书，可参照该步骤。
有人说，前端为什么还要https 的服务？微信小程序的服务接口，需要走https 的哇！我们做demo，不要自己会配置一下吗，省得找后台哇

idc机房托管混合云部署前端到云服务器nginx 你会发现租用云服务器你会选择什么配置前端工程师月薪多少

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/40401.html

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

摘要：作为前端的你会多少现在阅读的你，如果是个，相信你不是个纯切图仔。反之，如果是，该进阶了，老铁前端的我们，已经不仅仅是做页面，写样式了，我们还需要会做相关的服务器部署。废话不多说，下面就从前端的角度来讲以下的相关使用。nginx,作为前端的你会多少？--现在阅读的你，如果是个FE，相信你不是个纯切图仔。反之，如果是，该进阶了，老铁！前端的我们，已经不仅仅是做页面，写样式了，我们还需要会做相关的...

Near_Li 2019-04-24 19:39 评论0 收藏0
nginx,作为前端的你会多少？

摘要：反之，如果是，该进阶了，老铁前端的我们，已经不仅仅是做页面，写样式了，我们还需要会做相关的服务器部署。废话不多说，下面就从前端的角度来讲以下的相关使用。--现在阅读的你，如果是个FE，相信你不是个纯切图仔。反之，如果是，该进阶了，老铁！前端的我们，已经不仅仅是做页面，写样式了，我们还需要会做相关的服务器部署。废话不多说，下面就从前端的角度来讲以下nginx的相关使用。给我们的静态资源启...

Coding01 2019-04-24 19:39 评论0 收藏0
26自学转行前端（写给和1年前一样迷茫的我的你）

摘要：转行前端有哪些疑虑在人生的抉择处，寻求一些别人的经验和总结，无可厚非，但是决定了就一定要坚定的走下去，谨慎是为了更好的坚持，而不是放弃的理由。写在前面这里前后端指的是开发的前后端。转行前端有哪些疑虑？在人生的抉择处，寻求一些别人的经验和总结，无可厚非，但是决定了就一定要坚定的走下去，谨慎是为了更好的坚持，而不是放弃的理由。写在前面：这里前后端指的是web开发的前后端。1、前端岗位需...

番茄西红柿 2019-08-30 15:54 评论0 收藏2637
26自学转行前端（写给和1年前一样迷茫的我的你）

摘要：转行前端有哪些疑虑在人生的抉择处，寻求一些别人的经验和总结，无可厚非，但是决定了就一定要坚定的走下去，谨慎是为了更好的坚持，而不是放弃的理由。写在前面这里前后端指的是开发的前后端。转行前端有哪些疑虑？在人生的抉择处，寻求一些别人的经验和总结，无可厚非，但是决定了就一定要坚定的走下去，谨慎是为了更好的坚持，而不是放弃的理由。写在前面：这里前后端指的是web开发的前后端。1、前端岗位需...

番茄西红柿 2019-08-22 18:26 评论0 收藏2577
26自学转行前端（写给和1年前一样迷茫的我的你）

摘要：转行前端有哪些疑虑在人生的抉择处，寻求一些别人的经验和总结，无可厚非，但是决定了就一定要坚定的走下去，谨慎是为了更好的坚持，而不是放弃的理由。写在前面这里前后端指的是开发的前后端。转行前端有哪些疑虑？在人生的抉择处，寻求一些别人的经验和总结，无可厚非，但是决定了就一定要坚定的走下去，谨慎是为了更好的坚持，而不是放弃的理由。写在前面：这里前后端指的是web开发的前后端。1、前端岗位需...

番茄西红柿 2019-08-02 10:48 评论0 收藏0