前端如何查看nginx配置（写给前端的nginx教程）
前端如何查看nginx配置（写给前端的nginx教程）到这一步就算是nginx部署成功了nginx 启动完成后，浏览器访问公网IP 就可以访问到nginx的默认主页CentOS自带yum命令，这个命令很关键，自行了解执行命令yum install nginx // 中途遇到需要确认的，直接确认即可 安装完成后 主机中便有了nginx服务，相关命令如下，启动完成后
我相信大部分前端新手是接触不到部署相关的工作的，一般都是将代码包交给后端，或者通过CI，FTP完成代码的更新，至于代码如何部署，如何从域名到前端代码包，很多前端仔没有实际操作过，自然是不知道的，这篇文章就是要帮助未接触过部署的人学会在服务器上线部署一个前端项目，在这个主线中带大家慢慢的熟悉nginx
前置知识- 一个云服务器，阿里云，腾讯云，xx云都行，首次购买或者学生认证都是有很大的优惠（本文以阿里云为例子）
- 了解linux基础命令，也就是对各种文件的增删改查
- 本教程基于CentOS 7.5系统，如果是图形化界面，或者其他系统，命令可能不完全一致，但是流程都是一致的，建议看对应教程
- 相关工具 上传文件FTP ssh工具 阿里云自带
重要: 如果linux基础命令不会。下面的也不用看了，立刻去学
搭建环境购买一个ECS云服务器，前段时间折扣，一年1核2G 40块钱不到~，新人长期存在优惠
连接服务器通过远程工具（CRT，Xshell）或者自带的远程连接进入自己的服务器，连接方式选择公网ip
CentOS自带yum命令，这个命令很关键，自行了解
执行命令
yum install nginx // 中途遇到需要确认的，直接确认即可
安装完成后 主机中便有了nginx服务，相关命令如下，启动完成后
nginx
启动完成后，浏览器访问公网IP 就可以访问到nginx的默认主页
到这一步就算是nginx部署成功了
nginx相关文件路径/etc/nginx/ // 配置文件
/usr/share/nginx/ // 默认前端代码存放处
默认配置在/etc/nginx/nginx.conf nginx根据默认配置，监听80端口，80端口指定了/usr/share/nginx/html这个文件夹，于是你访问公网ip -> 公网ip:80 -> /usr/share/nginx/html 于是"Welcome to CentOS"便呈现在你的面前
如果你希望不显示默认的页面，而是显示你自己写的项目，直接替换/etc/nginx/nginx.conf中的root 字段为自己程序包的路径
我们的代码除了部署在默认80端口上面，还可以其他端口上，例如8888，7777，等等
接下来我们就在一个自定义的端口上面部署一个站点
这里我们需要注意nginx.conf中的一行配置
含义：在目标文件夹下面所有nginx的配置文件都会自动生效
根据配置文件的提示我们到/etc/nginx/conf.d/下面，建立test.conf，nginx.conf根据通配符匹配conf.d/下的配置文件
通过·vi 写入内容
server {
listen 7777;
server_name _;
root /usr/share/nginx/test;
}
再去文件夹/usr/share/nginx/test下建立一个index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>我是7777端口</div>
</body>
</html>
最后重启nginx
nginx重启是瞬间的，没有报错就是重启成功
nginx -s reload
访问我们部署的项目ip:7777
然后你会发现访问不了，最终访问超时(==)，这是因为服务器限制了可访问端口，此时需要到云管理后台设置安全组
在ESC服务器后台增加安全组规则
之后就可以正常访问了！
至此，便完成了第一个nginx项目的部署
部署一个vue项目 通过上面的例子，我们已经可以完成一个自定义站点的部署了，那么真实项目呢，例如将一个vue项目部署到3006端口
- 首先编写xxx.conf
server {
listen 3006;
server_name _;
# 开启gzip相关配置
gzip on;
gzip_static on;
gzip_min_length 2k;
gzip_buffers 4 8k;
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/x-icon application/javascript;
gzip_comp_level 9;
gzip_disable "MSIE [1-6]\.";
# 站点代码路径
root /usr/share/nginx/client;
# 单页应用必须设置（刷新404问题）
location / {
try_files $uri $uri/ /index.html;
}
}
- 将打包之后的代码，通过FTP上传代码到目标文件夹/usr/share/nginx/client（注意文件夹名称）
- 重启nginx nginx -s reload
这边完成了一个站点的部署！是不是很简单
直接拿ip 端口给别人访问是不太好的，大家都给自己站点绑定上一个好记忆的域名，那么nginx如何绑定域名呢？
- 购买一个域名wanwang.aliyun.com/domain/，备案域…
- 备案完成后，域名就可以使用了
我们需要去修改我们的nginx配置，将server_name的值修改为需要绑定的域名即可；
server {
listen 3006;
server_name xxx.com;
// ....
增加https支持
- 申请一个https证书，数字证书管理，以阿里云为例子，国内云厂商都有
- 将证书放在服务器中你可以记得住的文件夹里面
- 修改nginx配置
server { // # 将当前域名的http自动打到https
listen 80;
server_name xxx.com;
rewrite ^(.*)$ https://$host$1 permanent;
}
server {
listen 443 ssl http2;
server_name xxx.com;
ssl_certificate xxxx/yy.pem; # 证书
ssl_certificate_key xxxx/yy.key; # 证书秘钥
# ssl验证相关配置
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; #使用服务器端的首选算法
#charset koi8-r;
#access_log /var/log/nginx/host.access.log main;
root /usr/share/nginx/client;
location / {
try_files $uri $uri/ /index.html;
}
}
相关推荐
基于ssh的轻量级前端更新方案 文章链接，个人项目用这个非常ok，非常方便，一行命令更新代码
基于gitLab CI/CD的前端更新方案 文章链接，公司项目建议用这个
结语 虽然部署一个站点，仅仅是用到nginx，但是涉及到的知识点还是很多的，一个有经验的开发人员部署一个站点，或许半小时就弄完了，但是对新手来说遇到一个报错都是灭顶之灾
如果遇到了错误，一定要仔细检查报错信息，百度百度基本都能得到答案，如果实在搞不定，直接重做云服务器系统，重头再来；
